Notification.title — Eigenschaft · JavaScript-Referenz

Signatur

Notification.prototype.title

Beschreibung

Die Instanz-Eigenschaft title einer Notification gibt den Titel als string zurück, also genau den Text, der beim Erzeugen als erster Parameter an new Notification(title, options) bzw. an ServiceWorkerRegistration.prototype.showNotification(title, options) übergeben wurde. Das System zeigt diesen Titel meist fett oben in der Benachrichtigung an.

Gebraucht wird die Eigenschaft vor allem in Event-Handlern wie click, close oder show, wenn man wissen will, welche Benachrichtigung ausgelöst hat, etwa für Logging, Analyse oder zum Weiterleiten auf die passende Seite. In Service Workern erhält man über event.notification.title im notificationclick-Event Zugriff darauf.

Die Eigenschaft lässt sich nur lesen. Wer den Titel ändern will, muss eine neue Benachrichtigung erzeugen. Mit derselben tag-Option ersetzt diese die alte, statt sich zusätzlich daneben einzureihen.

Rückgabewert

Typ

string

Beschreibung

Der Titel der Benachrichtigung, wie er beim Erzeugen angegeben wurde. Hat man nichts übergeben, ist es in der Regel ein leerer String.

Beispiele

Titel einer neuen Benachrichtigung auslesen

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

  const n = new Notification('Neue Nachricht', {
    body: 'Anna: Treffen wir uns um 15 Uhr?',
    tag: 'chat-anna'
  });

  console.log(n.title);
};

document.querySelector('#notify').addEventListener('click', zeigeHinweis);

Neue Nachricht

Titel im click-Handler für Logging nutzen

const n = new Notification('Build fehlgeschlagen', {
  body: 'Pipeline #482 ist rot.',
  data: { url: '/ci/482' }
});

n.addEventListener('click', (event) => {
  const notification = event.currentTarget;
  console.log(`Geklickt: "${notification.title}"`);
  window.focus();
  window.location.href = notification.data.url;
  notification.close();
});

Geklickt: "Build fehlgeschlagen"

Im Service Worker: event.notification.title

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

  event.waitUntil(
    clients.openWindow(`/inbox?quelle=${encodeURIComponent(title)}`)
  );
});

Schreibschutz: Zuweisung wird ignoriert

const n = new Notification('Original');
n.title = 'Geändert'; // ohne Wirkung (im strict mode TypeError)
console.log(n.title);

Original

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wird ohne Meldung ignoriert, im Strict Mode (auch in ES-Modulen) wirft sie einen TypeError. Einen anderen Titel bekommt man nur mit einer neuen Benachrichtigung. Mit gleichem tag ersetzt sie die alte.
Sicherer Kontext: Die Notifications-API gibt es nur über HTTPS (oder localhost). Außerdem muss Notification.permission gleich 'granted' sein, sonst erscheint keine Benachrichtigung.
Mobil: Chrome für Android erlaubt den Konstruktor new Notification() nicht (TypeError). Dort muss man registration.showNotification() im Service Worker nutzen. Safari auf iOS unterstützt Benachrichtigungen erst ab 16.4 und nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden.
Darstellung: Wie der Titel angezeigt wird und ab welcher Länge er abgeschnitten wird, entscheidet das Betriebssystem. Wichtige Informationen gehören deshalb an den Anfang.
Sicherheit: Der Titel wird als reiner Text angezeigt, HTML wird nicht ausgewertet. Nutzt man title später in eigenem DOM-Code (etwa per innerHTML), muss man ihn trotzdem maskieren, wenn er von Nutzern stammt.

Siehe auch

Notification Notification.body Notification.tag FontFace.variationSettings Notification.badge