Workbox 指令列介面 (包含在
workbox-cli
套件) 包含稱為 Workbox 的 Node.js 程式,
可以在 Windows、macOS、與 UNIX 相容的指令列中執行
環境。實際上,workbox-cli 會納入 workbox-build 模組
並可輕鬆將 Workbox 整合至指令列建構作業
並彈性設定
安裝 CLI
如要安裝具有節點的 CLI,請在終端機中執行下列指令:
npm install workbox-cli --global
CLI 模式
CLI 提供四種不同的模式:
wizard
:為專案設定 Workbox 的逐步指南。generateSW
:為您產生完整的 Service Worker。injectManifest
:插入資產以預先快取至專案。copyLibraries
:將 Workbox 程式庫複製到目錄。
wizard
Workbox 精靈會詢問一系列有關本機目錄的問題
以及要友善載入哪些檔案。我們會將您的答案用於以下用途
來產生設定檔,在
generateSW
模式。
大多數開發人員只需要執行 Workbox 精靈一次,而且可以免費使用 手動自訂產生的初始設定檔 即可使用任一支援的建構設定選項
如要開始精靈:
npx workbox-cli wizard
generateSW
您可以使用 Workbox CLI 來產生完整的 Service Worker,方法如下: 設定檔 (例如精靈產生的檔案)
執行下列指令:
npx workbox-cli generateSW path/to/config.js
開發人員對 Workbox 內建的預先快取和執行階段快取功能感到滿意
無需自訂服務工作處理程序的行為
建議使用 generateSW
模式。
使用「generateSW
」的時機
- 你想要友善快取檔案。
- 您只有簡單的執行階段快取需求。
「不」使用 generateSW
的情況
- 您想要使用其他 Service Worker 功能 (例如 Web Push)。
- 您想匯入其他指令碼,或為自訂快取策略新增其他邏輯。
injectManifest
適合想進一步控管最終 Service Worker 檔案的開發人員
可以使用 injectManifest
模式。這個模式假設您
現有 Service Worker 檔案 (在 config.js 指定的位置)。
執行 workbox injectManifest
時,系統會尋找特定字串
(預設為 precacheAndRoute(self.__WB_MANIFEST)
)
Service Worker 檔案。這會將空白陣列替換為
預先快取及寫入 Service Worker 檔案的網址
目的地位置 (根據 config.js
的設定選項)。
來源 Service Worker 中的其餘程式碼維持不變。
您可以在這個模式下使用 Workbox,如下所示:
npx workbox-cli injectManifest path/to/config.js
使用「injectManifest
」的時機
- 您想要進一步控管 Service Worker。
- 你想要友善快取檔案。
- 您必須自訂轉送和策略。
- 您想搭配使用 Service Worker 與其他平台功能 (例如 Web Push)。
「不」使用 injectManifest
的情況
- 您想要以最輕鬆的方式在網站中新增 Service Worker。
copyLibraries
如要使用 injectManifest
,這個模式會很實用,
改用由自己來源代管的 Workbox 程式庫檔案
使用 CDN
只需要使用檔案寫入路徑即可:
npx workbox-cli copyLibraries third_party/workbox/
建構程序整合
為什麼 Workbox 必須整合我的建構程序?
Workbox 專案包含許多程式庫,可共同合作 強化網頁應用程式的 service Worker。為了 必須整合 Workbox 和 以及網頁應用程式的建構程序這樣可以確保 Service Worker 以高效率的方式預先快取所有網頁應用程式的重要內容 內容。
「workbox-cli
」是我的建構程序的正確選擇嗎?
如果現有的建構程序完全以
npm 指令碼、
workbox-cli
會是不錯的選擇
您目前使用 webpack 做為建構項目 然後使用 workbox-webback-plugin 的 有更好的選擇
如果您目前使用 Gulp, Grunt 或其他以 Node.js 為基礎的建構工具。 接著將 workbox-build 整合至建構指令碼 有更好的選擇
如果您完全沒有建構程序,您應該想出一個 ,再使用 Workbox 預先快取任何資產。而立人生 記得手動執行 workbox-cli 可能很容易出錯,而且會忘記手動執行 執行測試,可能導致回訪者看到過時的內容。
安裝和設定
安裝 workbox-cli
做為開發版本後
您可以為本機專案新增對 workbox
的呼叫。
現有建構程序的 npm 指令碼結尾:
從 package.json:
{
"scripts": {
"build": "my-build-script && workbox <mode> <path/to/config.js>"
}
}
將 <mode>
替換為 generateSW
或 injectManifest
(取決於
然後將 <path/to/config.js>
設為
您的設定選項您的設定可能已建立
自動由 workbox wizard
自動調整或手動調整。
設定
「generateSW
」使用的選項
您可以在參考說明文件找到完整的設定選項。
「injectManifest
」使用的選項
您可以在參考說明文件找到完整的設定選項。