Push-Notifications sind auf Smartphones und Tablets schon lange beliebt um Benutzer über Ereignisse zu informieren. Aber auch auf den Desktop lassen sich Nachrichten an den Benutzer ausgeben und das sogar von einer Webseite aus. Mit Desktop Benachrichtigungen kann man seine Besucher über Ereignisse auf der Webseite informieren und das sogar so, dass man die Webseite nicht unbedingt im aktiven Tab haben muss, der Benutzer bekommt die Nachricht auch wenn er gerade eine Seite in einem anderen Tab anschaut oder der Browser gar nicht im Vordergrund läuft. Wer Facebook oder Googlemail benutzt kennt das ja sicher schon.
Einfache HTML Notification
Der einfachste Weg Desktop Benachrichtigungen an seine Besucher zu senden ist der Notifications Standard. Wie auch bei der Standort abfrage benötigt man auch hier zuerst die Berechtigung vom Benutzer. Wenn man die einmal hat kann man beliebig oft Nachrichten an den Besucher senden. Am besten kann man das mit einem kleinen Beispiel verdeutlichen, zu erst muss man mit einem Klick auf "Rechte holen" der Webseite das Recht geben Nachrichten zu senden und kann dann mit einem Klick auf "Benachrichtigung senden" die Nachricht senden.
Rechte holen Benachrichtigung senden
Unterstützt wird das von Chrome ab Version 22, Firefox ab Version 22, Opera ab Version 25 und Safari ab Version 6. Der Internet Explorer unterstützt das zur Zeit noch nicht.
Umsetzen lässt sich das ganze mit ein paar wenigen Zeilen Javascript.
Rechte holen
Bevor man Benachrichtigungen senden kann muss man von Besucher erst mal die Erlaubnis dafür holen. Die Erlaubnis gilt dann für die komplette Domain so lange bis der Benutzer sie widerruft oder mit einem anderen Browser kommt. Das ist deshalb sinnvoll da sonst ständig jede Webseite Nachichten senden würde.
Notification.requestPermission()
Am besten man holt sich die Erlaubnis jedes mal bevor man eine Benachrichtigung senden möchte. Wenn man einmal die Erlaubnis hat wird der Benutzer nicht erneut gefragt.
Benachrichtigungen senden
Sobald man die Erlaubnis hat Desktop Benachrichtigungen zu senden kann eine einfache Benachrichtigung ganz einfach senden:
var n = new Notification('Dein Text')
Die Benachrichtigung ist jetzt allerdings noch nicht wirklich schon da sie nur aus einem kurzen Text besteht. Deshalb kann man noch weitere Parameter angeben um die Benachrichtigung mit einem Icon und weiterem Text zu versehen:
| Option | Beschreibung |
|---|---|
| title | Der Titel der Nachicht |
| dir | Die Textrichtung der Nachricht |
| lang | Die Sprache der Nachricht als Languagecode, also z.B. de für deutsch |
| body | Der Text der Nachricht |
| tag | Eine ID für die Nachricht |
| icon | URL zu einem Bild das als Icon für die Nachricht verwendet wird |
| data | Zusätzliche Daten |
Diese Optionen werden im zweiten Parameter beim senden einer Benachrichtigung angegeben, es ist nicht nötig alle Optionen anzugeben.
Beispiel:var n = new Notification(
"Test Notification", {
body: "Hier kann ein erweiterter Text stehen!",
icon: "https://tas2580.net/images/avatar.png"
}
);
Hier wird zusätzlich zum Titel ein Icon und ein Text angezeigt.
Auf Events reagieren
Die Benachrichtigung bringt mehrere Events mit die zu bestimmten Zeiten aufgerufen werden, das ermöglicht es weiteren Code auszuführen wenn der Benutzer z.B. die Benachrichtigung schließt.
| Event | Beschreibung |
|---|---|
| onclick | Wird aufgerufen wenn der Benutzer auf die Benachrichtigung klickt |
| onerror | Wird aufgerufen wenn die Benachrichtigung einen Fehler verursacht hat |
| onshow | Wird aufgerufen wenn die Benachrichtigung angezeigt wird |
| onclose | Wird aufgerufen wenn die Benachrichtigung geschlossen wird |
Benachrichtigung schließen
Normalerweise wird die Benachrichtigung von selber nach einigen Sekunden wieder geschlossen wenn der Benutzer nicht darauf reagiert. Wenn man die Benachrichtigung schon vorher schließen möchte kann man das mit n.close() jeder Zeit tun.
Wenn man nicht möchte, dass die Benachrichtigung automatisch geschlossen wird kann man als Option requireInteraction: true übergeben, das funktioniert allerdings aktuell nur in Chrome und Firefox.
Service Worker benutzen
Die oben gezeigte Lösung ist zwar schon einfach, hat aber auch einige Nachteile, denn in den meisten Browsern auf Smartphones funktioniert die Lösung nicht. Außerdem kann man Nachrichten nur senden solange die Seite die den Code dazu enthält geöffnet ist. Wenn man Nachrichten aber auch dann senden möchte wenn der Besucher die Seite schon wieder verlassen hat benötigt man einen Service Worker.
Im einfachsten Fall benötigt man dazu nur ein paar Zeilen JavaScript. die sw.js kann leer sein oder auch gar nicht existieren.
navigator.serviceWorker.register('sw.js');
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('Nachricht mit ServiceWorker');
});
Das macht erst mal genau das gleiche wie die oben gezeigte Lösung, funktioniert aber auch in der Mobilen Version von Chrome und Firefox.
Wenn der Besucher die Seite verlässt
Manchmal will man Nachrichten nicht direkt senden sondern erst wenn ein bestimmtes Ereignis eingetreten ist und das unabhängig davon ob der Benutzer sich noch auf der Seite befindet oder nicht. Dazu muss zu erst wieder ein Service Worker registriert werden und jetzt auch wirklich existieren. Der Code in der sw.js wird dann die ganze Zeit im Hintergrund ausgeführt unabhängig ob sich der Besucher noch auf der Seite befindet oder nicht, auch wenn der Browser Tab geschlossen wird läuft der Service Worker noch weiter.
Einen Service Worker registriert man ganz einfach indem man folgenden JavaScript Code in die Seite einbindet. Als Parameter übergibt man eine Dateinamen einer JS-Datei die den Service Worker enthält.
navigator.serviceWorker.register('sw.js');
Als nächstes muss man die sw.js anlegen, darin kann man dann unabhängig davon ob die Seite noch geöffnet ist oder nicht Benachrichtigungen senden. Der Service Worker hört auf verschiedene Events.
| Event | Beschreibung |
|---|---|
| install | Der Service Worker wurde installiert |
| activate | Der Service Worker wurde aktiviert |
| message | Der Service Worker hat eine Nachricht erhalten |
| fetch | Eine Seite wird geladen innerhalb des Scope wird geladen |
Je nach dem zu welchem Event man eine Nachricht senden will benötigt man einen Listener der den enthaltenen Code ausführt wenn das Event getriggert wird. In dem Beispiel wird zu jedem Event eine entsprechende Nachricht ausgegeben.
/* message event */
self.addEventListener('message', function(event) {
send_notification('Message', event);
});
/* install event */
self.addEventListener('install', function(event){
send_notification('Install', 'ServiceWorker installiert');
});
/* activate event */
self.addEventListener('activate', function(event){
send_notification('Activate', 'ServiceWorker aktiviert');
});
/* fetch event */
self.addEventListener('fetch', function(event){
send_notification('Fetch', 'Eine Seite wurde geladen');
});
/* Funktion um eine Benachrichtigung zu senden */
function send_notification(title, body) {
self.registration.showNotification(
title, {
body: body
}
);
}
Das message Event lässt sich aufrufen indem man eine Nachricht an den Service Worker sendet.
navigator.serviceWorker.controller.postMessage('Deine Nachricht');
Innerhalb des Service Workers kann man jetzt mit einem Timer beim Server nachfragen ob es eine neue Nachricht gibt und die dann ausliefern. Alternativ kann man das Push API nutzen, da das aber ziemlich umfangreich ist werde ich dazu bei Gelegenheit einen Extra Artikel schreiben und hier nicht weiter drauf eingehen.
Kommentare