使用 Workbox 預先快取

在 Service Worker 中，「預先快取」是最常執行的之一，而 Workbox 可讓管理員靈活地完成這項重要工作，而無論您選擇的 Workbox 建構工具為何。在本指南中，您將學習如何使用 generateSW 和 injectManifest 預先快取資產，以及哪些方法可能最適合您的專案。

使用 generateSW 預先快取

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

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

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

使用 injectManifest 預先快取

使用 injectManifest 比使用 generateSW 更簡單，但是為了提供便利性更佳的選擇。其中 generateSW 會為您處理整個 Service Worker 產生的作業，injectManifest 則使用您編寫的 Service Worker 做為來源，並插入要預先快取的網址清單，同時將其餘的 Service Worker 維持不變。

使用 injectManifest 時，請負責接線預先快取邏輯。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'
  ]
});

接著，您就可以使用 Node，透過指令列建構 Service Worker：

node build-sw.js

由於 injectManifest 需要來源 Service Worker，因此基本可行的範例需要來源 Service Worker 檔案。如果您只需要預先快取，輸入的服務 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 中預先快取，比自行管理預先快取更為簡單，尤其是在會擔心由套裝組合器編譯的版本資產時。不過，在服務工作站中，您可能會只進行預先快取。接著，您將瞭解其他技巧，例如執行階段快取。