FetchEvent - 在服务 worker 全局范围上调度的 fetch 事件的事件类型

FetchEvent 是在服务 worker 全局范围上调度的 fetch 事件的事件类型。它包含有关 fetch 的信息，包括请求以及接收器如何处理响应。它提供了 event.respondWith() 方法，允许我们提供该 fetch 的响应。

构造函数

FetchEvent()

创建一个新的 FetchEvent 对象。通常不使用该构造函数。浏览器自己创建这些对象并将它们提供给 fetch 事件回调。

属性

从其祖先 Event 继承了属性。

fetchEvent.clientId 只读

启动 fetch 的同源 client 的 id。

fetchEvent.preloadResponse 只读

一个 Promise，用于 Response，如果它不是一个 navigation，或 navigation preload 未启用，则为 void。

fetchEvent.request 只读

浏览器要发送的 Request。

方法

从其祖先 ExtendableEvent 继承了属性。

fetchEvent.respondWith()

阻止浏览器的默认 fetch 处理，并自己提供（promise）响应。

extendableEvent.waitUntil()

延长活动的生命周期。用于向浏览器通知超出响应返回范围的任务，例如流和缓存。

实例

该 fetch 事件使用浏览器默认行为来处理 GET 之外的请求。对于 GET 请求，它尝试在缓存中返回匹配，然后回退到网络请求。如果它在缓存中找到匹配项，则会异步更新缓存以供下次使用。

self.addEventListener('fetch', event => {
  // 让浏览器为 GET 之外的请求执行默认操作。
  if (event.request.method != 'GET') return;

  // 阻止默认操作，改为自己处理请求。
  event.respondWith(async function() {
    // 尝试从缓存中获取响应。
    const cache = await caches.open('dynamic-v1');
    const cachedResponse = await cache.match(event.request);

    if (cachedResponse) {
      // 如果我们在缓存中找到匹配项，则将其返回，但也会在后台更新缓存中的条目。
      event.waitUntil(cache.add(event.request));
      return cachedResponse;
    }

    // 如果我们在缓存中找不到匹配项，则回退到网络请求。
    return fetch(event.request);
  }());
});

规范

规范	状态	备注
Service Workers FetchEvent() 的定义	编者的草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 已在 Firefox 45 和 52 扩展支持版本（ESR）中禁用了服务工作者（和推送）

2. 如果请求模式是同源且响应类型是 cors，则抛出 NetworkError（请参阅 bug 1222008）。这项工作正在进行中 - 请参阅 https://www.chromestatus.com/feature/5694278818856960。

3. 如果请求模式是同源且响应类型是 cors，则抛出 NetworkError（请参阅 bug 1222008）。

相关链接

• Promise
• Fetch API