Notification: show — Ereignis · JavaScript-Referenz

Signatur

notification.addEventListener("show", handler)

Beschreibung

Das show-Ereignis gehört zum Notification-Interface der Notifications API. Es wird ausgelöst, wenn eine per new Notification() erzeugte Benachrichtigung vom Betriebssystem bzw. Browser tatsächlich angezeigt wird. Zwischen Konstruktor-Aufruf und Anzeige kann Zeit vergehen, z. B. wenn das System gerade den „Nicht stören“-Modus aktiv hat oder Benachrichtigungen in einer Warteschlange stehen.

Einen Handler registrierst du entweder mit notification.addEventListener("show", handler) oder über die Eigenschaft notification.onshow = handler. Das Ereignis ist ein einfaches Event ohne zusätzliche Eigenschaften; es ist nicht abbrechbar und steigt nicht auf (kein Bubbling).

Typische Anwendungsfälle: Anzeigezeitpunkt messen (Analytics), eine Benachrichtigung nach einer bestimmten Zeit automatisch mit notification.close() schließen oder im UI kennzeichnen, dass der Nutzer informiert wurde. Zusammen mit click, close und error deckt show den gesamten Lebenszyklus einer Benachrichtigung ab.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"show"`.
$handler Pflicht	(event: Event) => void		Callback, der beim Anzeigen aufgerufen wird. Erhält ein einfaches `Event`; `event.target` ist die `Notification`-Instanz.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `{ once: true }` oder `{ signal }`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Event-Objekt.

Beispiele

Anzeige per addEventListener protokollieren

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

  const n = new Notification("Neue Nachricht", {
    body: "Anna hat dir geschrieben.",
    tag: "chat-anna"
  });

  n.addEventListener("show", (event) => {
    console.log("Angezeigt:", event.target.title);
  }, { once: true });
};

document.querySelector("#benachrichtigen").addEventListener("click", zeigeHinweis);

Angezeigt: Neue Nachricht

Über onshow automatisch nach 5 Sekunden schließen

if (Notification.permission === "granted") {
  const n = new Notification("Upload abgeschlossen", {
    body: "bericht.pdf wurde hochgeladen."
  });

  n.onshow = () => {
    // Timer erst starten, wenn wirklich angezeigt
    setTimeout(() => n.close(), 5000);
  };

  n.onclose = () => console.log("Benachrichtigung geschlossen");
}

Benachrichtigung geschlossen

Verzögerung zwischen Erzeugung und Anzeige messen, Listener entfernen

const erstellt = performance.now();
const n = new Notification("Erinnerung", { body: "Meeting in 10 Minuten" });

const beiAnzeige = () => {
  const dauer = Math.round(performance.now() - erstellt);
  console.log(`Angezeigt nach ${dauer} ms`);
  n.removeEventListener("show", beiAnzeige);
};

n.addEventListener("show", beiAnzeige);
n.addEventListener("error", () => console.warn("Anzeige fehlgeschlagen"));

Angezeigt nach 12 ms

// Wichtig · Fallstricke

Nur für per Konstruktor erzeugte Benachrichtigungen: Benachrichtigungen aus einem Service Worker (ServiceWorkerRegistration.showNotification()) lösen kein show auf einer Notification-Instanz aus. Dort gibt es nur notificationclick und notificationclose im Service Worker.
Mobilgeräte: Chrome für Android erlaubt new Notification() nicht (wirft TypeError). Hier muss ein Service Worker verwendet werden, show steht damit nicht zur Verfügung.
Berechtigung: Ohne Notification.permission === "granted" wird keine Benachrichtigung angezeigt; statt show kommt dann in der Regel error. Die Berechtigung muss in modernen Browsern durch eine Nutzeraktion (z. B. Klick) angefragt werden.
Sicherer Kontext: Die Notifications API ist nur über HTTPS (oder localhost) verfügbar.
Zeitpunkt: Das Ereignis kann verzögert oder in manchen Systemkonfigurationen (z. B. „Nicht stören“, gebündelte Benachrichtigungen) gar nicht ausgelöst werden. Verlass dich für wichtige Programmlogik nicht allein darauf.
Registriere den Listener direkt nach dem Konstruktor-Aufruf im selben Task, sonst könntest du das Ereignis verpassen.

Siehe auch

Notification Notification: click Notification: close Notification: error Notification.requestPermission() ServiceWorkerRegistration.showNotification() FontFaceSet: loading