Baseline Widely available *
Hinweis: Diese Funktion ist nur in Service Workers verfügbar.
Die respondWith()-Methode von FetchEvent verhindert die standardmäÃige Behandlung von Fetch-Anfragen durch den Browser und ermöglicht es Ihnen, ein eigenes Versprechen für eine Response bereitzustellen.
In den meisten Fällen können Sie jede Antwort bereitstellen, die der Empfänger versteht. Wenn zum Beispiel ein <img> die Anfrage initiiert, muss der Antwortkörper Bilddaten enthalten. Aus Sicherheitsgründen gibt es einige allgemeine Regeln:
Response-Objekte des type "opaque" zurückgeben, wenn das fetchEvent.request-Objekt den mode "no-cors" hat. Dies verhindert, dass private Daten offengelegt werden.Response-Objekte des type "opaqueredirect" zurückgeben, wenn das fetchEvent.request-Objekt den mode "manual" hat.Response-Objekte des type "cors" zurückgeben, wenn das fetchEvent.request-Objekt den mode "same-origin" hat.Ab Firefox 59 wird, wenn ein Service Worker eine Response an FetchEvent.respondWith() liefert, der Wert Response.url an die abgefangene Netzwerkanforderung als endgültige aufgelöste URL weitergegeben. Wenn der Wert Response.url der leere String ist, wird die FetchEvent.request.url als finale URL verwendet.
In der Vergangenheit wurde die FetchEvent.request.url in allen Fällen als finale URL verwendet. Die bereitgestellte Response.url wurde effektiv ignoriert.
Das bedeutet beispielsweise, dass wenn ein Service Worker ein Stylesheet oder ein Worker-Skript abfängt, die bereitgestellte Response.url zur Auflösung aller relativen @import oder importScripts()-Subresource-Ladevorgänge verwendet wird (Firefox bug 1222008).
Für die meisten Arten von Netzwerkanfragen hat diese Ãnderung keine Auswirkungen, da die finale URL nicht sichtbar ist. Es gibt jedoch einige Fälle, in denen es von Bedeutung ist:
fetch() abgefangen wird, können Sie die finale URL im Resultat der Response.url beobachten.self.location zu setzen und als Basis-URL für relative URLs im Worker-Skript zu fungieren.@import-Ladevorgänge verwendet.Beachten Sie, dass Navigationsanfragen für Windows und iframes die finale URL NICHT verwenden. Die Art und Weise, wie die HTML-Spezifikation Umleitungen für Navigationen behandelt, führt dazu, dass die Anforderungs-URL für die resultierende Window.location verwendet wird. Dies bedeutet, dass Websites immer noch eine "alternative" Ansicht einer Webseite bereitstellen können, wenn im Offline-Modus keine Ãnderung der benutzersichtbaren URL erfolgt.
response
Eine Response oder ein Promise, das sich zu einer Response auflöst. Andernfalls wird ein Netzwerkfehler an Fetch zurückgemeldet.
Keiner (undefined).
NetworkError DOMException
Wird zurückgegeben, wenn ein Netzwerkfehler bei bestimmten Kombinationen von FetchEvent.request.mode und Response.type-Werten ausgelöst wird, wie in den oben aufgeführten "allgemeinen Regeln" angedeutet.
InvalidStateError DOMException
Wird zurückgegeben, wenn das Ereignis nicht gesendet wurde oder respondWith() bereits aufgerufen wurde.
Dieses Fetch-Ereignis versucht, eine Antwort von der Cache-API zurückzugeben, andernfalls wird auf das Netzwerk zurückgegriffen.
addEventListener("fetch", (event) => {
// Prevent the default, and handle the request ourselves.
event.respondWith(
(async () => {
// Try to get the response from a cache.
const cachedResponse = await caches.match(event.request);
// Return it if we found one.
if (cachedResponse) return cachedResponse;
// If we didn't find a match in the cache, use the network.
return fetch(event.request);
})(),
);
});
Hinweis:>caches.match() ist eine Komfortmethode. Eine gleichwertige Funktionalität besteht darin, cache.match() auf jedem Cache aufzurufen (in der Reihenfolge, in der diese von caches.keys() zurückgegeben werden), bis eine Response zurückgegeben wird.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4