FetchEvent
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2018 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Hinweis: Diese Funktion ist nur in Service Workers verfügbar.
Dies ist der Ereignistyp für fetch-Ereignisse, die im globalen Scope des Service Workers ausgelöst werden. Er enthält Informationen über den Fetch, einschließlich der Anfrage und wie der Empfänger die Antwort behandeln wird. Er stellt die Methode event.respondWith() bereit, mit der wir eine Antwort auf diesen Fetch bereitstellen können.
Konstruktor
FetchEvent()-
Erstellt ein neues
FetchEvent-Objekt. Dieser Konstruktor wird normalerweise nicht verwendet. Der Browser erstellt diese Objekte und stellt sie den Callbacks vonfetch-Ereignissen bereit.
Instanzeigenschaften
Erbt Eigenschaften von seinem Vorgänger, Event.
FetchEvent.clientIdSchreibgeschützt-
Die
iddes gleichnamigen Ursprungs angehörendenclient, der den Fetch initiiert hat. FetchEvent.handledSchreibgeschützt-
Ein Promise, das ausstehend ist, solange das Ereignis nicht verarbeitet wurde, und erfüllt wird, sobald es verarbeitet wurde.
FetchEvent.isReloadSchreibgeschützt-
Gibt
truezurück, wenn das Ereignis durch den Versuch des Benutzers ausgelöst wurde, die Seite neu zu laden, andernfallsfalse. FetchEvent.preloadResponseSchreibgeschützt-
Ein
Promisefür eineResponseoderundefined, wenn dieser Fetch keine Navigation ist oder Navigation Preload nicht aktiviert ist. FetchEvent.resultingClientIdSchreibgeschützt-
Die
iddesclient, der den vorherigen Client während einer Seitennavigation ersetzt. FetchEvent.requestSchreibgeschützt-
Die
Request, die der Browser ausführen möchte.
Instanzmethoden
Erbt Methoden von seinem übergeordneten Element, ExtendableEvent.
FetchEvent.respondWith()-
Verhindert die standardmäßige Fetch-Verarbeitung des Browsers und stellt selbst eine Antwort (oder ein Promise für eine 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, etwa Streaming und Caching.
Beispiele
Dieses Fetch-Ereignis verwendet für Nicht-GET-Anfragen den Browser-Standard. Bei GET-Anfragen wird versucht, eine Übereinstimmung im Cache zurückzugeben; andernfalls wird auf das Netzwerk zurückgegriffen. Wenn eine Übereinstimmung im Cache gefunden wird, wird der Cache asynchron für das nächste Mal aktualisiert.
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
| Spezifikation |
|---|
| Service Workers Nightly # fetchevent-interface |