FetchEvent: preloadResponse-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2022 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist nur in Service Workers verfügbar.
Die preloadResponse schreibgeschützte Eigenschaft der FetchEvent-Schnittstelle gibt ein Promise zurück, das zu der Navigation preload Response aufgelöst wird, falls ein Navigation preload ausgelöst wurde, oder andernfalls undefined.
Ein Navigation preload wird ausgelöst, wenn Navigation preload aktiviert ist, die Anfrage eine GET-Anfrage ist und die Anfrage eine Navigationsanfrage ist (vom Browser generiert beim Laden von Seiten und iframes).
Ein Service Worker kann im Fetch-Event-Handler auf dieses Promise warten, um die Fertigstellung einer Fetch-Anfrage zu verfolgen, die während des Starts des Service Workers durchgeführt wurde.
Wert
Ein Promise, das zu einer Response aufgelöst wird oder andernfalls undefined.
Beispiele
Dieser Code-Ausschnitt stammt aus Beschleunigen Sie Service Workers mit Navigation Preloads.
Der onfetch Event-Handler hört auf das fetch-Ereignis.
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 Übereinstimmung mit einer URL-Anfrage im Cache-Objekt gibt, gibt der Code ein Promise für das Abrufen der Antwort aus dem Cache zurück.
Wenn keine Übereinstimmung im Cache gefunden wird, gibt der Code das Promise in preloadResponse zurück.
Wenn weder eine passende Cache- noch eine vorgeladene Antwort vorhanden ist, holt der Code die Antwort aus dem Netzwerk und gibt das zugehörige Promise zurück.
addEventListener("fetch", (event) => {
event.respondWith(
(async () => {
const preloadResponsePromise = event.preloadResponse;
// Respond from the cache if we can
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {
// Keep the navigation preload request alive even if we do not use its response.
event.waitUntil(preloadResponsePromise.catch(() => undefined));
return cachedResponse;
}
// Else, use the preloaded response, if it's there
const response = await preloadResponsePromise;
if (response) return response;
// Else try the network.
return fetch(event.request);
})(),
);
});
Spezifikationen
| Spezifikation |
|---|
| Service Workers Nightly # fetch-event-preloadresponse |