Navigator.serviceWorker — Eigenschaft · JavaScript-Referenz

Signatur

get Navigator.serviceWorker

Beschreibung

navigator.serviceWorker gibt ein ServiceWorkerContainer-Objekt zurück. Darüber registrieren Sie Service Worker (register()), fragen bestehende Registrierungen ab (getRegistration(), getRegistrations()), warten auf einen aktiven Worker (ready) und tauschen Nachrichten mit dem steuernden Worker aus (controller, message-Ereignis).

Gebraucht wird die Eigenschaft für Progressive Web Apps: Offline-Fähigkeit per Cache, Hintergrundsynchronisation, Push-Benachrichtigungen und das Abfangen von Netzwerkanfragen. Typischerweise prüft man zuerst mit 'serviceWorker' in navigator, ob die API vorhanden ist, und registriert den Worker danach, am besten nach dem load-Ereignis, damit das erste Laden der Seite nicht ausgebremst wird.

Die Eigenschaft gibt es nur in einem sicheren Kontext (HTTPS oder localhost). Auf unsicheren Seiten ist sie undefined. Sie ist auch über WorkerNavigator in Workern verfügbar, dort allerdings mit weniger Möglichkeiten.

Rückgabewert

Typ

ServiceWorkerContainer | undefined

Beschreibung

Das ServiceWorkerContainer-Objekt des Dokuments. Ist undefined, wenn der Kontext nicht sicher ist oder der Browser keine Service Worker unterstützt.

Beispiele

Service Worker mit Feature-Erkennung registrieren

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js', { scope: '/' });
      console.log('Service Worker registriert, Scope:', registration.scope);
    } catch (err) {
      console.error('Registrierung fehlgeschlagen:', err);
    }
  });
} else {
  console.warn('Service Worker werden nicht unterstützt.');
}

Service Worker registriert, Scope: https://example.com/

Auf aktiven Worker warten und Nachricht senden

const sendToWorker = async (data) => {
  const registration = await navigator.serviceWorker.ready;
  registration.active.postMessage(data);
};

// Antworten des Workers empfangen
navigator.serviceWorker.addEventListener('message', (event) => {
  console.log('Antwort vom Worker:', event.data);
});

sendToWorker({ type: 'CACHE_CLEAR' });

Antwort vom Worker: { status: 'ok' }

Auf Update reagieren (controllerchange)

let refreshing = false;
navigator.serviceWorker.addEventListener('controllerchange', () => {
  if (refreshing) return;
  refreshing = true;
  // Neuer Worker übernimmt – Seite neu laden
  window.location.reload();
});

console.log('Aktuell gesteuert:', Boolean(navigator.serviceWorker.controller));

Aktuell gesteuert: true

Alle Registrierungen entfernen (z. B. beim Debuggen)

const unregisterAll = async () => {
  const registrations = await navigator.serviceWorker.getRegistrations();
  const results = await Promise.all(registrations.map((r) => r.unregister()));
  console.log(`${results.filter(Boolean).length} Worker abgemeldet`);
};

unregisterAll();

1 Worker abgemeldet

// Wichtig · Fallstricke

Nur in sicheren Kontexten: Auf HTTP-Seiten (außer localhost) ist navigator.serviceWorker undefined. Prüfen Sie deshalb immer mit 'serviceWorker' in navigator.
In privaten Fenstern (z. B. bei Firefox) oder wenn Cookies und Speicher blockiert sind, kann die Eigenschaft fehlen oder register() mit einem SecurityError abbrechen.
navigator.serviceWorker.controller ist beim ersten Laden der Seite null, auch nach erfolgreicher Registrierung. Erst nach einem Neuladen oder nach clients.claim() im Worker wird die Seite gesteuert.
Der Scope eines Workers kann nicht über das Verzeichnis seiner Skriptdatei hinausgehen, es sei denn, der Server sendet den Header Service-Worker-Allowed.
Das Worker-Skript muss vom selben Ursprung stammen. Außerdem gilt die CSP-Direktive worker-src (Fallback: script-src).
Der Browser-Support ist breit (Chrome 40+, Firefox 44+, Safari 11.1+, Edge 17+). In iOS-WebViews anderer Apps gibt es teils Einschränkungen.

Siehe auch

Navigator NavigationDestination.key Navigator.devicePosture Navigator.deviceMemory Navigator.permissions