workbox-cli

Workbox 指令列介面 (包含在 workbox-cli 套件中) 包含名為 Workbox 的 Node.js 程式,這個程式可在與 UNIX 相容的指令列環境中的 Windows、macOS 執行。基本上,workbox-cli 會納入 Workbox-build 模組,並可讓您輕鬆地將 Workbox 整合到指令列建構程序,並享有彈性的設定。

安裝 CLI

如要透過 Node 安裝 CLI,請在終端機中執行下列指令:

npm install workbox-cli --global

CLI 模式

CLI 有四種不同的模式:

  • wizard:為專案設定 Workbox 的逐步指南。
  • generateSW:產生完整的 Service Worker。
  • injectManifest:插入要預先快取至專案的資產。
  • copyLibraries:將 Workbox 程式庫複製到目錄。

wizard

Workbox 精靈會詢問一系列有關本機目錄設定的問題,以及您要預先快取的檔案。您的答案會用來產生設定檔,在 generateSW 模式下執行時即可使用。

大多數開發人員只需執行 Workbox 精靈一次,則可以使用任何支援的建構設定選項,手動自訂產生的初始設定檔。

如要啟動精靈:

npx workbox-cli wizard

Workbox CLI 精靈的螢幕截圖

generateSW

您可以使用 Workbox CLI 使用設定檔 (例如精靈產生的檔案) 產生完整的 Service Worker。

請執行下列指令:

npx workbox-cli generateSW path/to/config.js

如果開發人員對 Workbox 內建的預先快取和執行階段快取功能感到滿意,且不需自訂服務工作站的行為,建議使用 generateSW 模式。

使用「generateSW」的時機

  • 您想要友善載入檔案。
  • 您有簡單的執行階段快取需求。

「不」使用 generateSW 的時機

  • 您想要使用其他 Service Worker 功能 (例如網路推播)。
  • 您想要匯入其他指令碼,或新增自訂快取策略的其他邏輯。

injectManifest

如果開發人員想進一步控管最終的 Service Worker 檔案,可以使用 injectManifest 模式。此模式假設您已有 Service Worker 檔案 (在 config.js 中指定的位置)。

workbox injectManifest 執行時,會在來源服務工作站檔案中尋找特定字串 (預設為 precacheAndRoute(self.__WB_MANIFEST))。它會根據 config.js 中的設定選項,以要預先快取的網址清單取代空白陣列,並將 Service Worker 檔案寫入其目的地位置。來源 Service Worker 中的其餘程式碼則維持不變。

在這個模式下,您可以使用 Workbox,如下所示:

npx workbox-cli injectManifest path/to/config.js

使用「injectManifest」的時機

  • 您想要進一步控管 Service Worker。
  • 您想要友善載入檔案。
  • 您必須自訂轉送機制和策略。
  • 您想搭配使用服務工作處理程序與其他平台功能 (例如網路推播)。

「不」使用 injectManifest 的時機

  • 您希望以最簡單的方式在網站中新增 Service Worker。

copyLibraries

如果如果您想使用 injectManifest,並希望使用由自有來源代管的 Workbox 程式庫檔案,而非使用 CDN,那麼這個模式就非常實用。

只需要使用路徑執行該檔案,即可寫入以下檔案:

npx workbox-cli copyLibraries third_party/workbox/

建構程序整合

為什麼 Workbox 需要與我的建構程序整合?

Workbox 專案包含多個程式庫,可共同合作,為網頁應用程式的服務工作站提供強大效能。為了有效使用這些程式庫,Workbox 需要整合至網頁應用程式的建構程序。如此可確保服務工作站能夠有效率地預先快取網頁應用程式的所有重要內容,並隨時更新這些內容。

workbox-cli 是我的建構程序的正確選擇嗎?

如果您的現有建構程序完全以 npm 指令碼為基礎,workbox-cli 會是不錯的選擇。

如果您目前使用 webpack 做為建構工具,最好使用 workbox-webback-plugin

如果您目前使用的是 GulpGrunt 或其他以 Node.js 為基礎的建構工具,請將 workbox-build 整合至建構指令碼。

如果您完全沒有建構程序,應該在使用 Workbox 預先快取任何資產之前就做好建構程序。試圖記得手動執行 Workbox-cli 可能會容易出錯,且忘記執行時,還可能導致回訪的訪客看到過時的內容。

安裝和設定

workbox-cli 安裝做為本機專案的開發依附元件後,您可以在現有建構程序的 npm 指令碼結尾新增 workbox 的呼叫:

使用 package.json:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

請將 <mode> 替換為 generateSWinjectManifest (視用途而定),並將 <path/to/config.js> 替換為設定選項的路徑。您的設定可能是由 workbox wizard 自動建立或手動調整。

設定

generateSW」使用的選項

您可以在參考說明文件中找到完整的設定選項。

injectManifest」使用的選項

您可以在參考說明文件中找到完整的設定選項。