Notification: click — Ereignis · JavaScript-Referenz

Signatur

notification.addEventListener("click", handler)

Beschreibung

Das click-Ereignis der Notification-Schnittstelle wird ausgelöst, sobald der Benutzer auf eine angezeigte Benachrichtigung klickt. Einen Handler registrierst du entweder mit notification.addEventListener("click", handler) oder über die Eigenschaft notification.onclick = handler. Das Ereignis ist ein einfaches Event, es wird nicht weitergereicht (bubbelt nicht) und lässt sich abbrechen.

Üblich ist, damit das zugehörige Fenster bzw. den Tab in den Vordergrund zu holen (window.focus()), zu einer bestimmten Ansicht zu wechseln, etwa zum Chat oder zum Ticket, und die Benachrichtigung danach mit notification.close() zu schließen. Die Standardaktion des Browsers besteht meist darin, den Ursprungs-Tab zu fokussieren. Mit event.preventDefault() unterdrückst du das.

Wichtig: Das Ereignis gibt es nur für Benachrichtigungen, die im Seitenkontext mit dem Konstruktor new Notification() erzeugt wurden. Wurde die Benachrichtigung über ServiceWorkerRegistration.showNotification() angezeigt (das ist z. B. bei Push-Nachrichten Pflicht), musst du stattdessen im Service Worker auf das Ereignis notificationclick hören.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignistyp, hier immer `"click"`.
$handler Pflicht	(event: Event) => void		Callback, der beim Klick aufgerufen wird. `event.target` verweist auf die `Notification`-Instanz.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event-Objekt übergeben.

Beispiele

Klick fokussiert den Tab und öffnet eine Detailansicht

const showMessageNotification = async (message) => {
  if (!('Notification' in window)) return;
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return;

  const notification = new Notification(`Neue Nachricht von ${message.from}`, {
    body: message.text,
    tag: `chat-${message.id}`,
    data: { url: `/chat/${message.id}` }
  });

  notification.addEventListener('click', (event) => {
    event.preventDefault(); // Standard-Fokussierung selbst übernehmen
    window.focus();
    location.assign(notification.data.url);
    notification.close();
  });
};

showMessageNotification({ id: 42, from: 'Anna', text: 'Hast du kurz Zeit?' });

Alternative mit der onclick-Eigenschaft

const notification = new Notification('Build fertig', {
  body: 'Das Deployment wurde erfolgreich abgeschlossen.'
});

notification.onclick = () => {
  console.log('Benachrichtigung angeklickt');
  window.focus();
  notification.close();
};

// Handler wieder entfernen:
// notification.onclick = null;

Benachrichtigung angeklickt

Listener mit removeEventListener wieder entfernen

const notification = new Notification('Erinnerung', { body: 'Meeting in 5 Minuten' });

const handleClick = () => {
  console.log('Zum Kalender wechseln');
  window.focus();
  notification.close();
};

notification.addEventListener('click', handleClick);

// Nach 30 Sekunden nicht mehr reagieren und schließen
setTimeout(() => {
  notification.removeEventListener('click', handleClick);
  notification.close();
}, 30_000);

Zum Kalender wechseln

Gegenstück im Service Worker: notificationclick

// sw.js – bei showNotification() gibt es kein click auf der Instanz
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then((windowClients) => {
      const client = windowClients.find((c) => c.url.includes('/inbox'));
      return client ? client.focus() : clients.openWindow('/inbox');
    })
  );
});

// Wichtig · Fallstricke

Nur für new Notification(): Benachrichtigungen, die über ServiceWorkerRegistration.showNotification() angezeigt werden, lösen auf der Instanz kein click aus. Nutze dafür notificationclick im Service Worker.
Android/Chrome mobil: Dort wirft der Konstruktor new Notification() einen TypeError. Auf Mobilgeräten führt also kein Weg am Service Worker vorbei.
Lebensdauer: Wird die Seite geschlossen oder neu geladen, geht der Handler verloren. Ein späterer Klick auf eine noch sichtbare Benachrichtigung kommt dann nicht mehr an.
Fokus und Pop-ups: window.focus() funktioniert nicht in jedem Browser zuverlässig. window.open() ist im Handler zwar meist als Benutzeraktion erlaubt, Pop-up-Blocker können sich aber unterschiedlich verhalten.
Voraussetzungen: Die Seite muss in einem sicheren Kontext laufen (HTTPS), und die Berechtigung muss erteilt sein (Notification.permission === \"granted\"). Frage die Berechtigung nur nach einer Benutzeraktion an.
Sicherheit: Werte aus notification.data, z. B. URLs, vor der Navigation prüfen, damit keine offene Weiterleitung auf fremde Seiten entsteht.
Safari unterstützt die Web-Notifications-API unter iOS erst ab 16.4 und dort nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden.

Siehe auch

Notification Notification.prototype.close() ServiceWorkerRegistration.prototype.showNotification() Notification: close Notification: error