Workbox

隨著 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 是 PWA 社群中服務工作人員最常見的程式庫組合，但仍還有其他解決方案，例如 sw-tools 和 UpUp

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 外掛程式篩選要將哪些回應新增至快取。您可以使用這個外掛程式，只快取傳回的回應、未發生錯誤的回應。

注意： 雖然 Workbox 是以 npm 模組發布，但服務工作站本身並不支援每個瀏覽器的 ES 模組語法，因此建議您在部署前先使用 bundler 編譯這個程式碼範例。

下列程式碼範例使用快取優先策略 (透過 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：

試用： 使用 Workbox。

資源

• 開始使用 Workbox
• 工作箱模組
• 工作方塊的運作方式