使用 Workbox 預先快取

預先快取是 Service Worker 中最常見的工作之一，而 Workbox 讓員工以更靈活的方式完成這項重要工作，而無論選擇何種 Workbox 的建構工具都可以。本指南將說明如何使用 generateSW 和 injectManifest 預先快取資產，以及下列哪些方法最適合您的專案。

使用 generateSW 預先快取

如要在 Workbox 中預先快取資產，最簡單的方法就是使用 generateSW。關於 generateSW 的重點是，您並不是自行編寫 Service Worker，而是要求 Workbox 產生一個。不過，您「可以」透過各種設定選項影響其行為。

根據預設，generateSW 會根據您使用的建構工具執行不同工作。使用 workbox-webpack-plugin 時，您不必指定任何設定選項。根據預設，外掛程式會預先快取 webpack 包含的依附元件圖表，並將名為 service-worker.js 的服務工作站寫入 output.path 指定的目錄。

另一方面，如果您使用 workbox-build 或 workbox-cli，根據預設，系統只會預先載入從本機檔案系統讀取的 HTML、CSS 和 JavaScript 資產。在設定時，您必須在 generateSW 設定中指定 swDest 和 globDirectory 選項，預先快取功能才能運作。您或許也會想設定會影響 Service Worker 行為的其他選項，因此，請參閱說明文件。

使用 injectManifest 預先快取

使用 injectManifest 並不像使用 generateSW 這麼簡單，但好處是降低易用，可以帶來更大的彈性。在 generateSW 中，injectManifest 會為您處理整個 Service Worker 的產生作業，並以您編寫的 Service Worker 做為來源，並將網址清單插入預先快取，而其餘的服務工作站則維持不變。

使用 injectManifest 時，您必須負責啟動預先快取邏輯。檢查輸入 Service Worker 時，injectManifest 會尋找特殊的 self.__WB_MANIFEST 變數，並將其替換為友善快取資訊清單。如果不存在這個變數，injectManifest 會擲回錯誤。

預先快取資訊清單中的項目清單可透過額外的設定選項調整。

並列比較

點選以下各個分頁標籤，即可比較 generateSW 和 injectManifest 方法的使用情形：

generateSW 會產生 Service Worker，因此您只需要指定設定。以下是使用 workbox-build 的範例：

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

接著即可透過指令列使用節點建構 Service Worker：

node build-sw.js

由於 injectManifest 需要來源 Service Worker，因此最小可行的範例需要來源 Service Worker 檔案。如果您只需要預先快取所有所需內容，輸入 Service Worker 看起來可能會像這樣：

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

記下 self.__WB_MANIFEST 字串。這是 Workbox 會以友善快取資訊清單取代的預留位置。以下是此用途的有效設定：

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

如果您有複雜的需求 (例如進階轉送、自訂快取策略或 generateSW 選項未涵蓋的其他事項)，則建議使用 injectManifest。

結論

比起自行管理預先快取的情況，在 Workbox 中執行預先快取會簡單許多，特別是如果套裝組合人員所編譯的版本式資產是重要考量。然而，預先快取並不是在 Service Worker 中執行的唯一方法。繼續過程中，您將學習執行階段快取等其他技術。