NavigationPreloadManager
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.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die NavigationPreloadManager
-Schnittstelle der Service Worker API bietet Methoden zur Verwaltung des Vorladens von Ressourcen parallel zum Start eines Service Workers.
Wenn unterstützt, wird ein Objekt dieses Typs durch ServiceWorkerRegistration.navigationPreload
zurückgegeben. Das Ergebnis einer Preload-Fetch-Anfrage wird mit dem Versprechen, das von FetchEvent.preloadResponse
zurückgegeben wird, abgewartet.
Instanzmethoden
-
Aktiviert das Vorladen von Navigationen und gibt ein
Promise
zurück, das sich mitundefined
erfüllt. -
Deaktiviert das Vorladen von Navigationen und gibt ein
Promise
zurück, das sich mitundefined
erfüllt. -
Legt den Wert des
Service-Worker-Navigation-Preload
HTTP-Headers fest, der in Preload-Anfragen gesendet wird, und gibt ein leeresPromise
zurück. -
Gibt ein
Promise
zurück, das sich zu einem Objekt auflöst, dessen Eigenschaften angeben, ob das Vorladen aktiviert ist und welcher Wert imService-Worker-Navigation-Preload
HTTP-Header in Preload-Anfragen gesendet wird.
Beschreibung
Service Worker behandeln fetch()
-Ereignisse im Namen einer Website für Seiten innerhalb eines bestimmten Bereichs. Wenn ein Benutzer zu einer Seite navigiert, die einen Service Worker verwendet, startet der Browser den Worker (falls er nicht bereits läuft) und sendet ihm ein Fetch-Ereignis, auf dessen Ergebnis er wartet. Beim Empfang eines Ereignisses gibt der Worker die Ressource aus einem Cache zurück, falls vorhanden, oder lädt die Ressource anderweitig vom Remote-Server herunter (und speichert eine Kopie für zukünftige Anfragen).
Ein Service Worker kann Ereignisse des Browsers erst verarbeiten, nachdem er gestartet wurde. Dies ist unvermeidlich, hat aber in der Regel wenig Einfluss. Service Worker sind oft bereits gestartet (sie bleiben nach der Verarbeitung anderer Anfragen für eine Weile aktiv). Selbst wenn ein Service Worker gestartet werden muss, liefert er oft aus einem Cache, was sehr schnell ist. In Fällen, in denen ein Worker gestartet werden muss, bevor er eine Remote-Ressource abrufen kann, kann die Verzögerung jedoch erheblich sein.
Der NavigationPreloadManager
bietet einen Mechanismus, um das Abrufen von Ressourcen parallel zum Start eines Service Workers auszuführen, damit die Ressource möglicherweise bereits vollständig oder teilweise heruntergeladen ist, wenn der Worker in der Lage ist, die Fetch-Anfrage des Browsers zu bearbeiten. Dies macht den Fall, dass der Worker gestartet werden muss, „nicht schlechter“ als wenn der Worker bereits gestartet ist, und in manchen Fällen besser.
Der Preload-Manager sendet den Service-Worker-Navigation-Preload
HTTP-Header mit Preload-Anfragen, wodurch Antworten für Preload-Anfragen anpassbar gemacht werden können. Dies kann zur Reduzierung der gesendeten Daten auf nur einen Teil der ursprünglichen Seite oder zum Anpassen der Antwort basierend auf dem Anmeldestatus des Benutzers verwendet werden.
Beispiele
Die Beispiele hier stammen aus Beschleunigung des Service Workers mit Navigation Preloads (developer.chrome.com).
Funktionsprüfung und Aktivierung des Navigationspreloaders
Unten wird der Navigationspreloader im activate
-Ereignishandler des Service Workers aktiviert, nachdem zunächst mit ServiceWorkerRegistration.navigationPreload
überprüft wurde, ob die Funktion unterstützt wird (dies gibt entweder den NavigationPreloadManager
für den Service Worker oder undefined
zurück, falls die Funktion nicht unterstützt wird).
addEventListener("activate", (event) => {
event.waitUntil(
(async () => {
if (self.registration.navigationPreload) {
// Enable navigation preloads!
await self.registration.navigationPreload.enable();
}
})(),
);
});
Verwendung einer voraufgeladenen Antwort
Der folgende Code zeigt einen Handler für Fetch-Ereignisse eines Service Workers, der eine voraufgeladene Antwort verwendet (FetchEvent.preloadResponse
).
Der fetch
-Ereignishandler ruft FetchEvent.respondWith()
auf, um ein Versprechen an die kontrollierte Seite zurückzugeben. Dieses Versprechen wird mit der angeforderten Ressource aufgelöst, die aus dem Cache, einer voraufgeladenen Fetch-Anfrage oder einer neuen Netzwerkanfrage stammen kann.
Wenn eine passende URL-Anfrage im Cache
-Objekt vorhanden ist, gibt der Code ein aufgelöstes Versprechen für das Abrufen der Antwort aus dem Cache zurück. Wenn im Cache kein Treffer gefunden wird, gibt der Code die aufgelöste voraufgeladene Antwort zurück (FetchEvent.preloadResponse
). Wenn weder ein passender Cacheeintrag noch eine voraufgeladene Antwort vorhanden sind, startet der Code eine neue Abrufoperation aus dem Netzwerk und gibt das (nicht aufgelöste) Versprechen für diese Abrufoperation 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);
})(),
);
});
Benutzerdefinierte Antworten
Der Browser sendet den HTTP-Header Service-Worker-Navigation-Preload
mit Preload-Anfragen mit einem Standardrichtwert von true
. Dies ermöglicht es Servern, zwischen normalen und Preload-Fetch-Anfragen zu unterscheiden und bei Bedarf unterschiedliche Antworten in jedem Fall zu senden.
Hinweis: Wenn die Antwort auf Preload- und normale Fetch-Operationen unterschiedlich sein kann, muss der Server Vary: Service-Worker-Navigation-Preload
setzen, um sicherzustellen, dass die verschiedenen Antworten zwischengespeichert werden.
Der Header-Wert kann mit NavigationPreloadManager.setHeaderValue()
auf einen beliebigen anderen String-Wert geändert werden, um zusätzlichen Kontext für die Preload-Operation bereitzustellen. Beispielsweise könnte man den Wert auf die ID der zuletzt zwischengespeicherten Ressource setzen, sodass der Server keine Ressourcen zurückgibt, es sei denn, sie werden tatsächlich benötigt. Ebenso könnte man die zurückgegebenen Informationen basierend auf dem Authentifizierungsstatus anstelle der Verwendung von Cookies konfigurieren.
Der untenstehende Code zeigt, wie der Wert der Header-Anweisung auf eine Variable newValue
gesetzt wird.
navigator.serviceWorker.ready
.then((registration) =>
registration.navigationPreload.setHeaderValue(newValue),
)
.then(() => {
console.log("Done!");
});
Beschleunigung des Service Workers mit Navigation Preloads > Benutzerdefinierte Antworten für Preloads bietet ein vollständigeres Beispiel für eine Website, bei der die Antwort für eine Artikelwebseite aus einem zwischengespeicherten Header und Footer aufgebaut wird, sodass nur der Artikelinhalt für ein Preload zurückgegeben wird.
Abfrage des Status
Sie können NavigationPreloadManager.getState()
verwenden, um zu prüfen, ob das Vorladen von Navigationen aktiviert ist und um zu bestimmen, welcher Richtwert mit dem Service-Worker-Navigation-Preload
HTTP-Header für Preload-Anfragen gesendet wird.
Der untenstehende Code zeigt, wie man das Versprechen erhält, das sich zu einem state
-Objekt auflöst, und das Ergebnis protokolliert.
navigator.serviceWorker.ready
.then((registration) => registration.navigationPreload.getState())
.then((state) => {
console.log(state.enabled); // boolean
console.log(state.headerValue); // string
});
Spezifikationen
Specification |
---|
Service Workers # navigation-preload-manager |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Beschleunigung des Service Workers mit Navigation Preloads (developer.chrome.com)