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

Rachel Andrew

从 Chrome 123 开始，Service Worker 静态路由 API 可供使用。借助此 API，您可以声明式地指定应如何提取特定资源路径，这意味着浏览器无需运行服务工作线程即可从缓存或直接从网络中提取响应。此 API 自 Chrome 116 起便已处于源试用阶段，而本文详细介绍了在 Chrome 123 中推出的该 API。

使用 API

如需使用该 API，请在服务工作线程 install 事件中调用 event.addRoutes。向此方法传递一个包含以下属性的路线列表：

condition

指定规则的应用时间。接受以下属性：

urlPattern：一个 URLPattern 实例，或一个表示有效网址Pattern 的字符串，可传递给 URLPattern 构造函数。
requestMethod：包含请求方法的字符串。
requestMode：包含请求模式的字符串。
requestDestination：包含请求目的地的字符串。
runningStatus：一个字符串，可以是 "running" 或 "not-running"。这表示服务工作线程的运行状态。

source

指定如何加载与 condition 匹配的资源。以下字符串之一：

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

在以下示例中，如果以“/articles”开头的网址对应的 Service Worker 当前正在运行，则这些网址会路由到该 Service Worker。如果存在多个条件（例如 urlPattern 和 runningStatus），则必须满足所有条件才能使用相应路线。

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

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

在以下示例中，表单的 POST 请求直接发送到网络，并绕过服务工作线程。

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 开发者工具中的支持

注册的路由器规则显示在应用面板的 Service Worker 标签页中。

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

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

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