淺談一下我瞭解的PWA

 一、什麼是Progressive Web Apps? 

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

 漸進式：針對不同版本不同核心的瀏覽器，它的功能能夠漸進式的增強，隨著使用者與應用之間的聯絡加深，如果使用者需要，網頁可以漸進式地變成App，比如被新增到主螢幕、全屏方式執行、離線工作、推送通知訊息等。但它仍是 Web 而非放到 App Store 裡。

響應式：適應多種執行環境，無論是移動端、web端還是平板電腦等等。

對網路環境的弱依賴： 得益於谷歌的service worker技術，使PWA極大降低對網路環境的依賴，能夠在離線或者網路極差的環境下工作。

持續更新：同樣由於service worker的存在，應用能夠輕鬆實現持續更新。

類原生體驗：有像原生應用般的互動和導航給使用者原生應用般的體驗，如果使用者願意，特悶可以選擇將PWA應用新增到手機主螢幕，同樣得益於service worker，它甚至可以讓PWA應用像原生應用一樣接收訊息推送。

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

二、我個人對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的體驗！

三、PWA將如何改變我們的移動體驗？

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