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:

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 im Response.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

js
respondWith(response)

Parameter

response

Eine Response oder ein Promise, das zu einer Response aufgelöst wird. Andernfalls wird ein Netzwerkfehler an Fetch zurückgegeben.

Rückgabewert

Keiner (undefined).

Ausnahmen

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 "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.

js
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

Siehe auch