tas2580
Blog über Webentwicklung und Linux Server

HTML5 Notifications

tas2580  

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

Aus Sicherheitsgründen funktioniert das nur auf Seiten die über HTTPS ausgeliefert werden oder auf localhost

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.

Über den Autor

tas2580

Weitere Informationen über mich findest du hier.

Ähnliche Beiträge


Kommentare

Super Beitrag!


Kommentar schreiben

URLs werden automatisch umgewandelt.
[b]DEIN TEXT[/b] für Fett gedruckt
[quote]DEIN ZITAT[/quote] für Zitate
[code]DEIN CODE[/code] für Code
captcha