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