FetchEvent: respondWith() Methode
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.
Die respondWith()
-Methode von
FetchEvent
verhindert die standardmäßige Verarbeitung von Fetch-Anfragen durch den Browser und ermöglicht es Ihnen, selbst ein Versprechen für eine Response
bereitzustellen.
In den meisten Fällen können Sie jede Antwort bereitstellen, die der Empfänger versteht. Zum Beispiel,
wenn ein <img>
die Anfrage initiiert, muss der Antwortinhalt Bilddaten enthalten. Aus Sicherheitsgründen gibt es einige allgemeine Regeln:
-
Sie können nur
Response
-Objekte vomtype
"opaque"
zurückgeben, wenn dasfetchEvent.request
Objektmode
auf"no-cors"
gesetzt ist. Dies verhindert das Auslaufen privater Daten. -
Sie können nur
Response
-Objekte vomtype
"opaqueredirect"
zurückgeben, wenn dasfetchEvent.request
Objektmode
auf"manual"
gesetzt ist. -
Sie können keine
Response
-Objekte vomtype
"cors"
zurückgeben, wenn dasfetchEvent.request
Objektmode
auf"same-origin"
gesetzt ist.
Festlegen der finalen URL einer Ressource
Ab Firefox 59 wird, wenn ein Service Worker eine Response
an
FetchEvent.respondWith()
bereitstellt, der Wert von Response.url
an die abgefangene Netzwerk-Anfrage als endgültige aufgelöste URL weitergegeben. Wenn der
Response.url
-Wert ein leerer String ist, dann wird die
FetchEvent.request.url
als finale URL verwendet.
In der Vergangenheit wurde in allen Fällen die FetchEvent.request.url
als finale URL verwendet. Die bereitgestellte Response.url
wurde effektiv
ignoriert.
Das bedeutet zum Beispiel, wenn ein Service Worker ein Stylesheet oder ein Worker-Skript abfängt,
dann wird die bereitgestellte Response.url
verwendet, um alle relativen
@import
oder
importScripts()
Subresource-Loads aufzulösen
(Firefox-Fehler 1222008).
Für die meisten Arten von Netzwerk-Anfragen hat diese Änderung keine Auswirkungen, da Sie die finale URL nicht beobachten können. Es gibt jedoch einige, bei denen es eine Rolle spielt:
-
Wenn ein
fetch()
abgefangen wird, dann können Sie die finale URL imResponse.url
des Ergebnisses beobachten. -
Wenn ein worker-Skript
abgefangen wird, dann wird die finale URL verwendet, um
self.location
zu setzen und als Basis-URL für relative URLs im Worker-Skript verwendet. -
Wenn ein Stylesheet abgefangen wird, dann wird die finale URL als Basis-URL für
die Auflösung relativer
@import
-Loads verwendet.
Beachten Sie, dass Navigationsanfragen für Windows
und
iframes
NICHT die finale URL verwenden. Die Art und Weise, wie die HTML-Spezifikation Umleitungen für Navigationsanfragen behandelt, führt dazu, dass die Anfrage-URL für das resultierende Window.location
verwendet wird. Dies bedeutet, dass Seiten weiterhin eine "alternative" Ansicht einer Webseite anzeigen können, wenn sie offline sind, ohne die für den Benutzer sichtbare URL zu ändern.
Syntax
respondWith(response)
Parameter
Rückgabewert
Keiner (undefined
).
Ausnahmen
NetworkError
DOMException
-
Wird zurückgegeben, wenn ein Netzwerkfehler bei bestimmten Kombinationen von
FetchEvent.request.mode
undResponse.type
-Werten ausgelöst wird, wie in den oben aufgeführten "globalen Regeln" angedeutet. InvalidStateError
DOMException
-
Wird zurückgegeben, wenn das Ereignis nicht versendet wurde oder
respondWith()
bereits aufgerufen wurde.
Beispiele
Dieses Fetch-Ereignis versucht, eine Antwort aus der Cache-API zurückzugeben und greift andernfalls auf das Netzwerk zurück.
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 sie von
caches.keys()
zurückgegeben werden), bis eine
Response
zurückgegeben wird.
Spezifikationen
Specification |
---|
Service Workers # fetch-event-respondwith |
Browser-Kompatibilität
BCD tables only load in the browser