工作箱 SW

workbox-sw 模組提供非常簡便的方式即可啟動及執行 可以簡化 Workbox 模組的載入程序， 提供了幾種簡單的輔助方法

您可以透過我們的 CDN 使用 workbox-sw，也可以將其與一組 Workbox 檔案搭配使用 導入自己的資料庫

透過 CDN 使用 Workbox SW

如要開始使用這個模組，最簡單的方式就是透過 CDN。您只需要 將下列指令新增到 Service Worker：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

這樣您就在 Service Worker 中會有 workbox 命名空間 提供所有 Workbox 模組的存取權。

workbox.precaching.*
workbox.routing.*
etc

您開始使用其他模組後，系統會產生一些神奇的發揮效果。

首次參照模組時，workbox-sw 會偵測出這點 並在提供模組前載入您可以在 工具中的「網路」分頁

開發人員工具中的 Workbox 程式庫載入

你的瀏覽器會快取這些檔案，方便日後使用 離線使用。

使用本機 Workbox 檔案 (而非 CDN)

如果不想使用 CDN，只要輕鬆改用 Workbox 檔案即可 託管在您自己的網域中

最簡單的方法是透過 workbox-cli 的 copyLibraries 指令取得檔案，然後 workbox-sw 可透過 modulePathPrefix 設定選項找到這些檔案。

如果將檔案放入 /third_party/workbox-vX.Y.Z/ 底下，則應使用如下所示：

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});

避免非同步匯入

實際上，首次載入新模組時，需要呼叫 importScripts()敬上 並附上對應 JavaScript 檔案的路徑 (可能由 CDN 代管或透過本機網址代管)。 無論是哪一種情況，您都會套用一項重要限制：對 importScripts() 的隱含呼叫只能 是在 Service Worker 的 install 處理常式內進行「或」同步期間 Service Worker 指令碼的「初始執行」。

為避免違反這項限制，建議參照多種 任何事件處理常式或非同步函式以外的 workbox.* 命名空間。

舉例來說，可以使用下列頂層 Service Worker 程式碼：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will work!
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst()
);

不過，如果您在workbox.strategies Service Worker：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
    // outside of the initial, synchronous service worker execution.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

如果您需要撰寫的程式碼會違反此限制，您可以明確 使用importScripts() workbox.loadModule() 方法：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Referencing workbox.strategies will now work as expected.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

另外，您也可以在事件處理常式外建立相關命名空間的參照， 然後，之後再使用該參照用於：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Using the previously-initialized strategies will work as expected.
    const cacheFirst = new strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});
敬上

強制使用偵錯版本或正式環境

Workbox 模組中的所有版本都含有兩個版本，分別是偵錯版本 包含記錄和其他類型檢查，以及實際工作環境版本 會移除記錄和類型檢查

根據預設，workbox-sw 會使用偵錯版本，針對 localhost 上的網站使用偵錯版本。 但對於任何其他來源而言，則會使用正式版本

如要強制執行偵錯版本或正式版版本，您可以設定 debug 設定 選項：

workbox.setConfig({
  debug: true,
});

使用匯入陳述式轉換程式碼，以使用 workbox-sw

使用 workbox-sw 載入 Workbox 時，可透過以下方式存取所有 Workbox 套件： 全域 workbox.* 命名空間

如有想轉換的 import 陳述式的程式碼範例 使用 workbox-sw 時，您只需要載入 workbox-sw，並將所有 import 陳述式替換為參照的本機變數 全域命名空間中的這些模組

可正常運作的原因是，發布至 npm 的所有 Workbox 服務工作站套件也一樣 取得於全域 workbox 命名空間 名稱的 camelCase 版本 (例如 如要取得從 workbox-precaching npm 套件匯出的所有模組，請前往 workbox.precaching.*。從 Vertex AI Pipelines 匯出的所有模組 您可以在以下位置找到 workbox-background-sync npm 套件： workbox.backgroundSync.*)。

舉例來說，以下程式碼使用 import 陳述式參照 Workbox 模組：

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);

以下為使用 workbox-sw 重寫的相同程式碼 (請注意，只有 匯入陳述式已變更 - 邏輯尚未改變)：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);