Notification

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

 

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

Das Notification interface wird zum konfigurieren und anzeigen von desktop notifications verwendent.

Permissions

Wenn Sie notifications in einer offenen web app verwenden, fügen sie die desktop-notification permission zu ihrem manifest file hinzu. Notifications können für jedes permission level, hosted oder darüber verwendet werden.

"permissions": {
    "desktop-notification":{}
}

Constructor

var notification = new Notification(title, options);

Parameters

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 sind auto, ltr, oder rtl.
  • 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

These properties are available only on the Notification object itself.

Notification.permission Read only
A string representing the current permission to display notifications. Possible value are: denied (the user refuses to have notifications displayed), granted (the user accepts having notifications displayed), or default (the user choice is unknown and therefore the browser will act as if the value were denied).

Instance properties

These properties are available only on instances of the Notification object.

Notification.title Read only
The title of the notification as specified in the options parameter of the constructor.
Notification.dir Read only
The text direction of the notification as specified in the options parameter of the constructor.
Notification.lang Read only
The language code of the notification as specified in the options parameter of the constructor.
Notification.body Read only
The body string of the notification as specified in the options parameter of the constructor.
Notification.tag Read only
The ID of the notification (if any) as specified in the options parameter of the constructor.
Notification.icon Read only
The URL of the image used as an icon of the notification as specified in the options parameter of the constructor.
Notification.data Read only
Returns a structured clone of the notification’s data.

Event handlers

Notification.onclick
A handler for the click event. It is triggered each time the user clicks on the notification.
Notification.onshow
A handler for the show event. It is triggered when the notification is displayed.
Notification.onerror
A handler for the error event. It is triggered each time the notification encounters an error.
Notification.onclose
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()
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()
Programmatically closes a notification.

EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
EventTarget.dispatchEvent()
Dispatch an event to this EventTarget.

Additional methods for Mozilla chrome code

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

  • void setEventHandler(DOMString type, EventHandler handler)
  • EventHandler getEventHandler(DOMString type)

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 (see notes)
22
4.0 moz (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 (see notes)
22
1.0.1 moz (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 its createNotification method.
  • Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and was supporting the click and close 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 use window.location.origin + "/my_icon.png" because window.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

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.

See also

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: DoomyTheFroomy, thomalow
 Zuletzt aktualisiert von: DoomyTheFroomy,