淺談一下我瞭解的PWA

Progressive Web Apps,簡稱PWA，中文翻譯過來就是漸進式網頁應用，我的以爲它能夠算是Web應用的下一個進化方向之一， 畢竟技術的發展有時候是不可預估的，誰也沒法預料技術的走向，但至少它表明了一種可能性，下面咱們就一塊兒來了解下這種新興技術。

如下僅表明我的看法和認知，有結合其餘大神的文章的分析，若有不足之處歡迎指正！

 1、什麼是Progressive Web Apps? 

Progressive Web Apps，簡稱PWA，中文直譯過來就是漸進式Web應用，一個合格的PWA，應該具備但不限於如下特色：

 漸進式：針對不一樣版本不一樣內核的瀏覽器，它的功能可以漸進式的加強，隨着用戶與應用之間的聯繫加深，若是用戶須要，網頁能夠漸進式地變成App，好比被添加到主屏幕、全屏方式運行、離線工做、推送通知消息等。但它還是 Web 而非放到 App Store 裏。

響應式：適應多種運行環境，不管是移動端、web端仍是平板電腦等等。

對網絡環境的弱依賴： 得益於谷歌的service worker技術，使PWA極大下降對網絡環境的依賴，可以在離線或者網絡極差的環境下工做。

持續更新：一樣因爲service worker的存在，應用可以輕鬆實現持續更新。

類原生體驗：有像原生應用般的交互和導航給用戶原生應用般的體驗，若是用戶願意，特悶能夠選擇將PWA應用添加到手機主屏幕，一樣得益於service worker，它甚至可讓PWA應用像原生應用同樣接收消息推送。

安全：經過 HTTPS 來提供服務來防止網絡窺探，保證內容不被篡改。

2、我我的對PWA的一些認知

以上對PWA的一些定義，都是一些官方的定義或者一些大神的認知，下面來談談我我的對PWA的一些認知，以及它和目前的Hybrid App、小程序、快應用的區別。

目前市場上主流的Hybrid App無非兩種作法：

1.相似React Native這種，經過JavaScript語言進行開發，視覺上經過標籤轉義，將RN標籤轉化爲手機原生圖形界面；操做上經過js調用手機底層硬件和SDK；這種作法的優勢是APP體驗好，缺點是開發週期幾乎和原生APP差很少

2.國內外不少中小企業比較青睞的H5頁面套APP外殼的作法，例如國內的APICloud、H5plus等等，其本質上只是一個能夠訪問特定H5頁面的瀏覽器；這種作法的優勢是開發週期短，缺點是體驗和性能都較差。

而小程序和快應用，我的認爲更多的是借鑑React Native的思路進行實現的，尤爲是微信小程序，基本上就是沿用了RN的那一套。

那麼PWA和以上幾種應用的區別在哪裏呢？有些人可能會以爲PWA和小程序以及快應用幾乎沒什麼區別，但在我看來，PWA和小程序、快應用、混合APP這些東西天生就不同！

還記得PWA的全名嗎？Progressive Web Apps，這裏已經寫得很明確了，它是Web App啊，React Native、小程序、快應用一直在致力於去HTML化，雖然他們都是使用JavaScript做爲開發語言進行編寫的，可是你要知道，JavaScript本就不是隻爲HTML而生的，若是你有閱讀過相關書籍你就會知道，JavaScript其實能夠在瀏覽器之外的環境下運行！

以上其它應用，基本都已經摒棄了HTML中除了JS之外的其它內容，可是PWA不同，它從骨子裏仍然是一個Web頁面！說到Web App,有些同窗可能會嗤之以鼻，確實，當前市場下，Web App也就是移動端Web頁面的份額已經極大化的萎縮（下圖是google發佈的移動Web和App使用時長佔比），或者說Web App可能歷來沒有輝煌過，從傳統電腦端轉移到智能手機時代，中間的過渡其實很是短，相信這點你們都是感同身受的，可是如今，誰也說不許Web App是否來到了一個風口位置 -- 由於有了PWA，你訪問的Web頁面已經有了可以媲美原生App的體驗！

3、PWA將如何改變咱們的移動體驗？

當你在手機瀏覽器中打開一些Web網頁時，常常會看到如下的頁面:

這些Web App會推薦你打開它們的原生應用，若是你的手機沒有下載則會跳轉到相應的下載頁面，可是對於用戶來說，在沒有WIFI的狀況下可能並不想爲了一個不經常使用到的App消耗流量和系統內存，或者手機容量比較吃緊的用戶，可能有時候會爲了刪除哪些應用保留哪些應用而猶豫不決，如今有了PWA，一切都能迎刃而解！而這些，還不是所有！

在2016年11月google團隊已經在嘗試並初步實現把「添加至主屏」重命名爲「安裝」，被安裝的 PWA 再也不僅以 widget 的形式顯示在桌面上，而是真正作到與全部原生應用平級，同樣被收納進應用抽屜（App Drawer）裏，同樣出如今系統設置中。

PWA可以得到和原生APP同級的權限，也可以像原生APP同樣實時獲取推送消息，即便你在之後想要刪掉這個PWA應用，你也依然能夠在瀏覽器中得到高質量高體驗的Web頁面，在Web端，甚至Mac環境下也能享受到這種體驗！

4、案例欣賞

國內外有一些優秀的技術團隊已經開始嘗試並推出了一些不錯的PWA應用，我這裏簡單介紹下兩個已知的

FlipKart(印度)

離線狀況下的視覺差別

豆瓣(中國)