使用 Service Worker Static 轉送 API，針對特定路徑略過 Service Worker

Rachel Andrew

從 Chrome 123 開始，Service Worker Static Routing API。這個 API 可讓您宣告如何擷取特定資源路徑，也就是說，瀏覽器不需要僅執行 Service Worker，即可從快取擷取回應，也可以直接從網路擷取回應。這個 API 自 Chrome 116 版起開始試用，本文將詳細說明此 API 在 Chrome 123 中推出的 API。

使用 API

如要在 Service Worker install 事件上使用 API 呼叫 event.addRoutes，傳送含有下列屬性的路徑清單給此方法：

condition

指定套用規則的時機。接受下列屬性：

• urlPattern：URLPattern 執行個體，或代表有效 URLPattern 的字串，可傳遞至 URLPattern 建構函式。
• requestMethod：包含要求方法的字串。
• requestMode：包含要求模式的字串。
• requestDestination：包含要求目的地的字串。
• runningStatus：字串，"running" 或 "not-running"。這代表 Service Worker 的執行狀態。

source

指定載入與 condition 相符的資源的方式。下列任一字串：

• "network"
• "cache"
• "fetch-event"
• "race-network-and-fetch-handler"

在以下範例中，如果服務工作站正在執行，會將開頭為「/articles」的網址轉送至 Service Worker。如果有多個條件 (例如 urlPattern 和 runningStatus)，系統必須符合所有條件，才能使用路線。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {

          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

在以下範例中，表單的貼文會直接傳送至網路並略過 Service Worker。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/form/*",
          requestMethod: "post"
    },
    source: "network"
  });
});

在以下範例中，系統會使用名為 "pictures" 的快取儲存空間來擷取副檔名為 .png 或 .jpg 的檔案。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
      or: [
        {urlPattern: "*.png"},
        {urlPattern: "*.jpg"}
      ]
    },
    source: {
      cacheName: "pictures"
    }
  });
});

來源試用的變更

原始來源試用使用 InstallEvent.registerRouter() 而不是 InstallEvent.addRoutes()，因此 registerRouter() 方法只能呼叫一次。根據來源試用的社群意見回饋，做出了這項調整。

這個 API 也利用 Chrome 121 中導入的 URLPattern 變更，新增指定要求方法、模式和目的地的功能，並新增其他來源選項。

支援 Chrome 開發人員工具

已註冊的路由器規則會顯示在「Application」面板的「Service Worker」分頁中。

如果要求與註冊的規則相符，在「網路」面板中的「大小」欄中就會顯示。當指標懸停在「尺寸」欄上時，就會顯示註冊的路由器 ID。對應的規則會顯示在應用程式分頁中。