疑難排解與記錄

對 Service Worker 無法進行偵錯。您正在處理的生命週期、更新、快取,以及這些項目之間的互動。幸好,Workbox 讓 Service Worker 的開發作業變得更簡單,有了豐富的記錄功能,也能讓偵錯作業更輕鬆。本頁面將介紹一些可用的偵錯工具,並說明 Workbox 記錄的運作方式與設定方式。

可用的疑難排解工具

在開發 Service Worker 時,瀏覽器中有許多用於偵錯和疑難排解的工具。以下資源可協助您開始使用偏好的瀏覽器。

Chrome 和 Edge

Chrome (以及以 Blink 引擎為基礎的最新版 Edge) 擁有一組強大的開發人員工具。我們先前在這份說明文件中特別介紹過其中部分工具 (尤其是 Chrome 開發人員工具),但更多值得探索的是:

Firefox

Firefox 使用者可以參考下列資源:

Safari

Safari 目前僅提供一組較少的開發人員工具,可用於偵錯服務工作人員。建議您透過下列資源進一步瞭解這些內容:

Workbox 記錄

Workbox 提供豐富資訊的記錄,是開發人員的重要體驗。記錄功能啟用後,Workbox 會透過獨特且功能的方式記錄幾乎所有活動。

Workbox 在 Chrome 開發人員工具控制台中記錄訊息的螢幕截圖。記錄訊息與一般的控制台記錄有所區別,具有 Workbox 標記。每則訊息皆可展開,以取得進一步偵錯資訊。

Workbox 的開發版本預設會開啟記錄功能,而實際工作環境版本則預設為關閉。在開發和正式版本之間切換,請依照建立,或透過 workbox-sw 使用預先組合的副本採取不同步驟。

不論有沒有搭售箱

Bundler 是一種工具,可從個別模組擷取程式碼,並建立可在瀏覽器中執行的 JavaScript 輸出內容。使用 bundler 時,您也可以利用 bundler 專用的 Workbox 外掛程式 (例如 workbox-webpack-plugin) 進行預先快取,也可以單純組合 Workbox 執行階段快取邏輯。無論是哪一種方式,您都可以在 Bundler 的設定中設定實際工作環境模式,藉此影響 Workbox 的記錄:

  • 在 webpack 中,mode 設定選項可設為 'production''development'。根據這個值,workbox-webpack-plugin 會在 Workbox 中使用實際工作環境或開發記錄。
  • 針對 Rollup,rollup-plugin-workbox 接受 mode 設定選項,該選項也會影響 Workbox 是否要將任何內容記錄至控制台。如果您使用的 Rollup 沒有 Workbox 專屬外掛程式,就必須設定 @rollup/plugin-replace,以 'development''production' 替代 process.env.NODE_ENV

假設在開發過程中必須覆寫預設的記錄行為。在這種情況下,適合您的 Bundler 專用 Workbox 外掛程式,應該可讓您在設定中對偵錯紀錄進行硬式編碼。舉例來說,您可以透過 GenerateSW 方法透過 workbox-webpack-pluginmode 選項,在 Workbox 中停用記錄功能。

不搭售箱

雖然整合工具很方便,但並非每個專案都需要搭配運用。有時候,如果您想將 Workbox 新增至未使用 bundler 的專案,不妨參考 workbox-sw

workbox-sw 模組可簡化載入其他 Workbox 模組 (例如workbox-routingworkbox-precaching 等) 從 CDN。是否載入開發版或正式版套件,取決於用於存取網頁應用程式的網址。根據預設,如果網頁應用程式是在 http://localhost 上執行,則 workbox-sw 會載入 Workbox 的開發版本,在其他時間則載入正式版套件。

如要覆寫預設行為,您可以呼叫 Workbox 的 setConfig 方法,將 debug 選項設為 true

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

關閉任何工作流程中開發版本的記錄功能

無論您是否使用 bundler,都可以將 true 指派給特殊的 self.__WB_DISABLE_DEV_LOGS 變數至 Service Worker,藉此關閉開發版本中的所有記錄:

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

這種做法的好處,在於完全不必依賴整合器設定,而且無論您是直接使用 workbox-sw,還是仰賴 bundler 來為您封裝 Workbox 技術的 Service Worker,皆可正常運作。

其他資訊

如果還是難以找出發生錯誤的服務工作處理程序,但記錄功能已無法滿足這個需求,請前往帶有 workbox 標記的 Stack Overflow 提問。如果在這裡找不到答案,請回報 GitHub 問題 (請先詳閱提供指南)。這麼做不僅能讓大量開發人員閱讀及回答問題,還能在日後遇到相同情況時,參考您的回答內容。