Desktop Benachrichtigungen aka "Web notifications" sind dafür da um den Benutzer über wichtige Ereignisse (wie zum Beispiel eintreffende Nachrichten) auch dann zu informieren, wenn der Browser minimiert oder der Tap nicht im Focus ist. Besonders bekannt aus Gmail oder Facebook. Heute möchte ich euch zeigen, wie man mit der Web API "Web notifications" erstellt. Diesmal werde ich kein Plugin oder extra JavaScript Library vorstellen, sondern pures HTML5.
Benachrichtigungen genehmigen
Um Benachrichtigungen anzeigen zu können, verlangt es zwingend eine Genehmigung seitens des Benutzers. Hier muss erwähnt werden, dass da wirklich mit Maus oder Tastatur interagiert werden muss, und man die Genehmigung nicht per Code erschleichen kann.
Notification.requestPermission([callback]);Das Notification Object
var notification = new Notification(title, options);Als ersten Parameter verlangt der Konstruktor den Titel der Benachrichtigung, dieser ist auch zwingend. Als zweiter Parameter kann man einen Optionen-Objekt übergeben.
Hier die von mir Verwendeten Optionen:
- body: Der eigentliche Inhalt der Nachricht
- icon: Hier kommt der Pfad zum Icon Bild
Über alle Optionen, Methoden und Events könnt ihr euch hier informieren.
Browser support
Keine Überraschung, werfen wir ein Blick auf caniuse.com sehen wir, dass eigentlich alle gängigen Desktop Browser die "Web Notification" unterstützen. Eigentlich, denn der "Internet Explorer" ist mal wieder außen vor. Bleibt zu hoffen, dass die "Redmonder" mit dem neuen Spartan-Browser, einen anderen Weg gehen werden...
Wie immer habe ich hier für euch eine live Demo vorbereitet. Viel Spass!