Service Worker Static Route API 源试用

布兰登·肯尼
Brendan Kenny

Service Worker 是一款功能强大的工具,可让网站离线工作并为自身创建专门的缓存规则。Service Worker fetch 处理程序会查看来自其控制的页面的每个请求,并决定是否要从 Service Worker 缓存传送响应,甚至重写网址以完全获取不同的响应(例如,根据本地用户偏好设置)。

但是,如果在一段时间内首次加载页面且当前未运行控制的 Service Worker 时,可能会给 Service Worker 带来性能成本。由于所有提取都需要通过 Service Worker 进行,因此浏览器必须等待 Service Worker 启动并运行,才能知道要加载什么内容。对于使用 Service Worker 通过缓存策略提高性能的开发者来说,这种启动成本可能很小,但非常可观。

Navigation 预加载是一种解决此问题的方法,它允许在 Service Worker 启动的同时通过网络发出导航请求,但它仅限于初始导航请求,并且仍然包含 Service Worker 包含在关键路径中。自导航预加载推出以来,我们付出了很多努力来针对问题空间开发更通用的解决方案,包括采用方法来让某些请求在 Service Worker 启动时不被阻止。

Service Worker Static Route API

从 Chrome 116 开始,实验性 Service Worker Static Routing API 可用于测试此类解决方案的第一步。Service Worker 安装后,可以使用 Service Worker Static Route API 以声明方式说明应如何提取某些资源路径。

在 API 的初始版本中,可将路径声明为始终从网络(而不是 Service Worker)传送。如果稍后加载受控网址,浏览器便可以在 Service Worker 启动完毕之前,开始从这些路径中提取资源。这将从已知不需要 Service Worker 的路径中移除 Service Worker。

为了使用该 API,Service Worker 通过一组规则对 install 事件调用 event.registerRouter

self.addEventListener('install', event => {
  if (event.registerRouter) {
    // Go straight to the network and bypass invoking "fetch" handlers for all
    // same-origin URLs that start with '/form/'.
    event.registerRouter([{
      condition: {
        urlPattern: {pathname: '/form/*'},
      },
      source: 'network',
    }]);
  }
});

每条规则通常都有以下两个属性:

  • condition:指定何时使用 网址 Pattern API 应用规则以匹配资源路径。该属性可以接受 URLPattern 实例,或可接受传入 URLPattern 构造函数的等效普通对象(例如,new URLPattern({pathname: '*.jpg'}) 或仅 {pathname: '*.jpg'})。

    网址格式的灵活性意味着,规则可以将像路径下任何资源这样简单的内容与非常具体而详细的条件进行匹配。这些模式通常应该为热门路由库的用户所熟悉。

  • source:指定如何加载与 condition 匹配的资源。目前,仅支持 'network' 值(绕过 Service Worker 以直接通过网络加载资源),但我们计划在未来将其扩展为其他值

用例

如上所述,API 的初始版本实质上是某些路径的 Service Worker 控制的逃生门。其使用方式取决于您使用 Service Worker 的方式以及用户遍历网站的方式。

例如,如果您的网站使用缓存优先策略(回退到网络),但某些内容很少被访问,以至于这些内容在缓存中几乎没有任何价值(例如归档内容或 RSS Feed)。只能在 Service Worker 中设置这些路径以从网络提取的限制,但 Service Worker 仍然必须启动并运行才能决定如何处理这些请求。

相比之下,静态路由 API 则使用一些声明性代码行完全绕过 Service Worker:

self.addEventListener('install', event => {
  if (event.registerRouter) {
    event.registerRouter([{
      condition: {
        urlPattern: {pathname: '/feeds/*.xml'},
      },
      source: 'network',
    }, {
      condition: {
        urlPattern: {pathname: '/archives/*'},
      },
      source: 'network',
    }]);
  }
});

随着 Service Worker Static Route API 不断发展,我们计划使这种配置变得更加灵活并支持更多场景,例如以声明方式对网络提取进行争用,以及 Service Worker 启动。如需了解详情,请参阅规范解释器探索该 API 的潜在“最终形式”

试用 Service Worker Static Routing API

从版本 116 开始,Chrome 中会借助源试用功能使用 Service Worker Static Sessions API,该 API 可让开发者在其网站上邀请真实用户测试该 API 以衡量效果。如需了解源试用的背景信息,请参阅“源试用入门”

对于本地测试,可以使用 chrome://flags/#service-worker-static-router 中的标志启用 Service Worker Static Route API,也可以通过使用 --enable-features=ServiceWorkerStaticRouter 等命令运行 Chrome 来启用。

反馈和后续路线

Service Worker Static Route API 目前正在积极开发中,仍在设计中。如果该功能对您有用,请通过源试用进行试用,并提供有关 API、实现和可用功能的反馈