ServiceWorkerGlobalScope: notificationclose — Ereignis · JavaScript-Referenz

Signatur

self.addEventListener("notificationclose", handler)

Beschreibung

Das Ereignis notificationclose gehört zu ServiceWorkerGlobalScope und wird ausgelöst, sobald der Benutzer eine persistente Benachrichtigung schließt, also wegwischt, auf „X“ klickt oder „Alle löschen“ wählt. Persistent heißt: Die Benachrichtigung wurde über ServiceWorkerRegistration.showNotification() angezeigt. Das Ereignisobjekt ist ein NotificationEvent. Seine Eigenschaft notification enthält die geschlossene Benachrichtigung samt tag und data.

Typische Einsätze sind Analysen (Wie oft werden Benachrichtigungen ignoriert?), das Abgleichen von Zuständen (eine Erinnerung gilt als „gesehen“) und das Aufräumen von zwischengespeicherten Daten, die zur Benachrichtigung gehören. Man registriert den Handler mit self.addEventListener("notificationclose", handler) oder über die Eigenschaft self.onnotificationclose = handler.

Der Browser kann den Service Worker jederzeit beenden. Asynchrone Arbeit wie fetch() oder IndexedDB-Zugriffe muss man deshalb mit event.waitUntil(promise) absichern. Nur so bleibt der Worker aktiv, bis das Promise erfüllt ist.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"notificationclose"`.
$handler Pflicht	(event: NotificationEvent) => void		Callback, der ein `NotificationEvent` erhält. Wichtige Eigenschaften: `event.notification` (die geschlossene `Notification`) und `event.waitUntil()`. `event.action` ist hier immer eine leere Zeichenkette.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once`, bzw. `useCapture`, wenn ein boolescher Wert übergeben wird.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Das Ereignisobjekt ist ein NotificationEvent.

Beispiele

Geschlossene Benachrichtigung protokollieren (addEventListener)

// sw.js
self.addEventListener("notificationclose", (event) => {
  const { tag, data } = event.notification;
  console.log(`Benachrichtigung "${tag}" wurde geschlossen`, data);
});

Benachrichtigung "news-42" wurde geschlossen { articleId: 42 }

Analyse-Ereignis an den Server senden mit waitUntil

// sw.js
self.addEventListener("notificationclose", (event) => {
  const { tag, data, timestamp } = event.notification;

  const report = fetch("/api/analytics/notification-dismissed", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      tag,
      campaign: data?.campaign ?? null,
      shownAt: timestamp,
      closedAt: Date.now()
    })
  }).catch((err) => console.warn("Tracking fehlgeschlagen:", err));

  // Service Worker aktiv halten, bis der Request fertig ist
  event.waitUntil(report);
});

Benachrichtigung anzeigen und Schließen per on-Property behandeln

// sw.js
self.addEventListener("push", (event) => {
  const payload = event.data?.json() ?? { title: "Neue Nachricht", id: 1 };
  event.waitUntil(
    self.registration.showNotification(payload.title, {
      body: "Tippen zum Öffnen",
      tag: `msg-${payload.id}`,
      data: { id: payload.id }
    })
  );
});

// Alternative zur addEventListener-Variante
self.onnotificationclose = (event) => {
  const id = event.notification.data?.id;
  event.waitUntil(
    caches.open("messages").then((cache) => cache.delete(`/messages/${id}`))
  );
};

// Handler wieder entfernen
// self.onnotificationclose = null;

// Wichtig · Fallstricke

Kein Ereignis bei Klick: Klickt der Benutzer die Benachrichtigung an, feuert notificationclick und nicht notificationclose. Das gilt auch dann, wenn die Benachrichtigung dabei verschwindet oder man notification.close() aufruft.
Programmatisches Schließen: Schließt der eigene Code die Benachrichtigung mit notification.close(), wird notificationclose laut Spezifikation nicht ausgelöst.
Nicht garantiert: Manche Plattformen melden das Schließen nicht zuverlässig, etwa wenn das Betriebssystem das Benachrichtigungszentrum leert, Benachrichtigungen ablaufen oder der Browser beendet ist. Kritische Logik sollte daher nicht allein von diesem Ereignis abhängen.
Asynchrone Arbeit immer in event.waitUntil() einbetten, sonst kann der Worker vorher beendet werden.
Kompatibilität: Chromium und Firefox unterstützen das Ereignis seit Langem. Safari unterstützt es ab 16 unter macOS, unter iOS/iPadOS erst ab 16.4 und nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden. Das Ereignis erfordert HTTPS (oder localhost) und die erteilte Berechtigung Notification.permission === \"granted\".
Nicht-persistente Benachrichtigungen, also solche, die mit new Notification() im Fenster erstellt wurden, lösen stattdessen das close-Ereignis am Notification-Objekt aus.

Siehe auch

ServiceWorkerGlobalScope: notificationclick ServiceWorkerRegistration.showNotification() NotificationEvent ExtendableEvent.waitUntil() ServiceWorkerGlobalScope: push Notification Notification: show