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 Desktop-Benachrichtigungen für den Benutzer zu konfigurieren und anzuzeigen.

Das Erscheinungsbild und die spezifische Funktionalität dieser Benachrichtigungen variieren je nach Plattform, bieten jedoch in der Regel eine Möglichkeit, dem Benutzer asynchron Informationen bereitzustellen.

EventTarget Notification

Konstruktor

Notification()

Erstellt eine neue Instanz des Notification-Objekts.

Statische Eigenschaften

Erbt auch Eigenschaften von seiner Elternschnittstelle, EventTarget.

Notification.permission Schreibgeschützt

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

  • denied — Der Benutzer lehnt es ab, Benachrichtigungen anzuzeigen.
  • granted — Der Benutzer akzeptiert die Anzeige von Benachrichtigungen.
  • default — Die Wahl des Benutzers ist unbekannt, und der Browser verhält sich so, als wäre der Wert auf denied gesetzt.
Notification.maxActions Schreibgeschützt Experimentell

Die maximale Anzahl von Aktionen, die vom Gerät und der Benutzer-Agent unterstützt werden.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seiner Elternschnittstelle, EventTarget.

Notification.actions Schreibgeschützt Experimentell

Das Aktionen-Array 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 darstellt, 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 Auflösung von 4x umfassen, etwa 96 x 96 px, und das Bild wird automatisch maskiert.

Notification.body Schreibgeschützt

Der Text der Benachrichtigung, wie im options-Parameter des Konstruktors angegeben.

Notification.data Schreibgeschützt

Gibt einen strukturierten Klon der Daten der Benachrichtigung 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 Symbol 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 wird, 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 Benutzer benachrichtigt werden soll, nachdem eine neue Benachrichtigung eine alte ersetzt hat.

Notification.requireInteraction Schreibgeschützt

Ein boolescher Wert, der angibt, dass eine Benachrichtigung aktiv bleiben soll, bis der Benutzer sie klickt oder schließt, anstatt automatisch zu schließen.

Notification.silent Schreibgeschützt

Gibt an, ob die Benachrichtigung stumm sein soll — d.h. es sollen keine Töne oder Vibrationen ausgegeben werden, 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 gültig 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 an, das von Geräten mit Vibrationshardware ausgegeben werden soll.

Statische Methoden

Erbt auch Methoden von seiner Elternschnittstelle, EventTarget.

Notification.requestPermission()

Fordert vom Benutzer die Erlaubnis an, Benachrichtigungen anzuzeigen.

Instanz-Methoden

Erbt auch Methoden von seiner Elternschnittstelle, EventTarget.

Notification.close()

Schließt eine Benachrichtigungsinstanz programmatisch.

Ereignisse

Erbt auch Ereignisse von seiner Elternschnittstelle, EventTarget.

click

Wird ausgelöst, wenn der Benutzer auf die Benachrichtigung klickt.

close

Wird ausgelöst, wenn der Benutzer 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

Nehmen Sie dieses grundlegende HTML an:

html
<button onclick="notifyMe()">Notify me!</button>

Es ist möglich, eine Benachrichtigung wie folgt zu senden — hier präsentieren wir einen ziemlich ausführlichen und vollständigen Code, den Sie verwenden könnten, wenn Sie zuerst überprüfen möchten, ob Benachrichtigungen unterstützt werden, dann überprüfen, ob die Berechtigung für den aktuellen Ursprungsort gewährt wurde, um Benachrichtigungen zu senden, dann die Berechtigung anfordern, falls erforderlich, bevor Sie eine Benachrichtigung senden.

js
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 mehr erlauben, dass Benachrichtigungsberechtigungen von cross-origin <iframe>s angefordert werden, wobei andere Browser folgen werden. Um ein Beispiel in Aktion zu sehen, schauen Sie sich unser To-do List Beispiel an (sehen Sie sich auch die App im Live-Betrieb an).

Hinweis: Im obigen Beispiel erzeugen wir Benachrichtigungen als Antwort auf eine Benutzeraktion (Klicken auf eine Schaltfläche). Dies ist nicht nur bewährte Praxis — Sie sollten keine Benutzer mit Benachrichtigungen zuspammen, denen sie nicht zugestimmt haben — sondern in Zukunft werden Browser ausdrücklich Benachrichtigungen verbieten, die nicht als Reaktion auf eine Benutzeraktion ausgelöst werden. Firefox tut dies bereits ab Version 72, zum Beispiel.

Spezifikationen

Specification
Notifications API Standard
# api

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch