Signatur
Beschreibung
Die schreibgeschützte Eigenschaft installing eines ServiceWorkerRegistration-Objekts gibt den Service Worker zurück, der gerade installiert wird. Sein ServiceWorker.state ist dann "installing". Gibt es gerade keinen solchen Worker, ist der Wert null.
Eine Registrierung kann bis zu drei Worker gleichzeitig verwalten: installing (wird gerade installiert), waiting (fertig installiert, wartet auf Aktivierung) und active (steuert Seiten). installing brauchen Sie vor allem, um den Fortschritt eines Updates zu verfolgen. Dazu hängen Sie einen statechange-Listener an den installierenden Worker und reagieren, sobald er installed oder activated erreicht.
Üblicherweise lesen Sie die Eigenschaft direkt nach navigator.serviceWorker.register() oder im Handler des Events updatefound aus. Das Event wird genau dann ausgelöst, wenn installing einen neuen Worker erhält.
Rückgabewert
ServiceWorker, der gerade installiert wird, oder null, wenn es keinen gibt.Beispiele
Installationsstatus direkt nach der Registrierung prüfen
if ('serviceWorker' in navigator) {
const registration = await navigator.serviceWorker.register('/sw.js');
if (registration.installing) {
console.log('Service Worker wird installiert');
} else if (registration.waiting) {
console.log('Service Worker ist installiert und wartet');
} else if (registration.active) {
console.log('Service Worker ist aktiv');
}
}Update-Fortschritt über updatefound und statechange verfolgen
const registration = await navigator.serviceWorker.register('/sw.js');
registration.addEventListener('updatefound', () => {
const newWorker = registration.installing;
if (!newWorker) return;
console.log('Neue Version gefunden, Status:', newWorker.state);
newWorker.addEventListener('statechange', () => {
console.log('Neuer Status:', newWorker.state);
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
// Alte Version steuert die Seite noch – Hinweis anzeigen
console.log('Update bereit – bitte Seite neu laden.');
}
});
});Hilfsfunktion: auf die Aktivierung eines installierenden Workers warten
const waitForActivation = (registration) => new Promise((resolve, reject) => {
const worker = registration.installing ?? registration.waiting;
if (!worker) return resolve(registration.active);
worker.addEventListener('statechange', () => {
if (worker.state === 'activated') resolve(worker);
if (worker.state === 'redundant') reject(new Error('Installation fehlgeschlagen'));
});
});
const reg = await navigator.serviceWorker.register('/sw.js');
const active = await waitForActivation(reg);
console.log('Aktiv:', active.scriptURL);// Wichtig · Fallstricke
- Kurzlebiger Wert:
installingist nur während der Installation belegt. Danach wandert der Worker nachwaitingbzw.active, oder er wird bei einem Fehlerredundant. Speichern Sie die Referenz sofort in einer Variablen, statt die Eigenschaft später erneut auszulesen. - Immer auf
nullprüfen: Auch imupdatefound-Handler kann der Wert theoretisch schon wiedernullsein, wenn die Installation sehr schnell fehlschlägt. - Service Worker gibt es nur in sicheren Kontexten (HTTPS oder
localhost). In privaten Fenstern mancher Browser (z. B. älteres Firefox) fehltnavigator.serviceWorkerganz. Prüfen Sie deshalb vorher mit'serviceWorker' in navigator. - Die Eigenschaft steht auch innerhalb des Service Workers über
self.registration.installingzur Verfügung. - Die Browser-Unterstützung ist breit: Chrome 40+, Firefox 44+, Safari 11.1+ und Edge 17+.