Notification
Experimental
Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.
Permissions
Wenn Sie notifications in einer offenen web app verwenden, fügen sie die desktop-notification permission zu ihrem manifest (en-US) file hinzu. Notifications können für jedes permission level, hosted oder darüber verwendet werden.
"permissions": {
"desktop-notification":{}
}
Konstruktor
var notification = new Notification(title, options);
Parameter
title
- Titel der innerhalb der Notification angezeigt werden muss.
options
Optional- Ein Objekt das optionale Konfigurationsparamter enthält. Es kann die folgenden Einträge enthalten:
dir
: Die Ausrichtung des Textes; Verfügbar sindauto
,ltr
, oderrtl
.lang
: Spezifiziere die verwendete Sprache. Dieser String muss ein valides BCP 47 language tag sein.body
: Ein String, welcher jeglichen extra Inhalt einer notification beinhaltet.tag
: Die ID einer gegebene notification, um diese abzurufen, zu löschen, zu ersetzen oder zu löschen.icon
: Die Url für das verwendete Icon in einer notification.data
: Ein Benutzerdefiniertes Datenfeld.
Properties
Static properties
Diese Eigenschaften sind nur im Notification-Objekt selbst verfügbar.
Notification.permission
Schreibgeschützt- Eine Zeichenkette, die die aktuell gesetzten Berechtigungen Notifications anzuzeigen darstellt. Mögliche Werte sind: denied (der Nutzer erlaubt keine Benachrichtigungen), granted (der Nutzer akzeptiert, dass Benachrichtigungen angezeigt werden) oder default (die Nutzerwahl ist unbekannt, daher verhält sich der Browser wie bei denied).
Instance properties
Diese Eigenschaften sind nur in Instanzen des Notification-Objekts verfügbar.
Notification.title
(en-US) Schreibgeschützt- Der Titel der Benachrichtigung der in den Parametern des Konstruktors spezifiziert wurde.
Notification.dir
(en-US) Schreibgeschützt- Textausrichtung der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
Notification.lang
(en-US) Schreibgeschützt- Sprachcode der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
Notification.body
(en-US) Schreibgeschützt- Textinhalt der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
Notification.tag
(en-US) Schreibgeschützt- ID der Benachrichtung (if any) welche in den Parametern des Konstruktors spezifiziert wurde.
Notification.icon
(en-US) Schreibgeschützt- URL des Bildes welches als Icon der Benachrichtgung verwendet wird, wie in den Parametern des Konstruktors spezifiziert wurde
Notification.data
(en-US) Schreibgeschützt- Returns a structured clone of the notification’s data.
Event handlers
Notification.onclick
(en-US)- A handler for the
click (en-US)
event. It is triggered each time the user clicks on the notification. Notification.onshow
(en-US)- A handler for the
show (en-US)
event. It is triggered when the notification is displayed. Notification.onerror
(en-US)- A handler for the
error (en-US)
event. It is triggered each time the notification encounters an error. Notification.onclose
(en-US)- A handler for the
close
event. It is triggered when the user closes the notification.
Methods
Static methods
These methods are available only on the Notification
object itself.
Notification.requestPermission()
(en-US)- Requests permission from the user to display notifications. This method must be called as the result of a user action (for example, an onclick event), and cannot be used without it.
Instance methods
These properties are available only on an instance of the Notification
object or through its prototype
. The Notification
objects also inherit from the EventTarget
interface.
Notification.close()
(en-US)- Programmatically closes a notification.
EventTarget.addEventListener()
- Registers an event handler of a specific event type on the
EventTarget
. EventTarget.removeEventListener()
- Removes an event listener from the
EventTarget
. EventTarget.dispatchEvent()
- Dispatches an event to this
EventTarget
.
Example
Assume this basic HTML:
<button onclick="notifyMe()">Notify me!</button>
It's possible to send a notification as follows:
function notifyMe() {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check whether notification permissions have alredy been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var 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 any more.
}
See the live result
Specifications
Specification | Status | Comment |
---|---|---|
Notifications API | Lebender Standard | Initial specification. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 5 webkit (en-US) (see notes) 22 |
4.0 moz (en-US) (see notes) 22 |
Nicht unterstützt | 25 | 6 (see notes) |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | ? |
(Ja) |
4.0 moz (en-US) (see notes) 22 |
1.0.1 moz (en-US) (see notes) 1.2 |
Nicht unterstützt | ? | Nicht unterstützt |
(Ja) |
Gecko notes
- Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the
navigator.mozNotification
object through itscreateNotification
method. - Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the
show
method and was supporting theclick
andclose
events only. - Nick Desaulniers has written a Notification shim to cover both newer and older implementations.
- One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like
/my_icon.png
. You also can't usewindow.location.origin + "/my_icon.png"
becausewindow.location.origin
is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately with the icon missing, then the icon is fetched, but it works on all versions of Firefox OS.
Chrome notes
- Prior to Chrome 22, the support for notification was following an old prefixed version of the specification and was using the
navigator.webkitNotifications
object to instantiate a new notification. - Prior to Chrome 32,
Notification.permission
was not supported.
Android notes
- The Android browser has been deprecated since Android 4.0. Newer versions use Chrome.
Safari notes
- Safari started supporting notification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).
Notes
[1] Deprecated since Android 4.0.