ServiceWorkerGlobalScope.serviceWorker — Eigenschaft · JavaScript-Referenz

Signatur

get ServiceWorkerGlobalScope.serviceWorker

Beschreibung

Die Eigenschaft serviceWorker ist nur innerhalb eines Service-Worker-Skripts verfügbar, also über self.serviceWorker. Sie gibt das ServiceWorker-Objekt zurück, das diesen Service Worker repräsentiert. Es ist dasselbe Objekt, das Seiten z. B. über navigator.serviceWorker.controller oder registration.active sehen, nur aus der Sicht des Workers selbst.

Nützlich ist das vor allem, wenn der Worker seinen eigenen Lebenszyklus beobachten will. Über self.serviceWorker.state fragt er ab, ob er gerade "installing", "installed", "activating", "activated" oder "redundant" ist. Über self.serviceWorker.scriptURL findet er die URL seines eigenen Skripts heraus. Früher musste man dafür umständlich self.registration.installing, waiting und active durchgehen und mit dem eigenen Skript abgleichen.

Typische Einsatzfälle sind Protokollierung und Fehlersuche, das Reagieren auf statechange (z. B. Aufräumen, wenn der Worker "redundant" wird) und Versionskennungen, die aus der Skript-URL gelesen werden (etwa sw.js?v=3).

Rückgabewert

Typ

ServiceWorker

Beschreibung

Das ServiceWorker-Objekt des aktuell ausgeführten Service Workers, mit den Eigenschaften state und scriptURL, dem Event statechange und der Methode postMessage().

Beispiele

Eigenen Zustand und eigene Skript-URL protokollieren

// sw.js
self.addEventListener('install', (event) => {
  const sw = self.serviceWorker;
  console.log('Skript:', sw.scriptURL);
  console.log('Zustand:', sw.state);
});

self.addEventListener('activate', () => {
  console.log('Zustand nach Aktivierung:', self.serviceWorker.state);
});

Skript: https://example.com/sw.js Zustand: installing Zustand nach Aktivierung: activating

Auf Zustandswechsel des eigenen Workers reagieren

// sw.js
self.serviceWorker.addEventListener('statechange', () => {
  const { state } = self.serviceWorker;
  console.log('Neuer Zustand:', state);

  if (state === 'redundant') {
    // Worker wurde ersetzt oder die Installation ist fehlgeschlagen
    console.warn('Dieser Service Worker wird nicht mehr verwendet.');
  }
});

Neuer Zustand: installed Neuer Zustand: activating Neuer Zustand: activated

Version aus der Skript-URL lesen, mit Feature-Erkennung

// Registrierung auf der Seite: navigator.serviceWorker.register('/sw.js?v=3')
// sw.js
const getVersion = () => {
  if (!('serviceWorker' in self)) return 'unbekannt'; // ältere Browser
  const url = new URL(self.serviceWorker.scriptURL);
  return url.searchParams.get('v') ?? 'ohne Version';
};

const CACHE_NAME = `app-cache-v${getVersion()}`;

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(['/', '/app.js']))
  );
});

console.log(CACHE_NAME);

app-cache-v3

// Wichtig · Fallstricke

Nur im Service-Worker-Kontext: Im Fenster heißt navigator.serviceWorker etwas ganz anderes, nämlich einen ServiceWorkerContainer. Die beiden sollte man nicht verwechseln.
Relativ neu: Ältere Browser kennen die Eigenschaft nicht. Deshalb vorher mit 'serviceWorker' in self prüfen und notfalls auf self.registration.installing, waiting oder active ausweichen.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden ignoriert, im strikten Modus lösen sie einen TypeError aus.
state ist eine Momentaufnahme. Wer auf spätere Wechsel reagieren will, braucht das Event statechange. Beim Start des Skripts ist der Zustand meist "parsed" oder "installing".
Der Aufruf self.serviceWorker.postMessage() schickt eine Nachricht an den eigenen Worker. Das ist selten sinnvoll. Nachrichten an Seiten laufen über self.clients.

Siehe auch

ServiceWorkerGlobalScope.cookieStore ServiceWorkerGlobalScope.clients ServiceWorkerGlobalScope.registration WorkerGlobalScope.navigator WorkerGlobalScope.scheduler