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 Aussehen und die spezifische Funktionalität dieser Benachrichtigungen variieren je nach Plattform, aber im Allgemeinen bieten sie 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 seinem Eltern-Interface, EventTarget.

Notification.permission Schreibgeschützt

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

  • denied — Der Benutzer lehnt es ab, Benachrichtigungen angezeigt zu bekommen.
  • granted — Der Benutzer stimmt zu, Benachrichtigungen angezeigt zu bekommen.
  • default — Die Entscheidung des Benutzers ist unbekannt und daher wird der Browser so agieren, als wäre der Wert abgelehnt.
Notification.maxActions Schreibgeschützt

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

Instanz Eigenschaften

Erbt auch Eigenschaften von seinem Eltern-Interface, EventTarget.

Notification.actions Schreibgeschützt Experimentell

Das Aktions-Array der Benachrichtigung, wie im options Parameter des Konstruktors angegeben.

Notification.badge Schreibgeschützt

Eine Zeichenkette, die die URL eines Bildes enthält, das die Benachrichtigung repräsentiert, wenn nicht genug Platz ist, die Benachrichtigung selbst anzuzeigen, wie zum Beispiel in der Android-Benachrichtigungsleiste. Auf Android-Geräten sollte das Abzeichen Geräte mit bis zu 4x Auflösung unterstützen, etwa 96 x 96 px, und das Bild wird automatisch maskiert.

Notification.body Schreibgeschützt

Die Zeichenkette des Hauptteils 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 anzeigt, dass eine Benachrichtigung aktiv bleiben soll, bis der Benutzer sie anklickt oder schließt, anstatt automatisch zu schließen.

Notification.silent Schreibgeschützt

Gibt an, ob die Benachrichtigung stumm geschaltet werden soll — das heißt, es sollten keine Geräusche 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 anwendbar ist (Vergangenheit, Gegenwart oder Zukunft).

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, das ausgegeben werden soll.

Statische Methoden

Erbt auch Methoden von seinem Eltern-Interface, EventTarget.

Notification.requestPermission()

Fordert die Erlaubnis des Benutzers an, Benachrichtigungen anzuzeigen.

Instanz Methoden

Erbt auch Methoden von seinem Eltern-Interface, EventTarget.

Notification.close()

Schließt eine Benachrichtigungsinstanz programmgesteuert.

Ereignisse

Erbt auch Ereignisse von seinem Eltern-Interface, 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

Angenommen, dieses grundlegende HTML:

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 Erlaubnis erteilt wurde, Benachrichtigungen vom aktuellen Ursprungsort zu senden, dann die Erlaubnis anfordern, falls erforderlich, bevor dann eine Benachrichtigung gesendet wird.

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 zulassen, dass Benachrichtigungsberechtigungen von fremden <iframe>s angefordert werden, andere Browser werden folgen. Um ein Beispiel in Aktion zu sehen, schauen Sie sich unser To-do-Listen-Beispiel an (siehe auch die App live in Aktion).

Hinweis: Im obigen Beispiel generieren wir Benachrichtigungen als Reaktion auf eine Benutzeraktion (Klicken eines Buttons). Dies ist nicht nur Best Practice — Sie sollten Benutzer nicht mit Benachrichtigungen überhäufen, denen sie nicht zugestimmt haben — sondern in Zukunft werden Browser explizit 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
# api

Browser-Kompatibilität

Siehe auch