Service Worker:讓網頁無網路也能訪問

01-30

來源：Service Worker:讓網頁無網路也能訪問
作者：張濤（轉載已獲得作者許可，如需轉載請與原作者聯繫）

寫在前面

本文開源實驗室原創，轉載請以鏈接形式註明地址：Service Worker:讓網頁無網路也能訪問

想要開發一個 PWA(Progressive Web App)應用，你必須知道首先知道，Service Worker 是什麼，他是怎麼工作的。

介紹

首先，寫給所有移動端開發的同學：PWA(Progressive Web Apps) 一定是將來的移動開發趨勢，且學且珍惜。

Progressive Web Apps 比小程序還要方便，對於首次訪問的用戶可以直接在瀏覽器中進行訪問，不需要安裝應用。即使在比較糟糕的網路環境下，也能夠快速地載入，且能夠推送相關消息, 也可以像原生應用那樣添加至桌面或瀏覽器主屏，能夠有全屏瀏覽的體驗。

PWA 和 Service Worker 是什麼關係？Service Worker 是一個運行在瀏覽器後台進程里的js，基於它可以實現消息推送，靜默更新以及攔截和處理網路請求，包括可編程的響應緩存管理，是 PWA 的核心。

開源實驗室 (開源實驗室) 已啟用 Service Worker，現在只要你訪問過的文章，在主流瀏覽器(包括PC、手機)二次訪問均可離線訪問啦。

工作原理

Service worker 是一個完全獨立於 Web 頁面的 js 腳本，有他自己的生命周期。

每個 service worker 會對應一個緩存池，每個緩存池有多個緩存倉庫。

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

若網站對應的 cacheName 沒有 install，則首先觸發 install事件。

若install失敗，則退出等待下次訪問再啟動；否則觸發activate事件。

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

接管網頁以後，如果當前內存不足，會被殺死；否則等待處理fetch和message事件。這兩個事件一個是當網路請求時，或者其他網頁發出了消息時。本文只講如何讓你的網頁無網路也能訪問，沒有講這兩個事件，下一篇文章再給大家講講 service worker 深度使用。

從使用開始

準備工作

首先，你的站點必須支持https (這也是為什麼這兩天你訪問開源實驗室出錯的原因，在轉全站 https)。

其次，你至少得懂一點 js開發。

最後，你得有一個 52 或以上的版本的 Chrome 用作調試。

註冊 Service Worker

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

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

然後需要檢查瀏覽器是否支持 service workers，如果支持，就註冊 service worker，將下面代碼添加至網頁要載入的js中。

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

載入緩存

當用戶訪問一個註冊了 service worker 的頁面時，會觸發一個叫install事件，所以我們首先對這個事件監聽。

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

當監聽到install事件以後，去緩存池打開名為 oslab-kymjs-blog 的緩存倉庫。每個 service worker 會對應一個緩存池，每個緩存池有多個緩存倉庫。只要緩存被打開，就調用 cache.addAll() 並傳入一個 url 列表，然後載入這些資源並將響應添加至緩存。

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

調試

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

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

切換到 Application 視圖

你應該能看到這樣的一個頁面

首次運行應該顯示空的，看不到東西，刷新一下就可以了。但如果刷新後還是看不到，這意味著當前打開的頁面沒有已經被註冊的 Service Worker，檢查一下註冊步驟的js是否被載入了吧。

刷新前注意勾選【update on reload】不然每次刷新都會起一個新的service worker，然後由於是串列執行，會等待前一個執行完，不然得手動點【skipWaiting】。

然後如果勾選了【update on reload】，可能會看到這個警告，無所謂，忽略它就好了。

刪除無用緩存

當 service worker 開始啟動時，就會觸發 activate 事件。所以我們監聽 activate 在這裡更新緩存。

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

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

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

如果還不會，你可以以我博客的 service worker 做參考，看看我的寫法開源實驗室防盜鏈。

最後，附上 Google 對 Service Worker 的介紹：an Introduction。