FetchEvent

注意：此功能仅在 Service Workers 中可用。

这是在 service worker 全局作用域 上为 fetch 事件分派的事件类型。它包含有关 fetch 的信息，包括请求以及接收者将如何处理响应。它提供了 event.respondWith() 方法，该方法允许我们为该 fetch 提供响应。

Event ExtendableEvent FetchEvent

构造函数

FetchEvent()

创建一个新的 FetchEvent 对象。此构造函数通常不用于。浏览器会创建这些对象并将其提供给 fetch 事件回调。

实例属性

从其祖先 Event 继承属性.

FetchEvent.clientId 只读

发起 fetch 的同源 client 的 id。

FetchEvent.handled 只读

一个 Promise，在事件未处理时处于挂起状态，并在事件处理后完成。

FetchEvent.isReload 只读

如果事件是由用户尝试重新加载页面而分派的，则返回 true，否则返回 false。

FetchEvent.preloadResponse 只读

一个 Promise，用于表示一个 Response，如果此 fetch 不是导航，或者 导航预加载 未启用，则为 undefined。

FetchEvent.replacesClientId 只读

在页面导航期间被替换的 client 的 id。

FetchEvent.resultingClientId 只读

在页面导航期间替换先前客户端的 client 的 id。

FetchEvent.request 只读

浏览器打算发出的 Request。

实例方法

从其父类 ExtendableEvent 继承方法.

FetchEvent.respondWith()

阻止浏览器的默认 fetch 处理，并自己提供（一个 Promise 用于）响应。

ExtendableEvent.waitUntil()

延长事件的生存期。用于通知浏览器超出响应返回范围的任务，例如流式传输和缓存。

示例

此 fetch 事件对非 GET 请求使用浏览器默认设置。对于 GET 请求，它尝试在缓存中返回匹配项，然后回退到网络。如果它在缓存中找到匹配项，则会异步更新缓存以备下次使用。

js
self.addEventListener("fetch", (event) => {
  // Let the browser do its default thing
  // for non-GET requests.
  if (event.request.method !== "GET") return;

  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      // Try to get the response from a cache.
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // If we found a match in the cache, return it, but also
        // update the entry in the cache in the background.
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })(),
  );
});

规范

规范
Service Workers
# fetchevent-interface

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅