FetchEvent
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
Hinweis: Dieses Feature ist nur verfügbar in Service Workers.
Dies ist der Ereignistyp für fetch
-Ereignisse, die im Service Worker Global Scope ausgelöst werden. Es enthält Informationen über den Abruf, einschließlich der Anfrage und wie der Empfänger die Antwort behandeln wird. Es stellt die Methode event.respondWith()
bereit, die es uns ermöglicht, eine Antwort auf diesen Abruf bereitzustellen.
Konstruktor
FetchEvent()
-
Erstellt ein neues
FetchEvent
-Objekt. Dieser Konstruktor wird typischerweise nicht verwendet. Der Browser erstellt diese Objekte und stellt siefetch
-Ereignisrückrufen zur Verfügung.
Instanz-Eigenschaften
Erbt Eigenschaften von seinem Vorfahren, Event
.
FetchEvent.clientId
Nur lesbar-
Die
id
des gleichnamigenclient
, der den Abruf initiiert hat. FetchEvent.handled
Nur lesbar-
Ein Versprechen, das anhängig ist, während das Ereignis nicht behandelt wurde, und erfüllt wird, sobald es behandelt wurde.
FetchEvent.isReload
Nur lesbar Veraltet Nicht standardisiert-
Gibt
true
zurück, wenn das Ereignis vom Benutzer ausgelöst wurde, der versucht hat, die Seite neu zu laden, andernfallsfalse
. FetchEvent.preloadResponse
Nur lesbar-
Ein
Promise
für eineResponse
, oderundefined
, wenn dieser Abruf keine Navigation ist oder Navigation Preload nicht aktiviert ist. FetchEvent.replacesClientId
Nur lesbar-
Die
id
desclient
, der während einer Seitennavigation ersetzt wird. FetchEvent.resultingClientId
Nur lesbar-
Die
id
desclient
, der den vorherigen Client während einer Seitennavigation ersetzt. FetchEvent.request
Nur lesbar-
Die
Request
, die der Browser ausführen möchte.
Instanz-Methoden
Erbt Methoden von seinem Elternteil, ExtendableEvent
.
FetchEvent.respondWith()
-
Verhindert die Standard-Abrufverarbeitung des Browsers und stellt (ein Versprechen für) eine eigene Antwort bereit.
ExtendableEvent.waitUntil()
-
Verlängert die Lebensdauer des Ereignisses. Wird verwendet, um den Browser über Aufgaben zu informieren, die über die Rückgabe einer Antwort hinausgehen, wie Streaming und Caching.
Beispiele
Dieses fetch
-Ereignis verwendet den Standard des Browsers für Nicht-GET-Anfragen. Bei GET-Anfragen versucht es, einen Cache-Treffer zurückzugeben und weicht auf das Netzwerk aus. Wenn es einen Treffer im Cache findet, aktualisiert es den Cache asynchron für das nächste Mal.
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);
})(),
);
});
Spezifikationen
Specification |
---|
Service Workers # fetchevent-interface |
Browser-Kompatibilität
BCD tables only load in the browser