InstallEvent: addRoutes() 方法

routerRules

一个对象或一个或多个对象的数组，表示某些资源应如何获取的规则。每个 routerRules 对象包含以下属性

condition

一个对象，定义一个或多个条件，指定哪些资源应该匹配此规则。可以包含以下属性；如果使用多个属性，则资源必须满足所有指定的条件才能匹配规则。

not 可选

一个 condition 对象，定义必须明确不满足才能匹配规则的条件。在 not 条件内定义的条件与其他条件互斥。

or 可选

一个 condition 对象数组。必须满足这些定义的条件之一才能匹配规则。在 or 条件内定义的条件与其他条件互斥。

requestMethod 可选

一个字符串，表示请求应发送的 HTTP 方法，才能匹配规则，例如 "get"、"put" 或 "head"。

requestMode 可选

一个字符串，表示请求应具有的 模式，才能匹配规则，例如 "same-origin"、"no-cors" 或 "cors"。

requestDestination 可选

一个字符串，表示请求的 目标，即应请求的内容类型，才能匹配规则。示例包括 "audio"、"document"、"script" 和 "worker"。

runningStatus 可选

一个枚举值，表示请求匹配规则所需的 service worker 的运行状态。值可以是 "running" 或 "not-running"。

urlPattern 可选

一个 URLPattern 实例，或一个 URLPattern() 构造函数 input 模式，表示匹配规则的 URL。

source

一个枚举值或一个对象，指定将从中加载匹配资源的来源。可能的枚举值为

"cache"

资源将从浏览器 Cache 中加载。

"fetch-event"

资源将通过 service worker 的 fetch 事件处理程序加载。这可以与 "runningStatus" 条件结合使用，如果 service worker 正在运行，则从 service worker 加载资源，如果 service worker 未运行，则回退到网络上的静态路由。

"network"

资源将从网络加载。

"race-network-and-fetch-handler"

同时尝试从网络和 service worker 的 fetch 事件处理程序加载资源。先完成的那个将被使用。

source 值也可以设置为一个对象，其中包含一个属性 cacheName，其值为一个字符串，表示浏览器 Cache 的名称。如果存在，匹配的资源将从此特定命名的缓存中加载。

一个 Promise，它以 undefined 作为结果完成。

TypeError DOMException

如果 routerRules 内的一个或多个规则对象无效，或者当关联的 service worker 没有 fetch 事件处理程序时其 source 值为 "fetch-event"，则抛出此异常。如果您尝试将 or 与其他条件类型组合，也会抛出此异常。

在以下示例中，如果 service worker 当前未运行，则以 /articles 开头的 URL 将路由到网络

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      urlPattern: "/articles/*",
      runningStatus: "not-running",
    },
    source: "network",
  });
});

在以下示例中，POST 请求将直接发送到网络，并绕过 service worker

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

在以下示例中，名为 "pictures" 的浏览器 Cache 用于获取扩展名为 .png 或 .jpg 的文件

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

您不能将 or 与其他条件组合 - 这会导致 TypeError。例如，如果您想匹配扩展名为 .png 或 .jpg 的文件，但仅在 requestMethod 为 get 时，您需要指定两个单独的条件

addEventListener("install", (event) => {
  event.addRoutes(
    {
      condition: {
        urlPattern: "*.png",
        requestMethod: "get",
      },
      source: {
        cacheName: "pictures",
      },
    },
    {
      condition: {
        urlPattern: "*.jpg",
        requestMethod: "get",
      },
      source: {
        cacheName: "pictures",
      },
    },
  );
});

• InstallEvent
• install 事件
• Service Worker API
• 使用 Service Worker 静态路由 API 绕过特定路径的服务工作线程 在 developer.chrome.com 上 (2024)