Workbox 的使用方式

Workbox 極具彈性,可以滿足各種專案的建構程序。這表示 Workbox 的應用方式不只一種,您可以選擇適合專案的整合方式。無論您如何與 Workbox 整合,各種工具都會提供類似的 API。

generateSWinjectManifest

您將仰賴 Workbox 的建構工具有兩種核心方法:generateSWinjectManifest。請依據您需要的彈性選擇適合的不同類型。generateSW 將簡單易用、易於使用,並兼顧靈活彈性。您可以宣告一組設定選項,讓服務 Worker 發揮完整功能。

injectManifest 在使用起來更加靈活,但操作起來十分簡單,因為您最終必須自行編寫程式碼給服務工作處理程序,並使用 injectManifest 提供可供 Workbox 預先快取方法使用的預快取資訊清單。

使用「generateSW」的時機

您應在下列情況使用 generateSW

  • 您想預先快取與建構程序相關聯的檔案,包括網址含有您預先不知道的雜湊檔案。
  • 您可以透過 generateSW 的選項設定簡單的執行階段快取需求。

使用 generateSW 的時機

另一方面,如果符合以下條件,就不應使用 generateSW

  • 您想使用其他 Service Worker 功能 (例如網路推送)。
  • 您需要額外的彈性,匯入其他指令碼或使用特定的 Workbox 模組,以微調服務工作站,滿足應用程式的需求。

使用「injectManifest」的時機

您應在下列情況使用 injectManifest

  • 您想要友善快取檔案,但想要自行編寫 Service Worker。
  • 您有複雜的快取或轉送需求,但無法透過 generateSW 的設定選項表示
  • 您想要在服務工作處理程序中使用其他 API (例如 Web Push)。

injectManifestgenerateSW 的差異在於,您必須指定來源 Service Worker 檔案。在這個工作流程中,來源 Service Worker 檔案必須具備特殊的 self.__WB_MANIFEST 字串,讓 injectManifest 可以將其替換為友善快取資訊清單

使用 injectManifest 的時機

若是以下情況,您不應使用 injectManifest

  • 您不想在 Service Worker 中使用預先快取功能。
  • 我們的 Service Worker 需求簡單明瞭,可受到 generateSW 及其設定選項的影響。
  • 您重視易用性,而非彈性。

使用 Workbox 的建構工具

如果您想尋找在建構過程中使用 Workbox 且不受架構影響的方式,有三種選項可供選擇:

  1. workbox-cli
  2. workbox-build:指令列工具。
  3. 使用 Bundler (例如 workbox-webpack-plugin)。

上述每個建構工具都會提供 generateSWinjectManifest 模式,且提供一組類似的選項。如果您不想將由 Workbox 驅動的 Service Worker 連結至特定架構,這些都是不錯的選擇。以下我們將簡單介紹各個選項,協助您瞭解這些選項。

workbox-cli

如果您想尋找使用 Workbox 最低可能的障礙,CLI 適合:

npm install workbox-cli --save-dev

如要開始使用 CLI,請以 npx workbox wizard 執行精靈。精靈會詢問幾個問題,這些問題的答案會用於設定專案,並可讓您依據自身需求自訂 workbox-config.js 檔案。如下所示:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

建立設定檔後,CLI 即可為您執行 generateSWinjectManifest 方法。CLI 的說明文字含有更多資訊和使用範例。

workbox-build

workbox-cliworkbox-build 模組的包裝函式,替代方法則是直接使用 workbox-build。使用 workbox-build 時,您不用使用 workbox-config.js 檔案指定選項,而是直接使用 generateSWinjectManifest 方法做為 Node 指令碼的一部分,並傳入一組類似的選項:

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

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

在上述範例中,執行 node build-sw.mjs 指令時,workbox-build 會將產生的 Service Worker 寫入 dist 目錄。

使用 Bundler

不同的套裝組合程式都有自己的 Workbox 外掛程式,但 Workbox 團隊正式支援的 Bundler 是透過 workbox-webpack-plugin 使用。和 workbox-cliworkbox-build 一樣,workbox-webpack-plugin 將執行 generateSWinjectManifest 方法,但外掛程式會將這些方法名稱大寫 GenerateSWInjectManifest。否則,系統會採用與 workbox-build 類似的使用方式:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

您傳遞至 GenerateSWInjectManifest 的選項與 generateSWinjectManifest 不同,但有顯著重疊之處。具體來說,您無需 (也「可以」) 為 GenerateSW 指定 globDirectory 選項,因為 webpack 知道您的正式版資產已組合至何處。

使用架構

以上說明的重點皆著重於使用 Workbox,不受何種架構偏好影響。不過,如果 Workbox 能簡化開發程序,也可以在特定架構中使用 Workbox。例如,create-react-app 預設會隨附 Workbox 隨附。有關 Workbox 的各種架構整合,稍後會在後續文章中說明

值得注意的是,這些 Workbox 特定架構整合可能會限制您以偏好的方式設定 Workbox。在這些情況下,您可以隨時改回使用本文討論的方法。

如果我沒有建構程序,該怎麼辦?

本文件假設您的專案有建構程序,但您的專案實際上可能不一定。如果符合自己的情況,您仍可透過 workbox-sw 模組使用 Workbox。透過 workbox-sw,您可以從 CDN 或本機載入 Workbox 執行階段,並建立自己的 Service Worker。

結論

Workbox 具有彈性,能確保您可以在任何專案中使用這項工具,無論其架構或工具鍊偏好為何。這些途徑可讓您透過幾種方法完成預先快取和執行階段快取,也能在需要時享有更大的彈性,以建構服務工作人員時更加靈活。