Signatur
NavigationPreloadManager.prototype.getState()
Beschreibung
getState() fragt den aktuellen Zustand von Navigation Preload für eine Service-Worker-Registrierung ab. Bei Navigation Preload startet der Browser die Netzwerkanfrage für eine Navigation schon, während der Service Worker noch hochfährt. So entfällt die Wartezeit beim Kaltstart des Workers.
Das Promise wird in ein einfaches Objekt aufgelöst, das zwei Eigenschaften hat:
enabled(boolean):true, wenn Navigation Preload aktiviert ist (etwa überenable()).headerValue(string): Der Wert des HTTP-HeadersService-Worker-Navigation-Preload, der bei Preload-Anfragen mitgeschickt wird. Standardmäßig ist das"true". Ändern lässt er sich mitsetHeaderValue().
Die Methode eignet sich zur Diagnose und für bedingte Logik. Ein Beispiel: Preload wird im activate-Handler nur dann aktiviert, wenn es noch aus ist. Oder der Header-Wert wird geprüft, bevor man ihn überschreibt. Zugreifen kann man sowohl im Service Worker über self.registration.navigationPreload als auch in der Seite über ServiceWorkerRegistration.navigationPreload.
Rückgabewert
Typ
Promise<{ enabled: boolean, headerValue: string }>
Beschreibung
Ein Promise, das in ein Objekt mit den Eigenschaften
enabled und headerValue aufgelöst wird. Es wird mit einem InvalidStateError abgelehnt, wenn die Registrierung keinen aktiven Worker hat.Beispiele
Zustand im Service Worker abfragen und bei Bedarf aktivieren
// sw.js
self.addEventListener('activate', (event) => {
event.waitUntil((async () => {
const preload = self.registration.navigationPreload;
if (!preload) return; // Browser unterstützt kein Navigation Preload
const { enabled } = await preload.getState();
if (!enabled) {
await preload.enable();
}
const state = await preload.getState();
console.log('Navigation Preload:', state);
})());
});Navigation Preload: { enabled: true, headerValue: "true" }
Zustand aus der Seite heraus prüfen
// main.js
const checkPreload = async () => {
if (!('serviceWorker' in navigator)) return;
const registration = await navigator.serviceWorker.ready;
if (!registration.navigationPreload) {
console.log('Navigation Preload wird nicht unterstützt');
return;
}
const { enabled, headerValue } = await registration.navigationPreload.getState();
console.log(`aktiv: ${enabled}, Header: ${headerValue}`);
};
checkPreload();aktiv: true, Header: true
Header-Wert nur bei Abweichung setzen
// sw.js
const APP_VERSION = 'v42';
self.addEventListener('activate', (event) => {
event.waitUntil((async () => {
const preload = self.registration.navigationPreload;
if (!preload) return;
await preload.enable();
const { headerValue } = await preload.getState();
if (headerValue !== APP_VERSION) {
await preload.setHeaderValue(APP_VERSION);
}
})());
});
self.addEventListener('fetch', (event) => {
if (event.request.mode !== 'navigate') return;
event.respondWith((async () => {
const preloaded = await event.preloadResponse;
return preloaded || fetch(event.request);
})());
});// Wichtig · Fallstricke
- Feature-Erkennung: Vor dem Aufruf sollte man prüfen, ob
registration.navigationPreloadexistiert. Ältere Safari-Versionen (vor 15.4) und Firefox-Versionen (vor 99) kennen die API nicht. - Nur in sicheren Kontexten (HTTPS oder
localhost) verfügbar, wie Service Worker insgesamt. - Wird
getState()aufgerufen, bevor die Registrierung einen aktiven Worker hat, kann das Promise mitInvalidStateErrorabgelehnt werden. Aus der Seite heraus deshalb am besten aufnavigator.serviceWorker.readywarten. - Das zurückgegebene Objekt ist eine Momentaufnahme. Es aktualisiert sich nicht, wenn danach
enable(),disable()odersetHeaderValue()aufgerufen werden. - Ist Preload aktiviert, sollte man
event.preloadResponseimfetch-Handler auch tatsächlich verwenden. Sonst wird die Anfrage doppelt geschickt und Bandbreite verschwendet. Chrome gibt dazu eine Warnung in der Konsole aus.