Service Worker:讓網(wǎng)頁無網(wǎng)絡(luò)也能訪問

　　介紹

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

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

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

　　工作原理

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

　　每個(gè) service worker 會(huì)對應(yīng)一個(gè)緩存池，每個(gè)緩存池有多個(gè)緩存?zhèn)}庫。

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

　　Serice Worker

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

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

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

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

　　從使用開始

　　準(zhǔn)備工作

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

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

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

　　注冊 Service Worker

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

　　這個(gè) service-worker.js 文件必須放在跟目錄，因?yàn)?service workers 的作用范圍是根據(jù)其在目錄結(jié)構(gòu)中的位置決定的。

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

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

　　加載緩存

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

　　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);    })  );});

　　當(dāng)監(jiān)聽到install事件以后，去緩存池打開名為 oslab-kymjs-blog 的緩存?zhèn)}庫。

　　每個(gè) service worker 會(huì)對應(yīng)一個(gè)緩存池，每個(gè)緩存池有多個(gè)緩存?zhèn)}庫。

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

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

　　調(diào)試

　　用 Chrome Developer Tools 調(diào)試 Service Worker 非常方便。

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

　　切換到 Application 視圖

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

　　Serice Worker

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

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

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

　　Serice Worker

　　刪除無用緩存

　　當(dāng) service worker 開始啟動(dòng)時(shí)，就會(huì)觸發(fā) activate 事件。 所以我們監(jiān)聽 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);          }        }));      })    );  });

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

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