Web Notification API

Web Notification API

Mit Web Notifications lassen sich standardisierte Nachrichten durch den Browser an den Benutzer ausgeben. Diese unterscheiden sich von den üblichen Popups dadurch, dass der Benutzer diese explizit erlauben muss. Außerdem können die Benachrichtigungen mit Titel, Inhalt und Icon angereichert werden. Bevor eine Benachrichtigung angezeigt wird, erscheint eine ähnliche Abfrage wie bei dem Geolocation API. Erst nach der erfolgten Genehmigung können die Benachrichtigung ausgegeben werden.

Browserunterstützung

Das Web Notifications API wird im Moment nur von Chome >=22 (ab >= 5 mit Vendor-Präfix), Fitefox >= 22 und Safari >= 6.0 unterstützt.

Mit dem folgendem Code lässt sich herausfinden, ob der Browser das Web Notifications API unterstützt:

Zugriffserlaubnis einholen

Bevor die Benachrichtigungen angezeigt werden, muss der Benutzer die Erlaubnis dafür erteilen. Dies verhält sich genauso wie bei dem Geolocation API.

Der aktuelle Zustand ist in dem Attribut Notification.permission hinterlegt. Dieser kann dabei eines der drei Werte haben:

  • denied – Der Benutzer hat den Zugriff auf das API abgelehnt.
  • granted – Der Benutzer hat den Zugriff auf das API genehmigt.
  • default – Es gab noch keine Entscheidung oder der Benutzer wurde noch nicht gefragt. (Verhält sich sonst wie denied.)

Um die Erlaubnis von dem Benutzer einzuholen, genügt der Aufruf der Notification.requestPermission() Methode:

Benachrichtigung ausgeben

Nun kann man Benachrichtigungen ausgeben. Dazu genügt es eine neue Instanz von Notification zu erzeugen und dem Konstruktor die Parameter title und options zu übergeben. Dabei muss der Parameter title übergeben werden. Der Parameter options ist optional und beinhaltet eine Reihe an zusätzlichen Informationen, die auch in der Benachrichtigung ausgegeben werden können:

  • dir – Die Ausrichtung der Benachrichtigung. Folgende Optionen sind möglich: auto, ltr, rtl
  • lang – Die Sprache der anzuzeigenden Benachrichtigung nach BCP 47.
  • body – Ein, zum Titel, zusätzlicher Text.
  • tag – Eine ID für die Benachrichtigung, um diese zu modifizieren.
  • icon – Eine URL zu einem Icon, dass i.d.R. neben dem Text ausgegeben wird.

Events

Selbstverständlich kann man auf Events reagieren. So ist es z.B. möglich die Klicks auf Benachrichtigungen zu tracken, in dem man auf das onclick-Event lauscht. Oder man markiert die Benachrichtigung in der Datenbank als gelesen, wenn diese angezeigt wird. Dazu steht eine Reihe an Events zur Verfügung:

  • Notification.onclick – Wird jedes Mal ausgelöst, wenn auf die Benachrichtigung geklickt wird.
  • Notification.onshow – Wird ausgelöst, wenn die Benachrichtigung eingeblendet wird.
  • Notification.onerror – Wird ausgelöst, wenn es bei der Ausgabe der Benachrichtigung zu einem Fehler kommt.
  • Notification.onclose – Wird ausgelöst, wenn die Benachrichtigung ausgeblendet wird.

jQuery Plugin

Das Arbeiten mit solchen APIs ist immer etwas mühsam, da man immer die alten Implementierungen und Verdor-Präfixe berücksichtigen muss. Zum Glück gibt es fast immer eine kleine Bibliothek, die die Verwendung normalisiert und vereinfacht. So auch im Fall von Web Notifications.

Mikhail Davydov, ein Yandex Mitarbeiter, hat einen Webkit Notification API jQuery Wrapper geschrieben, der ein einfaches Interface für das API bietet:

 Fazit

Das Web Notifications API ist eine gute Möglichkeit die Web Anwendung noch ein Stück näher an eine Desktop  Anwendung zu bringen. So könnte man eine Intranet Anwendung im Vollbild Modus laufen lassen und durch die Web Notifications das Gefühl einer Desktop  Anwendung verstärken.

ALL-INKL.COM

2 Kommentars zu dem Artikel “Web Notification API”

  1. Avatar von NodeCode
    NodeCode

    Kleiner Fehler im Code: Bei web-notifications-permission.js fehlt in der Zeile 8 die schließende Klammer des Funktionsaufrufes Notification.requestPermission(). Ohne funktioniert der Code nämlich nicht, und es kommt zu einem Syntax-Error. Ersetzt man das } in der 8. Zeile hingegen durch });, funktioniert der Code wunderbar 😉

    • Avatar von Alexander Bogomolov
      Alexander Bogomolov

      Vielen Dank für den Hinweis! Habe ich gleich behoben.