Benachrichtigung

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

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, bieten jedoch im Allgemeinen eine Möglichkeit, dem Benutzer 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 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, daher wird der Browser so handeln, als wäre der Wert abgelehnt.

Notification.maxActions Schreibgeschützt

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

Instanzeigenschaften

Erbt auch Eigenschaften von seinem übergeordneten Interface, EventTarget.

Notification.actions Schreibgeschützt: 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 darstellt, wenn nicht genug 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, etwa 96 x 96 px, unterstützen, 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 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: 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.navigate Schreibgeschützt: Die Navigations-URL der Benachrichtigung. Wenn sie gesetzt ist, navigiert die Aktivierung der Benachrichtigung zu dieser URL, anstatt das click oder notificationclick Ereignis auszulösen.
Notification.renotify Schreibgeschützt: Gibt an, ob der Benutzer benachrichtigt werden sollte, nachdem eine neue Benachrichtigung eine alte ersetzt hat.
Notification.requireInteraction Schreibgeschützt: Ein boolescher Wert, der angibt, dass eine Benachrichtigung aktiv bleiben sollte, bis der Benutzer sie anklickt oder verwirft, anstatt sich automatisch zu schließen.
Notification.silent Schreibgeschützt: Gibt an, ob die Benachrichtigung lautlos sein soll — d.h. es sollten 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: Gibt die Zeit an, zu der eine Benachrichtigung erstellt oder anwendbar 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: Gibt ein Vibrationsmuster an, das von Geräten mit Vibrationshardware ausgegeben werden soll.

Statische Methoden

Erbt auch Methoden von seinem übergeordneten Interface, EventTarget.

Notification.requestPermission(): Fordert die Berechtigung vom Benutzer an, um Benachrichtigungen anzuzeigen.

Instanzmethoden

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 Benutzer die Benachrichtigung anklickt.
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>Notify me!</button>

Es ist möglich, eine Benachrichtigung wie folgt zu senden — hier präsentieren wir einen ziemlich ausführlichen und umfassenden 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 Ursprung zu senden, dann bei Bedarf die Erlaubnis anfordern und schließlich eine Benachrichtigung senden.

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 mehr erlauben, dass Berechtigungen für Benachrichtigungen von Cross-Origin <iframe>s angefordert werden, andere Browser folgen. Um ein Beispiel in Aktion zu sehen, schauen Sie sich unser To-do-Listenbeispiel (siehe auch die App läuft live).

Hinweis: Im obigen Beispiel generieren wir Benachrichtigungen als Reaktion auf eine Benutzeraktion (z. B. das Klicken auf eine Schaltfläche). Dies ist nicht nur Best Practice — Sie sollten Benutzern nicht ohne deren Zustimmung Benachrichtigungen senden —, sondern in Zukunft werden Browser Benachrichtigungen ausdrücklich verbieten, die nicht als Reaktion auf eine Benutzeraktion ausgelöst werden. Firefox macht dies bereits ab Version 72, zum Beispiel.

Spezifikationen

Spezifikation
Notifications API # notification

Browser-Kompatibilität

Siehe auch

Verwendung der Notifications API

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden