介紹

　　PWA(Progressive Web Apps) 一定是將來(lái)的移動(dòng)開(kāi)發(fā)趨勢。

　　Progressive Web Apps 比小程序還要方便，對于首次訪(fǎng)問(wèn)的用戶(hù)可以直接在瀏覽器中進(jìn)行訪(fǎng)問(wèn)，不需要安裝應用。即使在比較糟糕的網(wǎng)絡(luò )環(huán)境下，也能夠快速地加載，且能夠推送相關(guān)消息, 也可以像原生應用那樣添加至桌面或瀏覽器主屏，能夠有全屏瀏覽的體驗。

　　PWA 和 Service Worker 是什么關(guān)系？Service Worker 是一個(gè)運行在瀏覽器后臺進(jìn)程里的js，基于它可以實(shí)現消息推送，靜默更新以及攔截和處理網(wǎng)絡(luò )請求，包括可編程的響應緩存管理，是 PWA 的核心。

　　工作原理

　　Service worker 是一個(gè)完全獨立于 Web 頁(yè)面的 js 腳本，有他自己的生命周期。

　　每個(gè) service worker 會(huì )對應一個(gè)緩存池，每個(gè)緩存池有多個(gè)緩存倉庫。

　　首先講講它的聲明周期，借用 Google 的一張圖片：

　　Serice Worker

　　若網(wǎng)站對應的 cacheName 沒(méi)有 install，則首先觸發(fā) install事件。

　　若install失敗，則退出等待下次訪(fǎng)問(wèn)再啟動(dòng)；否則觸發(fā)activate事件。

　　在activate中，判斷當前頁(yè)面是否在上文聲明的 filesToCache 列表中，如果是則接管網(wǎng)頁(yè)的顯示。

　　接管網(wǎng)頁(yè)以后，如果當前內存不足，會(huì )被殺死；否則等待處理fetch和message事件。這兩個(gè)事件一個(gè)是當網(wǎng)絡(luò )請求時(shí)，或者其他網(wǎng)頁(yè)發(fā)出了消息時(shí)。 本文只講如何讓你的網(wǎng)頁(yè)無(wú)網(wǎng)絡(luò )也能訪(fǎng)問(wèn)，沒(méi)有講這兩個(gè)事件，下一篇文章再給大家講講 service worker 深度使用。

　　從使用開(kāi)始

　　準備工作

　　首先你的站點(diǎn)必須支持https 。

　　其次，你至少得懂一點(diǎn) js開(kāi)發(fā)。

　　最后，你得有一個(gè) 52 或以上的版本的 Chrome 用作調試。

　　注冊 Service Worker

　　首先，在你的網(wǎng)站根目錄下創(chuàng )建一個(gè) service-worker.js 文件(文件名自定)。

　　這個(gè) service-worker.js 文件必須放在跟目錄，因為 service workers 的作用范圍是根據其在目錄結構中的位置決定的。

　　然后需要檢查瀏覽器是否支持 service workers，如果支持，就注冊 service worker，將下面代碼添加至網(wǎng)頁(yè)要加載的js中。

　　if('serviceWorker' in navigator) {      //注冊上一步創(chuàng )建的js文件    navigator.serviceWorker          .register('/service-worker.js')          .then(function() { console.log('Service Worker Registered'); });  }

　　加載緩存

　　當用戶(hù)訪(fǎng)問(wèn)一個(gè)注冊了 service worker 的頁(yè)面時(shí)，會(huì )觸發(fā)一個(gè)叫install事件，所以我們首先對這個(gè)事件監聽(tīng)。

　　var cacheName = 'oslab-kymjs-blog';var filesToCache = [];self.addEventListener('install', function(e) {  console.log('[ServiceWorker] Install');  e.waitUntil(    caches.open(cacheName).then(function(cache) {      console.log('[ServiceWorker] Caching app shell');      return cache.addAll(filesToCache);    })  );});

　　當監聽(tīng)到install事件以后，去緩存池打開(kāi)名為 oslab-kymjs-blog 的緩存倉庫。

　　每個(gè) service worker 會(huì )對應一個(gè)緩存池，每個(gè)緩存池有多個(gè)緩存倉庫。

　　只要緩存被打開(kāi)，就調用 cache.addAll() 并傳入一個(gè) url 列表，然后加載這些資源并將響應添加至緩存。

　　有個(gè)注意事項要知道 cache.addAll() 方法中，如果某個(gè)文件下載失敗了，那么整個(gè)緩存就會(huì )失敗，service worker 的install事件也將會(huì )失敗。而如果install失敗了，那么接下來(lái) service worker 就完全不會(huì )工作了。 所以一定要注意，文件列表一定不要太長(cháng)了，越長(cháng)造成失敗的可能性就越高，每個(gè)要緩存的頁(yè)面越大失敗的可能性也越高。

　　調試

　　用 Chrome Developer Tools 調試 Service Worker 非常方便。

　　首先 run 起你本地的 server(我博客是 jekyll 生成的，所以直接用了 jekyll 服務(wù))，然后 Chrome 右上角三個(gè)點(diǎn)，More Tools，Developer Tools。(mac快捷鍵 cmd+opt+i)

　　切換到 Application 視圖

　　你應該能看到這樣的一個(gè)頁(yè)面

　　Serice Worker

　　首次運行應該顯示空的，看不到東西，刷新一下就可以了。但如果刷新后還是看不到，這意味著(zhù)當前打開(kāi)的頁(yè)面沒(méi)有已經(jīng)被注冊的 Service Worker，檢查一下 注冊 步驟的js是否被加載了吧。

　　刷新前 注意勾選【update on reload】不然每次刷新都會(huì )起一個(gè)新的service worker，然后由于是串行執行，會(huì )等待前一個(gè)執行完，不然得手動(dòng)點(diǎn)【skipWaiting】。

　　然后如果勾選了【update on reload】，可能會(huì )看到這個(gè)警告，無(wú)所謂，忽略它就好了。

　　Serice Worker

　　刪除無(wú)用緩存

　　當 service worker 開(kāi)始啟動(dòng)時(shí)，就會(huì )觸發(fā) activate 事件。 所以我們監聽(tīng) activate 在這里更新緩存。

　　self.addEventListener('activate', function(e) {    console.log('[ServiceWorker] Activate');    e.waitUntil(      caches.keys().then(function(keyList) {        return Promise.all(keyList.map(function(key) {          console.log('[ServiceWorker] Removing old cache', key);          if (key !== cacheName) {            return caches.delete(key);          }        }));      })    );  });

　　以上代碼表示，如果執行到了 activate，首先判斷現在緩存池中的緩存倉庫 cacheName 是否和我們聲明的 cacheName 同一個(gè)，如果不是，就清空緩存池中的無(wú)用緩存(install中下載新的緩存，activate 中刪除舊緩存)。所以建議大家在 cacheName 的末尾加一個(gè)版本號，這樣可以始終讓service worker 加載最新的緩存。

　　至此，就為我們的博客完整接入了 service worker。