Workbox 極具彈性,可以滿足各種專案的建構程序。這表示 Workbox 的應用方式不只一種,您可以選擇適合專案的整合方式。無論您如何與 Workbox 整合,各種工具都會提供類似的 API。
generateSW
對injectManifest
您將仰賴 Workbox 的建構工具有兩種核心方法:generateSW
或 injectManifest
。請依據您需要的彈性選擇適合的不同類型。generateSW
將簡單易用、易於使用,並兼顧靈活彈性。您可以宣告一組設定選項,讓服務 Worker 發揮完整功能。
injectManifest
在使用起來更加靈活,但操作起來十分簡單,因為您最終必須自行編寫程式碼給服務工作處理程序,並使用 injectManifest
提供可供 Workbox 預先快取方法使用的預快取資訊清單。
使用「generateSW
」的時機
您應在下列情況使用 generateSW
:
- 您想預先快取與建構程序相關聯的檔案,包括網址含有您預先不知道的雜湊檔案。
- 您可以透過
generateSW
的選項設定簡單的執行階段快取需求。
不使用 generateSW
的時機
另一方面,如果符合以下條件,就不應使用 generateSW
:
- 您想使用其他 Service Worker 功能 (例如網路推送)。
- 您需要額外的彈性,匯入其他指令碼或使用特定的 Workbox 模組,以微調服務工作站,滿足應用程式的需求。
使用「injectManifest
」的時機
您應在下列情況使用 injectManifest
:
- 您想要友善快取檔案,但想要自行編寫 Service Worker。
- 您有複雜的快取或轉送需求,但無法透過
generateSW
的設定選項表示 - 您想要在服務工作處理程序中使用其他 API (例如 Web Push)。
injectManifest
與 generateSW
的差異在於,您必須指定來源 Service Worker 檔案。在這個工作流程中,來源 Service Worker 檔案必須具備特殊的 self.__WB_MANIFEST
字串,讓 injectManifest
可以將其替換為友善快取資訊清單。
不使用 injectManifest
的時機
若是以下情況,您不應使用 injectManifest
:
- 您不想在 Service Worker 中使用預先快取功能。
- 我們的 Service Worker 需求簡單明瞭,可受到
generateSW
及其設定選項的影響。 - 您重視易用性,而非彈性。
使用 Workbox 的建構工具
如果您想尋找在建構過程中使用 Workbox 且不受架構影響的方式,有三種選項可供選擇:
workbox-cli
workbox-build
:指令列工具。- 使用 Bundler (例如
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
檔案指定選項,而是直接使用 generateSW
或 injectManifest
方法做為 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-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 具有彈性,能確保您可以在任何專案中使用這項工具,無論其架構或工具鍊偏好為何。這些途徑可讓您透過幾種方法完成預先快取和執行階段快取,也能在需要時享有更大的彈性,以建構服務工作人員時更加靈活。