建構可靠的網頁應用程式時，有兩個 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',
})
);