使用 Service Worker Static Routing API 为特定路径绕过 Service Worker

Rachel Andrew

从 Chrome 123 开始，可使用 Service Worker Static Routing API。此 API 可让您以声明方式声明应如何提取某些资源路径，这意味着浏览器无需仅为了从缓存或直接从网络提取响应而运行 Service Worker。从 Chrome 116 开始，此 API 就已处于源试用阶段。这篇博文详细介绍了在 Chrome 123 中发布的 API。

使用 API

要使用 API，请对 Service Worker install 事件调用 event.addRoutes。向此方法传递具有以下属性的路由列表：

condition
指定何时应用规则。接受以下属性：
  • 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 标签页中。

“应用”面板中突出显示的路由器规则。

在 Network 面板中，如果请求与已注册的规则匹配，则尺寸列中会指明这一点。将指针悬停在大小列上时，系统会显示已注册的路由器 ID。相应的规则会显示在“应用”标签页中。

“网络”面板中显示的路由器 ID。