FetchEvent: preloadResponse-Eigenschaft

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: Diese Funktion ist nur in Service Workers verfügbar.

Die schreibgeschützte preloadResponse-Eigenschaft des FetchEvent-Interfaces gibt ein Promise zurück, das auf die Navigation Preload Response aufgelöst wird, wenn das Navigation Preload ausgelöst wurde, oder andernfalls undefined.

Das Navigation Preload wird ausgelöst, wenn Navigation Preload aktiviert ist, die Anfrage eine GET-Anfrage ist und die Anfrage eine Navigationsanfrage ist (vom Browser beim Laden von Seiten und iframes erzeugt).

Ein Service Worker kann in seinem Fetch-Event-Handler auf dieses Promise warten, um den Abschluss einer während des Service-Worker-Starts gestellten Fetch-Anfrage zu verfolgen.

Wert

Ein Promise, das auf eine Response oder andernfalls auf undefined aufgelöst wird.

Beispiele

Dieses Codebeispiel stammt aus Beschleunigen Sie Service Worker mit Navigation Preloads.

Der onfetch-Event-Handler lauscht auf das fetch-Event. Wenn es ausgelöst wird, ruft der Handler FetchEvent.respondWith() auf, um ein Promise an die kontrollierte Seite zurückzugeben. Dieses Promise wird mit der angeforderten Ressource aufgelöst.

Wenn es eine passende URL-Anfrage im Cache-Objekt gibt, gibt der Code ein Promise zurück, um die Antwort aus dem Cache zu holen. Wenn kein Treffer im Cache gefunden wird, gibt der Code das Promise in preloadResponse zurück. Wenn es keinen passenden Cache oder vorab geladenen Antwort gibt, holt der Code die Antwort aus dem Netzwerk und gibt das zugehörige Promise zurück.

js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      // Respond from the cache if we can
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) return cachedResponse;

      // Else, use the preloaded response, if it's there
      const response = await event.preloadResponse;
      if (response) return response;

      // Else try the network.
      return fetch(event.request);
    })(),
  );
});

Spezifikationen

Specification
Service Workers
# fetch-event-preloadresponse

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch