FetchEvent
Baseline 广泛可用 *
注意：此功能仅在 Service Workers 中可用。
这是在service worker global scope上分派的 fetch 事件的事件类型。它包含有关 fetch 的信息，包括请求以及接收方将如何处理响应。它提供了 event.respondWith() 方法，使我们能够为此 fetch 提供一个响应。
构造函数
FetchEvent()-
创建一个新的
FetchEvent对象。通常不使用此构造函数。浏览器会创建这些对象并将它们提供给fetch事件回调。
实例属性
继承自其祖先 Event 的属性.
FetchEvent.clientId只读FetchEvent.handled只读-
一个在事件尚未处理时处于挂起状态，并在处理完成后 fulfilled 的 Promise。
FetchEvent.isReload只读 已弃用 非标准-
如果事件是由用户尝试重新加载页面触发的，则返回
true，否则返回false。 FetchEvent.preloadResponse只读-
一个
Promise，用于获取Response，如果此 fetch 不是导航，或者 导航预加载未启用，则为undefined。 FetchEvent.replacesClientId只读FetchEvent.resultingClientId只读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 |
浏览器兼容性
加载中…