Workbox 相當靈活，可滿足任何專案的建構程序需求。這表示 Workbox 的使用方法有很多種，可讓您為專案選擇合適的整合方式。無論您如何與 Workbox 整合，各種工具都提供類似的 API。
generateSW對injectManifest
您將採用 Workbox 建構工具的兩種核心方法之一：generateSW 或 injectManifest。至於該採用哪一種做法，則取決於您需要的彈性。generateSW 優先考量容易使用與簡便的成本，讓您能宣告一組設定選項，並傳回功能齊全的 Service Worker。
injectManifest 能讓您享有更靈活的彈性、成本更低的成本，因為您最終會自行為服務工作站編寫程式碼，其中 injectManifest 可提供可用於 Workbox 預先快取方法使用的預先快取資訊清單。
使用「generateSW」的時機
在下列情況下，您應使用 generateSW：
- 您想針對與建構程序相關的預先快取檔案，包括網址包含您可能無法事先得知的雜湊檔案。
- 您可以透過
generateSW的選項設定簡單的執行階段快取需求。
「不」使用 generateSW 的情況
另一方面，在下列情況下，請不要使用 generateSW：
- 您想使用其他 Service Worker 功能 (例如 Web Push)。
- 您需要額外的彈性來匯入額外的指令碼，或使用特定 Workbox 模組，根據應用程式需求微調 Service Worker。
使用「injectManifest」的時機
在下列情況下，您應使用 injectManifest：
- 您想要預先快取檔案，但想要寫入自己的 Service Worker。
- 您有複雜的快取或轉送需求，無法透過
generateSW的設定選項表示 - 您想在 Service Worker 中使用其他 API (例如 Web Push)。
injectManifest 與 generateSW 不同，後者需要您指定來源 Service Worker 檔案。在這個工作流程中，來源 Service Worker 檔案需要有特殊的 self.__WB_MANIFEST 字串，以便 injectManifest 將其替換為預先快取資訊清單。
「不」使用 injectManifest 的情況
在下列情況下，不應使用 injectManifest：
- 您不想在 Service Worker 中使用預先快取功能。
- Service Worker 需求非常簡單，只要涵蓋
generateSW及其設定選項即可。 - 比起靈活性，您更重視易用性。
使用 Workbox 的建構工具
如果需要在建構過程中使用 Workbox 建立跨架構的方式，有以下三種選項：
workbox-cliworkbox-build。 指令列工具- 使用整合工具 (例如
workbox-webpack-plugin)。
這些建構工具都提供 generateSW 和 injectManifest 模式，並提供類似的選項組合。如果您不想將 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 即可為您執行 generateSW 或 injectManifest 方法。CLI 的說明文字提供更多資訊和使用範例。
workbox-build
workbox-cli 是 workbox-build 模組的包裝函式，或者直接使用 workbox-build。使用 workbox-build 時，您不必使用 workbox-config.js 檔案指定選項，而是直接在 Node 指令碼中使用 generateSW 或 injectManifest 方法，傳入類似的選項組合：
// 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 目錄。
使用套裝組合
各種套件工具都有自己的 Workbox 外掛程式，但 Workbox 團隊正式支援的整合工具是 webpack，透過 workbox-webpack-plugin。和 workbox-cli 和 workbox-build 一樣，workbox-webpack-plugin 會執行 generateSW 或 injectManifest 方法，但外掛程式會將這些方法名稱大寫為 GenerateSW 或 InjectManifest。否則，用法會與 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'
})
]
};
您傳遞至 GenerateSW 或 InjectManifest 的選項與 generateSW 或 injectManifest 不同，但有大幅重疊。具體來說，您並不需要 (也)可以為 GenerateSW 指定 globDirectory 選項，因為 webpack 已經知道生產資產的組合位置。
使用架構
在此之前介紹的重點，都聚焦於使用 Workbox，無論架構偏好為何。不過，如果 Workbox 能簡化開發工作，我們也能在特定架構中使用 Workbox。舉例來說，create-react-app 預設會隨附 Workbox 儲存空間。我們將在後續文章中介紹各種與 Workbox 整合的架構。
值得注意的是，這些 Workbox 架構專屬的整合機制可能會限制您設定 Workbox 的方式。在這種情況下，您可隨時改回使用本文討論的方法。
如果沒有建構程序，該怎麼辦？
這份文件假設您的專案有建構程序，但實際上並非。在此情況下，您仍可透過 workbox-sw 模組使用 Workbox。使用 workbox-sw 即可從 CDN 或本機載入 Workbox 執行階段，並撰寫自己的 Service Worker。
結論
Workbox 富有彈性，可確保您幾乎可以在任何專案中使用這項服務，不受架構或工具鍊偏好影響。這些途徑都可讓您使用兩種方法完成預先快取和執行階段快取，同時還能讓您視需要建立具有更多進階功能的 Service Worker。