FetchEvent: respondWith() Methode

Syntax

respondWith(response)

Parameter

response

Eine Response oder ein Promise, das sich zu einer Response auflöst. 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 angeführten "globalen Regeln" angedeutet.

InvalidStateError DOMException

Wird zurückgegeben, wenn das Ereignis noch nicht gesendet wurde oder respondWith() bereits aufgerufen wurde.

Beschreibung

Festlegen der endgültigen URL einer Ressource

Seit Firefox 59 wird, wenn ein Service Worker eine Response an FetchEvent.respondWith() liefert, der Wert Response.url an die abgefangene Netzwerk-Anfrage als endgültige aufgelöste URL weitergegeben. Wenn der Wert Response.url der leere String ist, wird die FetchEvent.request.url als endgültige URL verwendet.

In der Vergangenheit wurde die FetchEvent.request.url in allen Fällen als endgültige URL verwendet. Die bereitgestellte Response.url wurde effektiv ignoriert.

Dies bedeutet beispielsweise, 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() Subressource-Ladevorgänge zu lösen (Firefox Bug 1222008).

Für die meisten Arten von Netzwerk-Anfragen hat diese Änderung keine Auswirkungen, da Sie die endgültige URL nicht beobachten können. Es gibt jedoch einige, bei denen das wichtig ist:

• Wenn ein fetch() abgefangen wird, können Sie die endgültige URL im Ergebnis der Response.url beobachten.
• Wenn ein Worker Skript abgefangen wird, wird die endgültige URL verwendet, um self.location und als Basis-URL für relative URLs im Worker-Skript festzulegen.
• Wenn ein Stylesheet abgefangen wird, wird die endgültige URL als Basis-URL verwendet, um relative @import Ladevorgänge zu lösen.

Beachten Sie, dass Navigationsanfragen für Windows und iframes die endgültige URL NICHT verwenden. Die Art und Weise, wie die HTML-Spezifikation Umleitungen für Navigationen behandelt, verwendet letztendlich die Anforderungs-URL für das resultierende Window.location. Dies bedeutet, dass Websites weiterhin eine "alternative" Ansicht einer Webseite bereitstellen können, wenn sie offline ist, ohne die für den Benutzer sichtbare URL zu ändern.

Beispiele

Dieses Fetch-Ereignis versucht, eine Antwort von der Cache API zurückzugeben und fällt 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);
    })(),
  );
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von Service Workers
• Fetch API