Signatur
Beschreibung
Die Eigenschaft tag einer Notification-Instanz gibt die Zeichenkette zurück, die beim Erzeugen über das Options-Objekt ({ tag: "..." }) übergeben wurde. Fehlt die Option, ist der Wert ein leerer String "".
Wofür man das braucht: Mit dem Tag kann man Benachrichtigungen gruppieren und ersetzen. Zeigt eine Seite eine neue Benachrichtigung mit demselben Tag an wie eine, die noch sichtbar ist, ersetzt der Browser die alte, statt eine zweite anzuzeigen. Das verhindert, dass sich z. B. bei einem Chat oder einem Download-Fortschritt Dutzende Meldungen stapeln.
Im Service-Worker-Kontext ist das Tag außerdem der wichtigste Filter für ServiceWorkerRegistration.getNotifications({ tag }). So lassen sich bestimmte Benachrichtigungen wiederfinden, schließen oder im notificationclick-Handler unterscheiden.
Die Eigenschaft ist schreibgeschützt. Wer das Tag ändern will, muss eine neue Benachrichtigung erzeugen.
Rückgabewert
"" zurückgegeben.Beispiele
Tag setzen und auslesen
const zeigeHinweis = async () => {
const erlaubnis = await Notification.requestPermission();
if (erlaubnis !== 'granted') return;
const n = new Notification('Neue Nachricht', {
body: 'Anna: Bist du heute im Büro?',
tag: 'chat-anna'
});
console.log(n.tag);
};
zeigeHinweis();Bestehende Benachrichtigung ersetzen statt stapeln
// Fortschrittsanzeige: jede neue Meldung ersetzt die alte mit gleichem Tag
const meldeFortschritt = (prozent) => {
const n = new Notification('Upload läuft', {
body: `${prozent} % abgeschlossen`,
tag: 'upload-42',
renotify: false // kein erneuter Ton/Vibration
});
return n;
};
if (Notification.permission === 'granted') {
[25, 50, 75, 100].forEach((p, i) =>
setTimeout(() => meldeFortschritt(p), i * 1000)
);
}Im Service Worker nach Tag filtern und schließen
// service-worker.js
self.addEventListener('push', (event) => {
const daten = event.data?.json() ?? {};
event.waitUntil((async () => {
if (daten.typ === 'gelesen') {
// Alle Benachrichtigungen dieses Chats schließen
const offen = await self.registration.getNotifications({ tag: `chat-${daten.chatId}` });
offen.forEach((n) => n.close());
return;
}
await self.registration.showNotification(daten.titel, {
body: daten.text,
tag: `chat-${daten.chatId}`
});
})());
});
self.addEventListener('notificationclick', (event) => {
console.log('Geklickt:', event.notification.tag);
event.notification.close();
});Standardwert ohne Tag
if (Notification.permission === 'granted') {
const n = new Notification('Hallo');
console.log(JSON.stringify(n.tag));
}// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
n.tag = 'x'wird im nicht-strikten Modus stillschweigend ignoriert. Im strikten Modus wirft sie einenTypeError. - Ersetzen ohne erneuten Hinweis: Wird eine Benachrichtigung über dasselbe Tag ersetzt, spielt der Browser standardmäßig keinen Ton und keine Vibration ab. Soll der Nutzer erneut darauf aufmerksam werden, setzt man
renotify: true. Das ist nur zusammen mit einem nicht-leerentagerlaubt, sonst wirft der Konstruktor einenTypeError.renotifywird zudem nicht von allen Browsern unterstützt (z. B. nicht von Firefox und Safari). - Gültigkeitsbereich: Tags gelten pro Origin. Gleiche Tags auf verschiedenen Websites stören sich also nicht gegenseitig.
- Plattformunterschiede: Wie das Ersetzen konkret aussieht, hängt vom Betriebssystem ab (Windows, macOS, Android). Unter macOS und iOS ist die Unterstützung eingeschränkt. Auf Android-Chrome funktioniert
new Notification()gar nicht. Dort muss manServiceWorkerRegistration.showNotification()verwenden. - Die Notifications-API funktioniert nur in sicheren Kontexten (HTTPS) und erst, nachdem der Nutzer die Erlaubnis erteilt hat.