Notification.close() — Methode · JavaScript-Referenz

Signatur

Notification.prototype.close()

Beschreibung

Mit close() entfernt man eine über den Konstruktor new Notification() erzeugte Benachrichtigung programmatisch. Das ist nützlich, wenn eine Meldung nicht mehr aktuell ist, z. B. weil der Nutzer die betreffende Nachricht schon im Tab gelesen hat, weil ein Upload fertig ist oder weil die Meldung nach einer festen Zeit automatisch verschwinden soll.

Nach dem Aufruf feuert die Benachrichtigung das Ereignis close. Die Methode nimmt keine Argumente entgegen und gibt nichts zurück. Ist die Benachrichtigung schon geschlossen oder wurde sie noch nicht angezeigt, passiert einfach nichts. Einen Fehler gibt es in diesen Fällen nicht.

Bei Benachrichtigungen, die ein Service Worker über ServiceWorkerRegistration.showNotification() anzeigt, ruft man close() auf den Objekten auf, die registration.getNotifications() liefert, oder im Handler von notificationclick über event.notification.close().

Beispiele

Benachrichtigung nach 4 Sekunden automatisch schließen

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

  const n = new Notification('Upload abgeschlossen', {
    body: 'bericht.pdf wurde erfolgreich hochgeladen.'
  });

  n.addEventListener('close', () => console.log('Benachrichtigung geschlossen'));

  // Nach 4 Sekunden entfernen
  setTimeout(() => n.close(), 4000);
};

zeigeHinweis();

Benachrichtigung geschlossen

Schließen, sobald der Nutzer zum Tab zurückkehrt

let aktuelleMeldung = null;

const neueNachricht = (absender, text) => {
  if (Notification.permission !== 'granted' || !document.hidden) return;
  aktuelleMeldung = new Notification(`Neue Nachricht von ${absender}`, {
    body: text,
    tag: 'chat'
  });
};

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible' && aktuelleMeldung) {
    aktuelleMeldung.close(); // Meldung ist jetzt überflüssig
    aktuelleMeldung = null;
  }
});

Beim Klick fokussieren und schließen

const n = new Notification('Termin in 10 Minuten', { body: 'Team-Meeting, Raum 3' });

n.onclick = (event) => {
  event.preventDefault();
  window.focus();
  n.close();
};

Im Service Worker: alle Benachrichtigungen mit einem Tag schließen

// sw.js
self.addEventListener('message', async (event) => {
  if (event.data?.type === 'chat-gelesen') {
    const liste = await self.registration.getNotifications({ tag: 'chat' });
    liste.forEach((n) => n.close());
    console.log(`${liste.length} Benachrichtigung(en) geschlossen`);
  }
});

2 Benachrichtigung(en) geschlossen

// Wichtig · Fallstricke

Nur im sicheren Kontext: Die Notifications-API steht nur über HTTPS (oder localhost) zur Verfügung. Außerdem muss Notification.permission den Wert "granted" haben.
Referenz aufbewahren: Ohne das Notification-Objekt kann man eine Benachrichtigung nicht schließen. Im Hauptthread muss man es deshalb selbst speichern, im Service Worker bekommt man es über getNotifications() zurück.
Das close-Ereignis ist unzuverlässig: Je nach Browser und Betriebssystem feuert es nicht immer, etwa wenn das System die Meldung selbst ausblendet oder der Tab geschlossen wurde. Wichtige Logik sollte man nicht allein davon abhängig machen.
Automatisches Ausblenden: Viele Systeme blenden Benachrichtigungen ohnehin nach einigen Sekunden aus, lassen sie aber im Benachrichtigungscenter stehen. Erst close() entfernt sie auch dort. Bei requireInteraction: true bleibt eine Meldung sichtbar, bis der Nutzer reagiert oder close() aufgerufen wird.
Android/Chrome: Der Konstruktor new Notification() wirft dort einen TypeError. Man muss showNotification() über einen Service Worker verwenden und die Meldung dann wie oben gezeigt schließen.

Siehe auch

Notification Notification.requestPermission() Animation.pause() AudioData.close() Location.reload()