WorkerNavigator.serviceWorker — Eigenschaft · JavaScript-Referenz

Signatur

get WorkerNavigator.serviceWorker

Beschreibung

Die schreibgeschützte Eigenschaft serviceWorker von WorkerNavigator ist das Gegenstück zu navigator.serviceWorker im Fenster. Sie liefert innerhalb eines Workers (z. B. eines Dedicated Workers) den ServiceWorkerContainer des zugehörigen Ursprungs. Darüber lassen sich Service Worker registrieren, bestehende Registrierungen abfragen und der Zustand der Service Worker prüfen, ohne dafür den Haupt-Thread zu belasten.

Das ist praktisch, wenn Hintergrundlogik wie Synchronisation, Cache-Verwaltung oder Diagnose komplett in einem Worker läuft und dort wissen muss, ob und mit welchem Scope ein Service Worker aktiv ist. Typische Aufrufe sind getRegistration(), getRegistrations(), register() und das Promise ready.

Die Eigenschaft gibt es nur in sicheren Kontexten (HTTPS oder localhost). Weil sie nicht in jedem Browser und jedem Worker-Typ zur Verfügung steht, solltest du sie vorher immer mit 'serviceWorker' in navigator prüfen.

Rückgabewert

Typ

ServiceWorkerContainer

Beschreibung

Der ServiceWorkerContainer des Ursprungs. Es wird immer dasselbe Objekt zurückgegeben ([SameObject]).

Beispiele

Unterstützung im Worker prüfen

// worker.js
if ('serviceWorker' in navigator) {
  console.log('ServiceWorkerContainer verfügbar:', navigator.serviceWorker);
} else {
  console.log('Service Worker in diesem Worker-Kontext nicht verfügbar');
}

ServiceWorkerContainer verfügbar: ServiceWorkerContainer {…}

Aktive Registrierung aus dem Worker abfragen

// worker.js
const checkRegistration = async () => {
  if (!('serviceWorker' in navigator)) return null;
  const reg = await navigator.serviceWorker.getRegistration('/');
  return reg
    ? { scope: reg.scope, active: reg.active?.state ?? 'keiner' }
    : null;
};

checkRegistration().then((info) => postMessage(info));

{ scope: 'https://example.com/', active: 'activated' }

Haupt-Thread fragt Registrierungen über einen Worker ab

// main.js
const worker = new Worker('sw-info-worker.js');
worker.addEventListener('message', ({ data }) => {
  console.log('Registrierte Scopes:', data);
});

// sw-info-worker.js
const listScopes = async () => {
  const regs = await navigator.serviceWorker.getRegistrations();
  postMessage(regs.map((r) => r.scope));
};
listScopes().catch((err) => postMessage({ fehler: err.message }));

Registrierte Scopes: ['https://example.com/', 'https://example.com/app/']

Auf einen aktiven Service Worker warten

// worker.js
const waitForSW = async () => {
  const reg = await navigator.serviceWorker.ready;
  console.log('Service Worker bereit für Scope:', reg.scope);
};
waitForSW();

Service Worker bereit für Scope: https://example.com/

// Wichtig · Fallstricke

Nur in sicheren Kontexten: Bei HTTP (außer localhost) ist die Eigenschaft undefined.
Kompatibilität: Wie gut WorkerNavigator.serviceWorker unterstützt wird, hängt vom Browser und vom Worker-Typ ab (Dedicated, Shared oder Service Worker). Prüfe deshalb immer vorher mit 'serviceWorker' in navigator.
ready kann ewig warten: Ist für den Scope nie ein Service Worker registriert, wird das Promise nie erfüllt. Setze bei Bedarf eine Zeitgrenze, zum Beispiel mit Promise.race().
Im Worker gibt es kein document. Die Verbindung zum „zugeordneten Dokument“ läuft über den Ursprung und den Client des Workers.
Service Worker sind ursprungsgebunden. Mit register() lassen sich nur Skripte desselben Ursprungs registrieren.

Siehe auch

Navigator.serviceWorker ServiceWorkerContainer WorkerNavigator ServiceWorkerRegistration ServiceWorkerContainer.getRegistration() ServiceWorkerContainer.ready ServiceWorkerGlobalScope.serviceWorker