調研pwa和sw

概述

處於好奇，最近我調研了一下pwa和service worker，有些新的，記錄下來，供之後開發時參考，相信對其餘人也有用。pwa主要是經過service worker實現的，它主要包括桌面圖標，離線緩存和消息推送這三個方面。

注意：開啓service worker須要https環境，詳細搭建流程能夠看我上一篇博文。

service worker的離線緩存可使用封裝好的sw-precache庫實現，其它功能能夠用sw-toolbox庫實現；另外還有一個新的庫workbox-sw能夠取代這2個庫。

參考資料：

Service Workers 和離線緩存

Web Push

mdn Using Service Workers

RE0：在Vue裏用Service Worker來搞箇中間層（React同理）（超詳細）

桌面圖標

實現桌面圖標須要項目中有service worker和manifest文件。

其中pc端不支持manifest文件，ios移動端也不支持，只有安卓移動端才支持manifest文件。

離線緩存

service worker有這樣一條特性，就是它會攔截全部的http請求，因此在使用service worker的時候需謹慎。

而且，service worker在pc和移動包括ios上面都已經有良好的支持了。

另外，service worker還有離線緩存的api能夠緩存數據，能夠在攔截http請求後判斷是否須要使用離線數據，也能夠設置以什麼方式使用離線數據。

消息推送

service worker其實在本地進程中開了一個本地服務器，而後能夠經過這個服務器來作許多有意思的事情，好比消息推送。

消息推送的原理是，在service worker建立的時候就給遠程推送服務器發送一個標識，而且監聽推送事件，而後遠程推送服務器在須要推送的時候就給標識列表的全部服務器發送推送信息，而後service worker就能夠接收這些推送信息，利用h5的notification api顯示推送信息。

其它

因爲service worker在瀏覽器本地開了一個服務器（是在進程裏面，能夠不會由於瀏覽器關閉而關閉），因此它還能作另一些激動人心的事情：

1. sw服務器中間層。通常來講，不少項目會使用nodejs搭建一個數據中間層處理數據，可是如今能夠把這個中間層放到瀏覽器的sw裏面。

2. 緩存自動更新，由於咱們的數據都是經過api請求的，若是緩存這些數據就不能更新拿到最新數據了，可是經過sw就能夠在須要更新的時候接收遠程服務器的更新推送，而後攔截http請求，給有須要的接口從新發送http請求，給不須要的接口就用緩存的數據。

3. sw處理業務數據。大數據相關的項目，通常在接口方面須要先進行不少和業務數據相關的處理，若是在項目中處理的話會很繁瑣，如今能夠拿到sw裏面處理。