輕鬆把你的項目升級到PWA

什麼是PWA

PWA（Progressive Web Apps,漸進式網頁應用）是Google在2015年推出的項目，致力於通過web app獲得類似native app體驗的網站。

優點

1.無需客戶端，少量流量即可安裝 2.可添加到主屏並全屏運行 3.離線功能，響應更快，及時更新 4.PUSH能力 5.數據傳輸必須是https

缺點

1.safari對PWA的態度是考慮中,暫時還不支持 2.PUSH還不夠成熟，依賴於Web Push Protocol,Chrome只支持Google私有的GCM（Google Cloud Messaging）/FCM服務進行通知推送。國內的mipush也支持了很多app，在此希望中國能儘快有一個統一的推送服務出現~

個人觀點

PWA屬於非侵入式的技術，可以做到降級兼容，並且擁有強大的離線功能，可以更快的響應，所以還是非常推薦使用的。

網路應用清單

網路應用清單是一個 文件，主要定義一些啟動網址，自定義圖標，啟動畫面，主題顏色，啟動樣式等等配置信息 這邊是在App內的M頁，並且國內安卓用戶使用的瀏覽器都不太支持這些定義，所以不詳細介紹了。 The Web App Manifest官方文檔，介紹的很詳細~ webpack-manifest-plugin如果使用webpack也可以使用類似這種插件來生成~ Web App Manifest Generator如果手寫也有像這樣的工具提供~

Service workers

定義：Service workers 本質上充當Web應用程序與瀏覽器之間的代理伺服器，也可以在網路可用時作為瀏覽器和網路間的代理。它們旨在（除其他之外）使得能夠創建有效的離線體驗，攔截網路請求並基於網路是否可用以及更新的資源是否駐留在伺服器上來採取適當的動作。他們還允許訪問推送通知和後台同步API。

生命周期：註冊下載安裝激活

狀態、 、 、 、

主要事件準備sw用於使用，例如創建緩存，放置離線資源 此時可以清理舊緩存及相關的東西以便更新 響應請求事件，通過 方法，對這些請求做處理 install、activate事件會觸發 方法

注意：1.Service workers運行在其他線程，完全非同步，同步API不能在其中使用 2.大量使用Promise

Cache

方法、 、 、 、 、

基礎用法

單獨創建一個app.js文件，放到根目錄,並在index.html中引用它

根目錄下創建執行文件service-worker.js

webpack項目升級PWA

看到上邊n多的API是不是很頭疼，以及手動添加靜態文件是不是很絕望，那麼sw-precache-webpack-plugin這個插件輕鬆幫你解決所有問題 現在我們就來升級下之前推過的小型Web頁打包優化這片文章中所介紹的腳手架

1.修改文件：

自動生成service-worker.js並自動完成相關配置

2.通過正常邏輯打包~

3.啟動一個本地靜態伺服器

為了方便調試Service Worker在http://localhost或者http://127.0.0.1 本地環境下也可以跑起來 將打包好的文件通過http-server生成的靜態伺服器運行 運行結果：

關掉http-server可以看到依然可以訪問

注意：如果你的靜態文件是放到CDN上的，那麼伺服器一定要開通CORS，因為fetch請求是不支持跨域的~~

致此，項目改造就算完成了，總體來說改造成本還是很低的，所以小夥伴們一起搞起來吧~

——————————————————

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！