info@a-coding-project.de

HTML5: Einführung in Web Notifications

In der Regel hat jeder von uns im Browser nicht nur eine Seite offen, sondern mehrere Tabs. Ein beliebter Tab dürfte bei vielen auch wohl durch Social Networks belegt sein. Bekommt man dort zum Beispiel eine Nachricht, wird ein Ton abgespielt und im Namen des Tabs (titles) erscheint eine Zahl an ungelesenen Nachrichten. So wird der Besucher dazu angeregt, wieder zurück zur Seite zu gehen.

Hat man keinen Ton an und gerade dem Browser im Hintergrund, so bekommt man diese Benachrichtung nicht mit. Aber auch hier gibt es mittlerweile Abhilfe, auf die ich jetzt eingehen möchte. HTML5 bietet eine API, um Benachrichtigungen an den Desktop zu senden – Notifications. Diese schieben sich dann an der Seite des Bildschirms vor allen Programmen. Das sieht dann zum Beispiel so aus:

Webnotification

Webnotification

Diese Benachrichtigung legt sich über alle Fenster und kann durch gezielten Einbau den Benutzer dazu bewegen, die Seite zu besuchen.

Natürlich darf das nicht einfach jede Seite machen. Man muss sich zunächst eine Berechtigung dazu einholen. Im Firefox kann man dies jeder Zeit machen, im Chrome nur in Folge einer Interaktion (z.B. eines Klicks). Die Notification-API bietet die Funktion requestPermission, die dies einholt:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function ask_for_permission()
      {
        Notification.requestPermission(function(){});
      }
      
      function send()
      {
        new Notification(document.getElementById('title').value, {
          body: document.getElementById('body').value,
          icon: document.getElementById('icon').value
        });
      }
    </script>
  </head>
  <body onload="init()">
    <button id="ask_permission" onclick="ask_for_permission()">Aktivieren</button>
      <div>
        Titel:
        <input id="title" value="Neue Benachrichtigung" /><br />
        Inhalt:
        <input id="body" value="Ich bin eine Webnotification!" /><br />
        Icon:
        <input id="icon" value="https://www.a-coding-project.de/demo/notification/logo.png" /><br />
        <button onclick="send()">Senden</button>
    </div>
  </body>
</html>

Beispiel testen

Die Notification selbst wird gesendet, in dem man ein neues Notification-Objekt erstellt. Im ersten Parameter kommt der Titel der Benachichtigung, danach kommen die Optionen. Da stehen laut W3C aktuell unter anderem folgende zur Verfügung:

  • body: Der Text innerhalb der Benachrichtigung
  • icon: Die Url eines Bildes, was angezeigt werden soll
  • lang: Sprache der Benachrichtigung (z.B. de-DE)
  • onclick: Callback-Funktion, wenn die Benachrichtung angeklickt wurde
  • onclose: Callback-Funktion, wenn die Benachrichtung geschlossen wurde
  • onerror:Callback-Funktion, wenn ein Fehler auftrat
  • onshow: Callback-Funktion, wenn die Benachrichtung angezeigt wurde

Kommentare

Florian schrieb am 12.01.2015:

Diese Funktion nutzt Google in abgeänderter Form schon bei ihrem Mail Service, jedoch nur mit Chrome. Bei Firefox oder anderen Browsern passiert nichts und es wird auch nicht nachgefragt. Obwohl die Notifikation nun in den Top Browsern implemintiert ist wird es trotzdem noch dauern bis auch alle anderen Anbieter nachzeihen und die Funktion sinnvoll einsetzen. z.B. Facebook, Andere Maildienste

juli schrieb am 01.11.2015:

Kommentar von "Florian"<cite>Bei Firefox oder anderen Browsern passiert nichts und es wird auch nicht nachgefragt.</cite>. Jetzt unterstützen auch andere Browser wie Firefox diese Funktion dank HTML5.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant