FetchEvent
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年4月.
* Some parts of this feature may have varying levels of support.
这是会在 service worker 全局作用域中触发 fetch 事件的事件类型。它包含关于 fetch 的信息，包括 request 和接收方如何处理响应。它提供 event.respondWith() 方法，允许我们为此 fetch 提供一个响应。
构造函数
FetchEvent()-
创建一个新的
FetchEvent对象。这个构造函数不是很常用。浏览器自己会创建这些对象，并为它们提供fetch事件的回调。
属性
从它的祖先 Event 继承属性。
FetchEvent.clientId只读FetchEvent.preloadResponse只读-
一个兑现为
Response的Promise，如果该 fetch 没有导航或者 navigation preload 未启用，则是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);
})(),
);
});
规范
| Specification |
|---|
| Service Workers # fetchevent-interface |
浏览器兼容性
Loading…