FetchEvent: respondWith() Methode

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.

response

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

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 "globalen Regeln" angedeutet.

InvalidStateError DOMException

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

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);
    })(),
  );
});

• Verwendung von Service Workers
• Fetch API