建構可靠的網頁應用程式時,有兩個 API 扮演重要角色:Service Worker 和快取儲存空間。但要有效運用這類元件,卻又不會出現細微錯誤或碰撞到極端案例,實在是一大挑戰。例如,服務工作站程式碼中的錯誤可能會造成快取問題;使用者可能會看到過舊的內容或無效連結。
Workbox 是以 Service Worker 和 Cache Storage API 為基礎建構的高階 Service Worker 工具包。它提供一組可立即用於實際工作環境的程式庫,可在網頁應用程式中加入離線支援。此工具包分成兩種集合:協助管理在 Service Worker 內執行的程式碼,以及與建構程序整合的工具。
執行階段程式碼
這個程式碼是在 Service Worker 指令碼中執行,可控制如何攔截傳出要求並與 Cache Storage API 互動。Workbox 有總共十個程式庫模組,每個模組都可以處理各種特殊用途。最重要的模組會決定 Service Worker 是否會回應 (稱為轉送),以及其回應「方式」 (稱為「快取策略」)。
版本整合
Workbox 提供指令列、Node.js 模組和 webpack 外掛程式工具,讓您以替代方式完成下列兩項工作:
- 根據一組設定選項建立 Service Worker 指令碼。產生的 Service Worker 會使用 Workbox 的執行階段程式庫,放入您設定的快取策略。
- 根據可設定模式,產生應「預先快取」的網址清單,以納入及排除在建構過程中產生的檔案。
為什麼要使用 Workbox?
您可以選擇是否要使用 Workbox 來建構服務工作站。您可以參考本指南,從「基本」服務工作站的角度,逐步瞭解常見的快取策略。如果您決定使用 Workbox,以下是其一些優點。
快取管理
Workbox 會為您處理快取更新,無論是在使用預先快取時繫結至建構程序,還是在使用執行階段快取時,都能透過可設定的大小/年齡政策處理。底層 Cache Storage API 功能非常強大,但無法內建任何快取到期時間功能。Workbox 這類工具可以填補缺口。
廣泛的記錄和錯誤回報
在開始使用服務 Worker 時,瞭解為什麼要快取內容 (或者也很令人困擾,為何不快取快取) 是一大難題。當您在 localhost
上執行網站的開發版本時,Workbox 會自動偵測,並在瀏覽器的 JavaScript 控制台中開啟偵錯記錄功能。
您可以按照記錄訊息,快速找出任何設定或無效問題的根源,比單單自行處理來得快。
經過測試的跨瀏覽器程式碼集
Workbox 是根據跨瀏覽器測試套件開發而成,且會盡可能自動改回使用某些瀏覽器缺少的功能實作。
- 在適用情況下,
workbox-broadcast-cache-update module
會使用 Broadcast Channel API,並在不支援支援的瀏覽器上改回使用以postMessage()
為基礎的實作。 - workbox-background-sync 模組會盡可能使用 Background Sync API,如果不能,則每次服務工作站啟動時,會改回重試佇列中的事件。
請問你該如何使用 Workbox?
架構整合
如要從頭開始建立新專案,您可以使用許多熱門入門套件和外掛程式外掛程式中的 Workbox 整合功能:
將 Workbox 新增至現有的建構程序
如果您已為網站建立建構程序,那麼您也許只要直接捨棄適當的指令列、Node.js 模組或 Webpack 外掛程式工具,就可以開始使用 Workbox。
具體來說,Workbox 指令列介面可讓您輕鬆啟動及執行,具有 wizard
模式會檢查本機開發環境,並建議可行的預設設定,讓您使用向前移動:
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
如要建構 Service Worker,請在建構程序中執行 workbox generateSW workbox-config.js
。詳情請參閱 generateSW
說明文件。
變更 workbox-config.js
即可進一步自訂服務工作站。詳情請參閱選項說明文件。
在現有 Service Worker 的執行階段使用 Workbox
如果您已有服務工作站,並且想要試用 Workbox 的執行階段程式庫,請從官方 CDN 匯入 Workbox,並立即開始將其用於執行階段快取。這個應用實例代表您將無法利用預先快取 (需要建構階段整合),但很適合用於設計原型並即時嘗試不同的快取策略。
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);