Der umfassende Leitfaden zur JavaScript Notifications API

Einführung in die Notifications API

Die Notifications API ermöglicht es einer Webanwendung, Nachrichten auf Systemebene außerhalb des Browser-Tabs anzuzeigen — die kleinen Pop-ups, die das Betriebssystem in der Ecke des Bildschirms einblendet. Da sie erscheinen, selbst wenn der Benutzer zu einem anderen Tab oder einer anderen App gewechselt hat, sind Benachrichtigungen ein direkter Weg, zeitkritische Informationen anzuzeigen: eine neue Chat-Nachricht, ein abgeschlossener Upload oder eine Kalender-Erinnerung.

Diese Seite behandelt den gesamten Lebenszyklus: die Verfügbarkeit der API prüfen, den Benutzer um Erlaubnis bitten, Benachrichtigungen erstellen und anpassen, auf Klicks reagieren und Benachrichtigungen über einen Service Worker anzeigen, damit sie auch nach dem Schließen der Seite funktionieren. Abschließend werden die Regeln erläutert, die verhindern, dass Benachrichtigungen lästig werden.

Einige wichtige Fakten vor der ersten Zeile Code:

• Benachrichtigungen erfordern eine ausdrückliche Genehmigung durch den Benutzer. Sie können keine anzeigen, solange die Berechtigung nicht granted ist.
• Sie funktionieren nur in einem sicheren Kontext (https:// oder http://localhost während der Entwicklung).
• Das Aussehen und Verhalten einer Benachrichtigung wird vom Betriebssystem gesteuert, nicht von Ihrem CSS. Sie liefern den Inhalt; das BS entscheidet, wie er dargestellt wird.

Unterstützung prüfen

Führen Sie immer eine Feature-Erkennung durch, bevor Sie die API verwenden, damit der Code in Umgebungen ohne Unterstützung (ältere Browser, einige eingebettete Webviews und serverseitiges Rendering) ordnungsgemäß degradiert:

if ('Notification' in window) {
  // The Notifications API is available
} else {
  console.log('This browser does not support notifications.');
}

Berechtigungen verstehen

Der Berechtigungsstatus wird in der statischen Eigenschaft Notification.permission gespeichert und hat einen von drei string-Werten:

• 'granted' — der Benutzer hat Benachrichtigungen erlaubt; Sie können sie anzeigen.
• 'denied' — der Benutzer hat sie blockiert; Aufrufe zum Anzeigen einer Benachrichtigung werden stillschweigend ignoriert.
• 'default' — der Benutzer hat noch keine Entscheidung getroffen, was wie 'denied' behandelt wird, bis Sie fragen.

Fordern Sie die Berechtigung mit Notification.requestPermission() an. Es gibt ein Promise zurück, das mit dem resultierenden Berechtigungs-string aufgelöst wird:

Notification.requestPermission().then((permission) => {
  console.log('Permission:', permission); // 'granted', 'denied', or 'default'
});

Ein robustes Muster prüft zunächst den aktuellen Status und fragt nur nach, wenn die Entscheidung noch 'default' ist:

async function ensurePermission() {
  if (Notification.permission === 'granted') {
    return true;
  }
  if (Notification.permission === 'denied') {
    return false; // can't re-prompt; the user must change it in browser settings
  }
  const permission = await Notification.requestPermission();
  return permission === 'granted';
}

Das auf Promises basierende Muster passt gut zu async/await und der allgemeinen Promise API.

Benachrichtigungen erstellen und anzeigen

Sobald die Berechtigung granted ist, erstellen Sie eine Benachrichtigung mit dem Notification-Konstruktor. Das erste Argument ist der Titel (erforderlich); das zweite ist ein optionales Optionsobjekt.

if (Notification.permission === 'granted') {
  new Notification('Hello, world!', {
    body: 'Here is the body of the notification.',
    icon: '/icon-192.png'
  });
}

Die Benachrichtigung erscheint in dem Moment, in dem das Objekt erstellt wird — Sie rufen keine separate „Anzeige"-Methode auf.

Häufige Optionen

Das Optionsobjekt akzeptiert viele Felder. Die nützlichsten:

new Notification('New message', {
  body: 'You have 1 unread message from Alex.',
  icon: '/icon-192.png',
  tag: 'chat-alex',          // replacing an earlier "Alex" notification
  data: { conversationId: 42 },
  requireInteraction: true
});

Benachrichtigungs-Spam mit tag vermeiden

Die Option tag ist der einfachste Weg, um das Stapeln von Duplikaten zu verhindern. Wenn drei Nachrichten von derselben Person eingehen, bedeutet die Wiederverwendung eines Tags, dass der Benutzer eine einzige, aktualisierte Benachrichtigung sieht und nicht drei:

function notifyUnread(count) {
  new Notification('Inbox', {
    body: `You have ${count} unread messages.`,
    tag: 'inbox-count' // each call updates the same notification
  });
}

Benachrichtigungs-Events

Eine Notification-Instanz löst Events aus, auf die Sie hören können. Das wichtigste ist click, das ausgelöst wird, wenn der Benutzer die Benachrichtigung aktiviert:

const notification = new Notification('Interactive Notification', {
  body: 'Click me to do something',
  icon: '/icon-192.png'
});

notification.onclick = (event) => {
  event.preventDefault();    // stop the browser's default focus behavior
  window.open('https://example.com', '_blank');
  notification.close();      // remove the notification once handled
};

Weitere verfügbare Events sind show (angezeigt), error (Anzeige fehlgeschlagen) und close (geschlossen). Sie können Handler auch mit addEventListener anhängen — das allgemeine Muster finden Sie unter Event-Handling im DOM.

Benachrichtigungen programmatisch schließen

Rufen Sie close() auf, um eine Benachrichtigung selbst zu schließen — praktisch, um einen „Wird heruntergeladen…"-Hinweis zu löschen, sobald der Download abgeschlossen ist:

const note = new Notification('Downloading…', { tag: 'download' });

// later, when the work is done:
setTimeout(() => note.close(), 4000);

Stille Benachrichtigungen

Setzen Sie silent: true, um eine Benachrichtigung ohne Ton oder Vibration anzuzeigen — geeignet für Hintergrundaktualisierungen mit niedriger Priorität:

new Notification('Silent Notification', {
  body: 'This is a silent notification.',
  silent: true
});

Benachrichtigungen über einen Service Worker

Der einfache Notification-Konstruktor funktioniert nur, solange eine Seite geöffnet ist. Um Benachrichtigungen anzuzeigen, wenn Ihre Website im Hintergrund läuft — oder als Reaktion auf eine Push-Nachricht vom Server — zeigen Sie sie von einem Service Worker aus mit ServiceWorkerRegistration.showNotification() an:

// In the page: ask the service worker to show a notification
navigator.serviceWorker.ready.then((registration) => {
  registration.showNotification('Background-capable notification', {
    body: 'This can be shown even after the tab is closed.',
    icon: '/icon-192.png',
    actions: [
      { action: 'open', title: 'Open' },
      { action: 'dismiss', title: 'Dismiss' }
    ]
  });
});

Service-Worker-Benachrichtigungen unterstützen auch Aktions-Buttons (das actions-array), was der einfache Konstruktor nicht tut. Behandeln Sie Klicks innerhalb des Service Workers selbst:

// In the service worker (sw.js)
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  if (event.action === 'open') {
    event.waitUntil(clients.openWindow('/inbox'));
  }
});

Dieser Service-Worker-Pfad ermöglicht echte Web-Push-Nachrichten: Ein Server sendet eine Nachricht, die Push API weckt den Service Worker, und der Worker ruft showNotification() auf.

Browser-Unterstützung und Einschränkungen

• Nur im sicheren Kontext. Benachrichtigungen benötigen HTTPS (oder localhost). Sie funktionieren nicht auf einfachen http://-Seiten.
• Berechtigungen sind dauerhaft. Wenn ein Benutzer 'denied' wählt, können Sie von JavaScript aus nicht erneut fragen — er muss die Einstellung in den Website-Einstellungen des Browsers ändern. Fragen Sie nicht ständig erneut.
• iOS Safari unterstützte Web-Benachrichtigungen historisch nicht; die Unterstützung kam erst für Websites, die als PWA zum Startbildschirm hinzugefügt wurden. Führen Sie immer eine Feature-Erkennung durch.
• Das Erscheinungsbild wird vom BS gesteuert. Verlassen Sie sich nicht auf eine bestimmte Größe, Position oder Gestaltung — konzentrieren Sie sich auf klare, kurze Texte.

Best Practices

Damit Benachrichtigungen eine Funktion bleiben, die Benutzer schätzen und nicht stummschalten:

• Kontextbezogen fragen, nach einer Geste. Fordern Sie die Berechtigung an, wenn der Benutzer gerade etwas getan hat, das Benachrichtigungen offensichtlich sinnvoll macht (z. B. Benachrichtigungen aktivieren), niemals beim ersten Laden.
• Ein „Nein" respektieren. Wenn die Berechtigung 'denied' ist, hören Sie auf. Wiederholte Aufforderungen sind technisch nicht einmal möglich, und Nörgeln in der UI untergräbt das Vertrauen.
• Zeitgemäß und relevant sein. Senden Sie nur Benachrichtigungen, die der Benutzer in diesem Moment wirklich haben möchte.
• Sparsam verwenden. Gruppieren Sie mit tag, bündeln Sie wo möglich und reservieren Sie Benachrichtigungen für wirklich Wichtiges — zu viele Benachrichtigungen gewöhnen Benutzer daran, sie zu ignorieren oder zu blockieren.
• Klicks bedeutungsvoll machen. Ein Klick sollte den Benutzer direkt zum relevanten Inhalt führen, nicht nur zur Startseite.

Fazit

Die JavaScript Notifications API ermöglicht es Web-Apps, Benutzer mit zeitkritischen Nachrichten auf Systemebene zu erreichen — sowohl während eine Seite geöffnet ist als auch, über einen Service Worker, nachdem sie geschlossen wurde. Der Ablauf ist immer gleich: Feature-Erkennung, Berechtigungsanfrage als Reaktion auf eine Benutzergeste, dann Benachrichtigungen mit dem Notification-Konstruktor (oder showNotification() in einem Worker) erstellen und auf Klick-Events reagieren. Kombiniert mit disziplinierter, sparsamer Nutzung werden Benachrichtigungen zu einer Funktion, die Benutzer aktiviert lassen, anstatt sie eilig abzuschalten.

Übungen