Notification

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das Notification-Interface der Notifications API wird verwendet, um dem Nutzer Desktop-Benachrichtigungen zu konfigurieren und anzuzeigen.

Das Erscheinungsbild und die spezifische Funktionalität dieser Benachrichtigungen variiert je nach Plattform, aber im Allgemeinen bieten sie eine Möglichkeit, dem Nutzer asynchron Informationen bereitzustellen.

Konstruktor

Notification(): Erstellt eine neue Instanz des Notification-Objekts.

Statische Eigenschaften

Erbt auch Eigenschaften von seinem übergeordneten Interface, EventTarget.

Notification.permission Schreibgeschützt

Ein String, der die aktuelle Berechtigung zur Anzeige von Benachrichtigungen anzeigt. Mögliche Werte sind:

denied — Der Nutzer verweigert die Anzeige von Benachrichtigungen.
granted — Der Nutzer akzeptiert die Anzeige von Benachrichtigungen.
default — Die Entscheidung des Nutzers ist unbekannt und daher verhält sich der Browser so, als wäre der Wert verweigert.

Notification.maxActions Schreibgeschützt Experimentell

Die maximale Anzahl an Aktionen, die vom Gerät und dem User Agent unterstützt werden.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seinem übergeordneten Interface, EventTarget.

Notification.actions Schreibgeschützt Experimentell: Das Aktionsarray der Benachrichtigung, wie im options-Parameter des Konstruktors angegeben.
Notification.badge Schreibgeschützt: Ein String, der die URL eines Bildes enthält, das die Benachrichtigung repräsentieren soll, wenn nicht genügend Platz vorhanden ist, um die Benachrichtigung selbst anzuzeigen, wie z.B. in der Android-Benachrichtigungsleiste. Auf Android-Geräten sollte das Abzeichen Geräte bis zu einer 4-fachen Auflösung unterstützen, etwa 96 mal 96 px, und das Bild wird automatisch maskiert.
Notification.body Schreibgeschützt: Der Textkörper der Benachrichtigung, wie im options-Parameter des Konstruktors angegeben.
Notification.data Schreibgeschützt: Gibt einen strukturierten Klon der Benachrichtigungsdaten zurück.
Notification.dir Schreibgeschützt: Die Textausrichtung der Benachrichtigung, wie im options-Parameter des Konstruktors angegeben.
Notification.icon Schreibgeschützt: Die URL des Bildes, das als Icon der Benachrichtigung verwendet wird, wie im options-Parameter des Konstruktors angegeben.
Notification.image Schreibgeschützt Experimentell: Die URL eines Bildes, das als Teil der Benachrichtigung angezeigt werden soll, wie im options-Parameter des Konstruktors angegeben.
Notification.lang Schreibgeschützt: Der Sprachcode der Benachrichtigung, wie im options-Parameter des Konstruktors angegeben.
Notification.renotify Schreibgeschützt Experimentell: Gibt an, ob der Nutzer benachrichtigt werden soll, nachdem eine neue Benachrichtigung eine alte ersetzt hat.
Notification.requireInteraction Schreibgeschützt: Ein boolescher Wert, der anzeigt, dass eine Benachrichtigung aktiv bleiben soll, bis der Nutzer sie anklickt oder schließt, anstatt automatisch zu schließen.
Notification.silent Schreibgeschützt: Gibt an, ob die Benachrichtigung stumm sein soll — d.h. keine Töne oder Vibrationen, unabhängig von den Geräteeinstellungen.
Notification.tag Schreibgeschützt: Die ID der Benachrichtigung (falls vorhanden), wie im options-Parameter des Konstruktors angegeben.
Notification.timestamp Schreibgeschützt Experimentell: Gibt die Zeit an, zu der eine Benachrichtigung erstellt oder relevant ist (vergangen, gegenwärtig oder zukünftig).
Notification.title Schreibgeschützt: Der Titel der Benachrichtigung, wie im ersten Parameter des Konstruktors angegeben.
Notification.vibrate Schreibgeschützt Experimentell: Gibt ein Vibrationsmuster für Geräte mit Vibrationshardware an, um es zu emittieren.

Statische Methoden

Erbt auch Methoden von seinem übergeordneten Interface, EventTarget.

Notification.requestPermission(): Fordert die Erlaubnis des Nutzers an, um Benachrichtigungen anzuzeigen.

Instanz-Methoden

Erbt auch Methoden von seinem übergeordneten Interface, EventTarget.

Notification.close(): Schließt eine Benachrichtigungsinstanz programmgesteuert.

Ereignisse

Erbt auch Ereignisse von seinem übergeordneten Interface, EventTarget.

click: Wird ausgelöst, wenn der Nutzer auf die Benachrichtigung klickt.
close: Wird ausgelöst, wenn der Nutzer die Benachrichtigung schließt.
error: Wird ausgelöst, wenn die Benachrichtigung auf einen Fehler stößt.
show: Wird ausgelöst, wenn die Benachrichtigung angezeigt wird.

Beispiele

Angenommen, dieses einfache HTML:

html

<button>Notify me!</button>

Es ist möglich, eine Benachrichtigung wie folgt zu senden — hier präsentieren wir ein ziemlich ausführliches und vollständiges Set von Code, das Sie verwenden könnten, wenn Sie zuerst prüfen möchten, ob Benachrichtigungen unterstützt werden, dann prüfen, ob die Berechtigung für den aktuellen Ursprung zur Sendung von Benachrichtigungen erteilt wurde, dann ggf. die Erlaubnis anfordern, bevor eine Benachrichtigung gesendet wird.

document.querySelector("button").addEventListener("click", notifyMe);

function notifyMe() {
  if (!("Notification" in window)) {
    // Check if the browser supports notifications
    alert("This browser does not support desktop notification");
  } else if (Notification.permission === "granted") {
    // Check whether notification permissions have already been granted;
    // if so, create a notification
    const notification = new Notification("Hi there!");
    // …
  } else if (Notification.permission !== "denied") {
    // We need to ask the user for permission
    Notification.requestPermission().then((permission) => {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        const notification = new Notification("Hi there!");
        // …
      }
    });
  }

  // At last, if the user has denied notifications, and you
  // want to be respectful there is no need to bother them anymore.
}

Wir zeigen kein Live-Beispiel mehr auf dieser Seite, da Chrome und Firefox nicht länger zulassen, dass Berechtigungen für Benachrichtigungen von cross-origin <iframe>s angefordert werden, mit anderen Browsern, die folgen werden. Um ein funktionierendes Beispiel zu sehen, schauen Sie sich unser To-do-Listen-Beispiel an (siehe auch die laufende App).

Hinweis: Im obigen Beispiel erzeugen wir Benachrichtigungen als Reaktion auf eine Nutzeraktion (das Klicken auf einen Button). Dies ist nicht nur eine best practice — Sie sollten keine Nutzer mit Benachrichtigungen belästigen, denen sie nicht zugestimmt haben — sondern zukünftig werden Browser explizit Benachrichtigungen verbieten, die nicht als Reaktion auf eine Nutzeraktion ausgelöst werden. Firefox tut dies bereits seit Version 72, zum Beispiel.

Spezifikationen

Specification
Notifications API # api

Browser-Kompatibilität

Siehe auch

Verwendung der Notifications API