隨著 PWA 不斷成長,維護服務工作站和快取儲存空間邏輯可能並不容易。Workbox 是一組開放原始碼程式庫,可協助完成這項操作。Workbox 會封裝低階 API (例如 Service Worker API 和 Cache Storage API),並公開更易於開發人員使用的介面。
這項功能可協助您將快取策略與路徑 (或轉送模式) 進行比對、處理串流,以及使用背景同步處理等功能搭配適當的備用方案。
Workbox 可協助您管理資產快取和提供服務的需求。也是服務工作人員最常使用的程式庫;有 54% 的行動版網站都採用這個程式庫,並用於許多建構工具和 CLI,包括 Angular CLI、Create-React-App 和 Vue CLI。還有大多數其他程式庫和架構的外掛程式,例如 Next.js。
54%
設有 Service Worker 的行動版網站會使用 Workbox 程式庫
Workbox 模組
Workbox 包含多個「程式庫」(在內部稱為模組),每個程式庫分別專注於管理資產和服務 Worker 行為的不同面向。
Workbox 模組在不同情況下運作,例如:
- 在 Service Worker 內:您匯入所需的模組,並自 Service Worker 檔案使用模組,例如協助您以不同策略管理快取和提供檔案。
- 在
window
主要結構定義中:協助註冊 Service Worker,並與對方通訊 - 建構系統的一部分:例如 Webpack、建立資產資訊清單,或產生整個 Service Worker 等用途。
以下是一些熱門模組:
- workbox-routing:當 Service Worker 攔截要求時,這個模組會將這些要求轉送至提供回應的不同函式;則會實作
fetch
事件處理常式,如「服務」章節所述。 - 工作流程:一組可處理回應要求的執行階段快取策略,例如先快取快取,在重新驗證時過時。這些策略實行了「服務」章節中提及的不同策略。
- workbox-precaching:這是在服務 Worker 的
install
事件處理常式 (也稱為預先快取) 中快取檔案實作,如快取章節所述。透過此模組,您可以輕鬆預載一組檔案,並有效管理這些資產的更新。「更新」章節將說明如何更新資產。 - workbox-expiration:這個外掛程式可與快取策略搭配使用,根據快取中的項目數量或根據快取要求的存在時間移除快取要求。這有助於管理快取,並設定每個快取項目的時間和項目數量限制。
- workbox-window:用來在視窗內容中執行的一組模組,也就是 PWA 網頁中的內容。您可簡化服務工作處理程序的註冊和更新流程,讓在 Service Worker 環境中執行的程式碼和視窗內容之間能夠更輕鬆地進行通訊。
使用 Workbox
Workbox 提供多種整合至 PWA 的方式。您可以選擇最適合您應用程式的架構:
- Workbox CLI:這是一種指令列公用程式,可產生完整的 Service Worker、插入預快取資訊清單,或複製所需的 Workbox 檔案。
- Workbox Build:這個 npm 模組會產生完整 Service Worker、插入預快取資訊清單及複製 Workbox 檔案。本功能應與您的建構程序整合。
- workbox-sw:從不使用建構程序的 CDN 載入 Workbox Service Worker 套件的方法。
Workbox CLI 提供精靈,可逐步引導您建立 Service Worker。如要執行精靈,請在指令列中輸入以下內容:
npx workbox-cli wizard
使用 Workbox 快取及提供內容
Workbox 的常見用法是同時使用轉送和策略模組來快取及提供檔案。
「工作流程策略」單元提供立即可用的快取策略,詳情請參閱「資產和資料」和「提供」章節。
workbox-routing 模組可協助您將傳入要求排序至服務工作站,然後將這些要求與快取策略或函式進行比對,以取得這些要求的回應。
在比對策略路徑之後,Workbox 也能使用 workbox-cacheable-response 外掛程式篩選要將哪些回應新增至快取。您可以使用這個外掛程式,只快取傳回的回應、未發生錯誤的回應。
下列程式碼範例使用快取優先策略 (透過 CacheFirst
模組) 來快取並提供網頁導覽功能。
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
const pageStrategy = new CacheFirst({
// Put all cached files in a cache named 'pages'
cacheName: 'pages',
plugins: [
// Only requests that return with a 200 status are cached
new CacheableResponsePlugin({
statuses: [200],
}),
],
});
這個外掛程式可讓您使用 Workbox 的快取及要求的解決生命週期。這裡的 CacheableResponsePlugin
只會用來快取產生 200 狀態的要求,以防止無效要求儲存至快取。
建立策略後,即可登錄路徑來使用。以下範例會呼叫 registerRoute()
,將 Request 物件傳遞至其回呼。如果 request.mode
是 "navigate"
,則會使用先前程式碼範例中定義的 CacheFirst
策略 (此處稱為 pageStrategy
)。
// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
pageStrategy );
如需更多範例和最佳做法,請參閱 Workbox 說明文件。
離線備用廣告
workbox-routing 模組也包含匯出的 setCatchHandler()
,可在路徑擲回錯誤時提供處理。您可以運用這項設定設定離線備用項,通知使用者所要求的路徑目前無法提供。
在這裡,Workbox 與 Cache Storage API 結合使用快取專用策略,可提供離線備用方案。
首先,在 Service Worker 的安裝生命週期期間,開啟 offline-fallbacks
快取,並將離線備用的陣列加入快取。
import { setCatchHandler } from 'workbox-routing';
// Warm the cache when the service worker installs
self.addEventListener('install', event => {
const files = ['/offline.html']; // you can add more resources here
event.waitUntil(
self.caches.open('offline-fallbacks')
.then(cache => cache.addAll(files))
);
});
接著,在 setCatchHandler()
中,判斷擲回錯誤的要求目的地,並開啟 offline-fallbacks
快取。如果目的地是文件,系統會將離線備用的內容傳回給使用者。如果不存在,或是目的地不是文件 (例如圖片或樣式表),系統會傳回錯誤回應。除了文件,您還可以針對圖片、影片、字型等任何您想提供離線備用項目的內容,延伸此模式。
// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
const destination = options.request.destination;
const cache = await self.caches.open('offline-fallbacks');
if (destination === 'document') {
return (await cache.match('/offline.html')) || Response.error();
}
return Response.error();
});
套件
某些轉送和快取模式 (例如 NetworkFirst
導覽和離線備用項目) 很常見,可以封裝成可重複使用的方案。如果這些解決方案提供適合您架構的解決方案,請務必勾選工作箱方案。這些錯誤通常是以一行程式碼的形式提供,您必須新增至 Service Worker 的程式碼。
快取及更新資產
快取資產也涉及更新資產。Workbox 能讓您以最佳方式更新資產。如果伺服器有變更,就可能持續更新,或等到應用程式有新版本後再繼續更新。如要進一步瞭解更新方式,請參閱更新章節。
暢玩 Workbox
您可以立即透過以下程式碼研究室試用 Workbox: