ServiceWorkerGlobalScope.registration — Eigenschaft · JavaScript-Referenz

Signatur

ServiceWorkerGlobalScope.registration

Beschreibung

Die schreibgeschützte Eigenschaft registration ist nur im globalen Kontext eines Service Workers verfügbar, also über self.registration. Sie gibt das ServiceWorkerRegistration-Objekt zurück, das zu diesem Service Worker gehört. Es ist dasselbe Objekt, das im Hauptthread navigator.serviceWorker.register() bzw. navigator.serviceWorker.ready liefert, nur eben aus Sicht des Workers selbst.

Über die Registrierung erreicht man viele wichtige Funktionen direkt aus dem Worker heraus:

Benachrichtigungen mit registration.showNotification() anzeigen, zum Beispiel im push-Event,
Push-Abonnements über registration.pushManager verwalten,
Geltungsbereich (registration.scope) und Lebenszyklus-Zustände (installing, waiting, active) abfragen,
sich mit registration.update() auf Updates prüfen oder mit registration.unregister() selbst abmelden,
Hintergrund-Synchronisation (registration.sync) und periodische Synchronisation nutzen, sofern der Browser das unterstützt.

Die Eigenschaft ist über die gesamte Lebensdauer des Workers verfügbar und gibt immer dasselbe Objekt zurück. Weil ein Service Worker keinen Zugriff auf navigator.serviceWorker hat, führt der Weg zu diesen Funktionen im Worker praktisch immer über self.registration.

Rückgabewert

Typ

ServiceWorkerRegistration

Beschreibung

Das Registrierungsobjekt des aktuellen Service Workers. Die Eigenschaft ist schreibgeschützt, Zuweisungen haben keine Wirkung.

Beispiele

Push-Nachricht als Benachrichtigung anzeigen

// sw.js
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? { title: 'Neuigkeit', body: 'Es gibt Neues!' };

  // showNotification gibt ein Promise zurück – waitUntil hält den Worker am Leben
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icons/icon-192.png',
      tag: 'news'
    })
  );
});

Geltungsbereich und Lebenszyklus beim Aktivieren protokollieren

// sw.js
self.addEventListener('activate', (event) => {
  const reg = self.registration;
  console.log('Scope:', reg.scope);
  console.log('Aktiver Worker:', reg.active?.state);
  console.log('Wartender Worker vorhanden:', reg.waiting !== null);
});

Scope: https://example.com/ Aktiver Worker: activating Wartender Worker vorhanden: false

Push-Abonnement prüfen und erneuern

// sw.js
self.addEventListener('pushsubscriptionchange', (event) => {
  event.waitUntil((async () => {
    const subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: 'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U'
    });

    await fetch('/api/push/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(subscription)
    });
  })());
});

Klick auf Benachrichtigung: alle offenen Benachrichtigungen schließen

// sw.js
self.addEventListener('notificationclick', (event) => {
  event.notification.close();

  event.waitUntil((async () => {
    const offene = await self.registration.getNotifications({ tag: 'news' });
    offene.forEach((n) => n.close());
    await clients.openWindow('/neuigkeiten');
  })());
});

// Wichtig · Fallstricke

Nur im Service-Worker-Kontext: Im Fenster oder in normalen Web Workern gibt es self.registration nicht. Im Hauptthread holt man die Registrierung stattdessen über navigator.serviceWorker.ready oder navigator.serviceWorker.getRegistration().
waitUntil nicht vergessen: Methoden wie showNotification() oder update() geben Promises zurück. Ohne event.waitUntil() kann der Browser den Worker beenden, bevor die Aktion fertig ist. In Chrome erscheint dann bei Push-Events unter Umständen eine Standardbenachrichtigung („Diese Website wurde im Hintergrund aktualisiert“).
Berechtigungen: showNotification() klappt nur, wenn der Nutzer Benachrichtigungen erlaubt hat. Andernfalls wird das Promise mit einem TypeError abgelehnt.
Nicht alle Eigenschaften sind überall verfügbar: registration.sync (Background Sync) und registration.periodicSync gibt es nur in Chromium-Browsern. Vor der Nutzung mit 'sync' in self.registration prüfen.
Service Worker setzen einen sicheren Kontext voraus (HTTPS oder localhost).
Seit neueren Spezifikationen gibt es außerdem self.serviceWorker, das direkt den eigenen ServiceWorker liefert. Diese Eigenschaft ist noch nicht in allen Browsern verfügbar, self.registration dagegen schon.

Siehe auch

PaintWorkletGlobalScope.devicePixelRatio ServiceWorkerGlobalScope.clients ServiceWorkerGlobalScope.cookieStore ServiceWorkerGlobalScope.serviceWorker WorkerGlobalScope.location