FetchEvent: respondWith() Methode

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:

• Wenn ein fetch() abgefangen wird, können Sie die finale URL im Resultat der Response.url beobachten.
• Wenn ein worker-Skript abgefangen wird, wird die finale URL verwendet, um self.location zu setzen und als Basis-URL für relative URLs im Worker-Skript zu fungieren.
• Wenn ein Stylesheet abgefangen wird, wird die finale URL als Basis-URL für die Auflösung relativer @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);
    })(),
  );
});

• Verwendung von Service Workers
• Fetch API