FetchEvent：respondWith() 方法

从 Firefox 59 开始，当服务工作者向 FetchEvent.respondWith() 提供 Response 时，Response.url 值将作为最终解析的 URL 传播到被拦截的网络请求。如果 Response.url 值为空字符串，则 FetchEvent.request.url 将用作最终 URL。

过去，FetchEvent.request.url 在所有情况下都用作最终 URL。提供的 Response.url 实际上被忽略了。

这意味着，例如，如果服务工作者拦截了样式表或工作者脚本，则提供的 Response.url 将用于解析任何相对的 @import 或 importScripts() 子资源加载 (Firefox 错误 1222008 )。

对于大多数类型的网络请求，此更改没有影响，因为您无法观察最终 URL。但是，在少数情况下，它很重要

• 如果 fetch() 被拦截，则您可以在结果的 Response.url 上观察最终 URL。
• 如果 工作者 脚本被拦截，则最终 URL 用于设置 self.location，并用作工作者脚本中相对 URL 的基本 URL。
• 如果样式表被拦截，则最终 URL 用作解析相对 @import 加载的基本 URL。

请注意，Windows 和 iframes 的导航请求不会使用最终 URL。HTML 规范处理导航重定向的方式最终会使用请求 URL 作为最终的 Window.location。这意味着网站仍然可以提供网页的“替代”视图，即使处于脱机状态，也不会更改用户可见的 URL。

response

Response 或解析为 Response 的 Promise。否则，将返回网络错误到 Fetch。

无 (undefined )。

NetworkError DOMException

如果在 FetchEvent.request.mode 和 Response.type 值的某些组合上触发了网络错误，则会返回此错误，如上面列出的“全局规则”中所暗示的那样。

InvalidStateError DOMException

如果事件尚未分派或 respondWith() 已经调用，则会返回此错误。

此获取事件尝试从缓存 API 返回响应，否则回退到网络。

addEventListener("fetch", (event) => {
  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      // Try to get the response from a cache.
      const cachedResponse = await caches.match(event.request);
      // Return it if we found one.
      if (cachedResponse) return cachedResponse;
      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })(),
  );
});

• 使用 Service Workers
• Fetch API