NotificationEvent.notification — Eigenschaft · JavaScript-Referenz

Signatur

NotificationEvent.notification

Beschreibung

Die Eigenschaft notification des Interfaces NotificationEvent gibt die Notification-Instanz zurück, mit der der Nutzer interagiert hat. Sie steht nur im Service-Worker-Kontext zur Verfügung, also in den Handlern für notificationclick und notificationclose. Benachrichtigungen dieser Art erzeugt man mit ServiceWorkerRegistration.showNotification().

Über das zurückgegebene Objekt kommt man an alle Daten, die beim Anzeigen mitgegeben wurden: title, body, tag, icon und vor allem data. Darin legt man typischerweise eine Ziel-URL oder eine ID ab, auf die der Service Worker nach dem Klick reagiert. Mit notification.close() schließt man die Benachrichtigung selbst. Ein Klick allein schließt sie auf vielen Plattformen nämlich nicht.

Klickt der Nutzer auf einen Aktions-Button (definiert über die Option actions), steht dessen Kennung nicht in notification, sondern in event.action. Aus beiden Eigenschaften zusammen ergibt sich, was der Nutzer genau wollte.

Rückgabewert

Typ

Notification

Beschreibung

Das Notification-Objekt, das angeklickt oder geschlossen wurde. Die Eigenschaft ist schreibgeschützt.

Beispiele

Benachrichtigung beim Klick schließen und Seite öffnen

// sw.js
self.addEventListener('notificationclick', (event) => {
  const notification = event.notification;
  console.log('Angeklickt:', notification.title);

  // Klick schließt die Benachrichtigung nicht automatisch
  notification.close();

  event.waitUntil(clients.openWindow(notification.data?.url ?? '/'));
});

Angeklickt: Neue Nachricht

Vorhandenen Tab fokussieren statt neuen zu öffnen

// sw.js
self.addEventListener('notificationclick', (event) => {
  const { notification } = event;
  notification.close();
  const zielUrl = new URL(notification.data.url, self.location.origin).href;

  event.waitUntil((async () => {
    const fenster = await clients.matchAll({ type: 'window', includeUncontrolled: true });
    const vorhanden = fenster.find((c) => c.url === zielUrl);
    if (vorhanden) {
      await vorhanden.focus();
    } else {
      await clients.openWindow(zielUrl);
    }
  })());
});

// Anzeigen (z. B. im push-Handler):
// self.registration.showNotification('Neue Nachricht', {
//   body: 'Anna hat dir geschrieben',
//   tag: 'chat-42',
//   data: { url: '/chat/42' }
// });

Aktions-Buttons und Schließen auswerten

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

  if (action === 'archivieren') {
    event.waitUntil(fetch(`/api/mails/${notification.data.id}/archive`, { method: 'POST' }));
  } else {
    event.waitUntil(clients.openWindow(`/mail/${notification.data.id}`));
  }
});

self.addEventListener('notificationclose', (event) => {
  // Nutzer hat die Benachrichtigung verworfen
  console.log('Verworfen:', event.notification.tag);
});

Verworfen: mail-1337

// Wichtig · Fallstricke

Nur im Service Worker: NotificationEvent gibt es ausschließlich im Service-Worker-Scope. Mit new Notification() im Fenster erzeugte Benachrichtigungen verwendet man stattdessen mit notification.onclick.
Nicht automatisch geschlossen: Ruft man event.notification.close() nicht auf, bleibt die Benachrichtigung je nach Plattform stehen.
waitUntil verwenden: Asynchrone Arbeit wie clients.openWindow() gehört in event.waitUntil(), sonst kann der Browser den Service Worker vorher beenden. openWindow() und focus() sind außerdem nur während der Nutzerinteraktion erlaubt, also direkt im Klick-Handler.
data ist eine Kopie: notification.data wird per Structured Clone gespeichert. Funktionen oder DOM-Knoten lassen sich darin nicht ablegen.
Kompatibilität: Safari unterstützt die Eigenschaft auf iOS/iPadOS erst ab Version 16.4 und dort nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden. Voraussetzung sind ein sicherer Kontext (HTTPS) und die Berechtigung über Notification.requestPermission().

Siehe auch

Notification Notification.close() Notification.data NotificationEvent.action AnimationEvent.animation