JavaScript – Desktop-Benachichtigungen senden

Mit den neuesten Versionen von Chrome, Firefox, Safari und Opera ist es nun möglich, Desktop-Benachichtigungen zu erstellen. Das kann nützlich sein, falls man einem User etwas mitteilen möchte, auch oder grade wenn dieser momentan nicht auf dem betreffenden Tab unterwegs ist. Zum Beispiel kommt eine neue Benachrichtigung, eine Nachricht , eine Konvertierung ist abgeschlossen usw. Hier wird nun einmal kurz gezeigt, was wir alles Brauchen, um selbst Desktop-Benachrichtigungen zu erstellen.

1. Berechtigung einfordern

Wie bei sovielem Heutzutage ( #Cookies ) muss man den Nutzer erst Fragen. Allerdings ist es nicht wie beim Cookie Gesetzlich, sondern Technisch geregelt. Man kann keine Benachrichtigung senden, ohne die Berechtigung dazu zu haben. Das heißt, bevor wir überhaupt an das Senden denken können, fragen wir den Nutzer mit
Notification.requestPermission();
, ob wir denn dürften.

So sieht die Abfrage der Berechtigung aus.

So sieht die Abfrage der Berechtigung aus.

Danach können wir abfragen, ob der Nutzer dem Senden zugestimmt hat, indem wir die Variable
Notification.permission
auswerten.

Hier können wir dinge auslösen, je nachdem, wie der Nutzer sich entschieden hat.

Hier eine einfache Abfrage, die auswertet, wie sich der Nutzer entschieden hat:

Jetzt beschäftigen wir uns mit:
2. Die Benachrichtigung erstellen und Anzeigen 
Jetzt wird es etwas komplizierter. Wir müssen eine neue Variable des Typs  Notification erstellen, die wir mit dem Inhalt unserer nachicht füllen.

Wie gesagt, definieren wir in der ersten Zeile mit
var Notification = new Notification
ein neues objekt der Klasse Notification. Hier wird die Reaktion des Nutzers gespeichert.

In der Nächsten Zeile wird der String des Titels übergeben, danach folgt in JSON-Codierung der Inhalt der Benachichtigung. Hier können neben body und icon auch Beispielsweise Knöpfe erstellt werden.

Sobald die Funktion Notification() ausgelöst wird, wird die Benachrichtigung auch angezeigt.

ihavepermitt2

3. Auf Reaktionen reagieren

Nun, da unsere Benachichtigung angezeigt wird, müssen wir nur noch bestimmen, was passiert, wenn auf die Kachel geklickt wird. Gut, dass wir die Antwort des Benutzers in einer Variable gespeichert haben.

Eine etwas unkonventionelle aber durchaus machbare Methode eine Funktion zu definieren, können wir hier zum Einsatz bringen.

  Und das wars im Prinzip schon.Wenn du willst, kannst du unsere Benachrichtigung hier ausprobieren: JS Bin
Ein Tutorial mit Buttons kommt auch noch

Das könnte interessant sein Powered by AdWol Online Werbung

Per JavaScript drucken

Hallo, heute nur mal kurz gezeigt, wie man in JavaScript den Drucker ansprechen kann. Es gibt zwe...

Von einer Website gesetzte Cookies anzeigen

Ich habe gelesen, dass viele Leute angst haben, Cookies (diese kleinen Speichereinheiten, die seit n...