Notification.data — Eigenschaft · JavaScript-Referenz

Signatur

Notification.data

Beschreibung

Mit Notification.data hängst du beliebige eigene Daten an eine Benachrichtigung an, etwa eine Ziel-URL, eine Nachrichten-ID oder den Typ eines Ereignisses. Die Daten werden beim Aufruf von new Notification(title, { data }) oder ServiceWorkerRegistration.showNotification(title, { data }) übergeben und stehen danach über die Eigenschaft data wieder zur Verfügung.

Gebraucht wird das vor allem in Klick-Handlern. Klickt jemand auf die Benachrichtigung, liest du im click-Handler bzw. im Service-Worker-Ereignis notificationclick über event.notification.data aus, welche Seite geöffnet oder welche Aktion ausgeführt werden soll. So musst du keine eigene Zuordnung von Benachrichtigung zu Daten verwalten.

Der Wert wird mit dem Structured-Clone-Algorithmus kopiert. Erlaubt sind also Objekte, Arrays, Date, Map, Set, Blob und Ähnliches. Funktionen, DOM-Knoten und Klasseninstanzen samt ihrer Prototypen lassen sich nicht übernehmen. Die Eigenschaft ist schreibgeschützt: Änderungen am zurückgegebenen Objekt verändern die gespeicherten Daten der Benachrichtigung nicht.

Rückgabewert

Typ

any

Beschreibung

Ein strukturierter Klon des Werts aus der Option data. Wurde keine Option data angegeben, ist der Wert null.

Beispiele

Daten anhängen und beim Klick auswerten

const zeigeHinweis = async () => {
  const erlaubnis = await Notification.requestPermission();
  if (erlaubnis !== 'granted') return;

  const n = new Notification('Neue Nachricht von Anna', {
    body: 'Hast du heute Zeit?',
    data: { url: '/chat/42', nachrichtId: 42 }
  });

  n.addEventListener('click', () => {
    console.log(n.data);
    window.focus();
    location.href = n.data.url;
  });
};

zeigeHinweis();

{ url: '/chat/42', nachrichtId: 42 }

Im Service Worker: notificationclick mit data

// sw.js
self.addEventListener('push', (event) => {
  const payload = event.data?.json() ?? {};
  event.waitUntil(
    self.registration.showNotification(payload.titel ?? 'Update', {
      body: payload.text,
      data: { url: payload.url ?? '/' }
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const { url } = event.notification.data;
  event.waitUntil(clients.openWindow(url));
});

Strukturierter Klon: data ist eine Kopie

const original = { zaehler: 1, erstellt: new Date() };
const n = new Notification('Test', { data: original });

original.zaehler = 99;
console.log(n.data.zaehler);          // Kopie bleibt unverändert
console.log(n.data.erstellt instanceof Date);
console.log(n.data === n.data);       // gleiches Objekt bei jedem Zugriff?

const ohneDaten = new Notification('Leer');
console.log(ohneDaten.data);

1 true true null

// Wichtig · Fallstricke

Nicht klonbare Werte: Funktionen, DOM-Knoten oder Symbole in data lösen beim Erzeugen der Benachrichtigung einen DataCloneError aus. Übergib nur einfache, serialisierbare Daten.
Klasseninstanzen verlieren ihren Prototyp: Nach dem Klonen bleibt nur ein einfaches Objekt übrig, eigene Methoden sind danach nicht mehr aufrufbar.
Schreibgeschützt: Eine Zuweisung wie n.data = … bleibt wirkungslos (im Strict Mode gibt es einen TypeError). Andere Daten lassen sich nur mit einer neuen Benachrichtigung setzen.
Größe: Halte data klein. Manche Browser speichern Benachrichtigungen dauerhaft, damit sie z. B. mit getNotifications() wieder abrufbar sind.
Kompatibilität: Wird von allen modernen Desktop-Browsern unterstützt. Auf Android (Chrome) lassen sich Benachrichtigungen nur über ServiceWorkerRegistration.showNotification() anzeigen, der Konstruktor new Notification() wirft dort einen Fehler. Safari auf iOS unterstützt Benachrichtigungen erst ab 16.4, und nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden.
Sicherheit: Werte aus Push-Nachrichten, die in data landen (z. B. URLs), solltest du vor clients.openWindow() prüfen, damit niemand auf fremde Seiten umgeleitet wird (Open Redirect).

Siehe auch

Notification ServiceWorkerRegistration.showNotification() Notification.requestPermission() MediaSession.metadata Notification.dir