Notification
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
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.
Die Notification-Schnittstelle der Notifications API wird verwendet, um Desktop-Benachrichtigungen für Benutzer zu konfigurieren und anzuzeigen.
Das Erscheinungsbild und die konkreten Funktionen dieser Benachrichtigungen unterscheiden sich je nach Plattform. Im Allgemeinen bieten sie jedoch eine Möglichkeit, Benutzern asynchron Informationen bereitzustellen.
Konstruktor
Notification()-
Erstellt eine neue Instanz des
Notification-Objekts.
Statische Eigenschaften
Erbt außerdem Eigenschaften von der übergeordneten Schnittstelle EventTarget.
Notification.permissionSchreibgeschützt-
Ein String, der die aktuelle Berechtigung zum Anzeigen von Benachrichtigungen angibt. Mögliche Werte sind:
denied— Der Benutzer lehnt die Anzeige von Benachrichtigungen ab.granted— Der Benutzer stimmt der Anzeige von Benachrichtigungen zu.default— Die Entscheidung des Benutzers ist unbekannt. Der Browser verhält sich daher so, als wäre der Wertdenied.
Notification.maxActionsSchreibgeschützt-
Die maximale Anzahl von Aktionen, die vom Gerät und vom User Agent unterstützt werden.
Instanzeigenschaften
Erbt außerdem Eigenschaften von der übergeordneten Schnittstelle EventTarget.
Notification.actionsSchreibgeschützt-
Das Aktions-Array der Benachrichtigung, wie im
options-Parameter des Konstruktors angegeben. Notification.badgeSchreibgeschützt-
Ein String mit der URL eines Bildes, das die Benachrichtigung darstellt, wenn nicht genügend Platz vorhanden ist, um die Benachrichtigung selbst anzuzeigen, beispielsweise in der Android-Benachrichtigungsleiste. Auf Android-Geräten sollte das Badge für Geräte mit bis zu vierfacher Auflösung ausgelegt sein, also etwa 96 × 96 px. Das Bild wird automatisch maskiert.
Notification.bodySchreibgeschützt-
Der Text der Benachrichtigung, wie im
options-Parameter des Konstruktors angegeben. Notification.dataSchreibgeschützt-
Gibt einen strukturierten Klon der Daten der Benachrichtigung zurück.
Notification.dirSchreibgeschützt-
Die Textrichtung der Benachrichtigung, wie im
options-Parameter des Konstruktors angegeben. Notification.iconSchreibgeschützt-
Die URL des Bildes, das als Symbol der Benachrichtigung verwendet wird, wie im
options-Parameter des Konstruktors angegeben. Notification.imageSchreibgeschützt-
Die URL eines Bildes, das als Teil der Benachrichtigung angezeigt wird, wie im
options-Parameter des Konstruktors angegeben. Notification.langSchreibgeschützt-
Der Sprachcode der Benachrichtigung, wie im
options-Parameter des Konstruktors angegeben. -
Die Navigations-URL der Benachrichtigung. Wenn sie festgelegt ist, führt das Aktivieren der Benachrichtigung zu dieser URL, anstatt das Ereignis
clickodernotificationclickauszulösen. Notification.renotifySchreibgeschützt-
Gibt an, ob der Benutzer benachrichtigt werden soll, wenn eine neue Benachrichtigung eine ältere ersetzt.
Notification.requireInteractionSchreibgeschützt-
Ein boolescher Wert, der angibt, ob eine Benachrichtigung aktiv bleiben soll, bis der Benutzer darauf klickt oder sie schließt, anstatt automatisch geschlossen zu werden.
Notification.silentSchreibgeschützt-
Gibt an, ob die Benachrichtigung stumm sein soll, also unabhängig von den Geräteeinstellungen weder Töne noch Vibrationen ausgegeben werden sollen.
Notification.tagSchreibgeschützt-
Die ID der Benachrichtigung (falls vorhanden), wie im
options-Parameter des Konstruktors angegeben. Notification.timestampSchreibgeschützt-
Gibt den Zeitpunkt an, zu dem eine Benachrichtigung erstellt wird oder für den sie relevant ist (in der Vergangenheit, Gegenwart oder Zukunft).
Notification.titleSchreibgeschützt-
Der Titel der Benachrichtigung, wie im ersten Parameter des Konstruktors angegeben.
Notification.vibrateSchreibgeschützt-
Gibt ein Vibrationsmuster an, das Geräte mit Vibrationshardware ausgeben sollen.
Statische Methoden
Erbt außerdem Methoden von der übergeordneten Schnittstelle EventTarget.
Notification.requestPermission()-
Fordert vom Benutzer die Berechtigung an, Benachrichtigungen anzuzeigen.
Instanzmethoden
Erbt außerdem Methoden von der übergeordneten Schnittstelle EventTarget.
Notification.close()-
Schließt eine Benachrichtigungsinstanz programmgesteuert.
Ereignisse
Erbt außerdem Ereignisse von der übergeordneten Schnittstelle EventTarget.
Beispiele
Gehen Sie von folgendem einfachen HTML aus:
<button>Notify me!</button>
Eine Benachrichtigung kann wie folgt gesendet werden. Das Beispiel zeigt einen recht ausführlichen und vollständigen Code: Er prüft zunächst, ob Benachrichtigungen unterstützt werden und ob für die aktuelle Origin bereits die Berechtigung zum Senden von Benachrichtigungen erteilt wurde. Falls erforderlich, fordert er die Berechtigung an, bevor er die Benachrichtigung sendet.
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 auf dieser Seite kein Live-Beispiel mehr, da Chrome und Firefox nicht mehr zulassen, dass Benachrichtigungsberechtigungen aus <iframe>s mit einer anderen Origin angefordert werden. Andere Browser werden voraussichtlich folgen. Ein funktionierendes Beispiel finden Sie in unserem To-do-Listen-Beispiel (siehe auch die laufende Anwendung).
Hinweis: Im obigen Beispiel erstellen wir Benachrichtigungen als Reaktion auf eine Benutzerinteraktion (einen Klick auf eine Schaltfläche). Das ist nicht nur eine bewährte Vorgehensweise — Sie sollten Benutzer nicht mit Benachrichtigungen überhäufen, denen sie nicht zugestimmt haben. Browser werden künftig Benachrichtigungen, die nicht durch eine Benutzerinteraktion ausgelöst wurden, ausdrücklich unterbinden. Firefox tut dies beispielsweise bereits seit Version 72.
Spezifikationen
| Spezifikation |
|---|
| Notifications API # notification |