Push-Notifications für Webseiten: Integration und Umsetzung mit JavaScript
Die Javascript-API für Push-Notifications ist schon länger in Entwicklung. Im Gegensatz zu Android oder iOS kann sie leider nicht einfach via System-Update implementiert werden – wir Entwickler müssen uns also gedulden, bis die nötigen Browser den Support dafür gewährleisten. Da manche Browser nicht unbedingt für ihre schnelle Entwicklung bekannt sind, kann sich der Release eines solchen Features schon mal in die Länge ziehen. Wir zeigen euch jetzt, wie ihr ohne Ärger und Stress eine Cross-Browser-Lösung für Push-Notifications integrieren könnt.
Push-Notifications mit Push.js
Push-Notification-Demo (Screenshot: Codepen)
Die Stärke von Push.js ist die einfache Bedienung und Implementierung. Wir müssen uns keine Gedanken um ältere Browser machen oder zwischen mehreren Implementierungen unterscheiden. Stattdessen können wir mit einem einzigen Funktionsaufruf alle Browser bedienen. Push.js wählt bei älteren Browsern automatisch die richtige Fallback-Implementierung und wir können uns sorglos nach hinten lehnen.
Für die Integration von Push.js müssen wir nur die Lib herunterladen oder über npm / bower installieren. Haben wir nun die Lib in unser Projekt integriert, können wir direkt mit der Erstellung einer Benachrichtigung beginnen. Dafür reicht folgende JavaScript-Funktion: Push.create('Hello World!'). Sobald diese Funktion initial ausgeführt wurde, erhalten wir automatisch einen browserabhängigen Dialog, der für die Bestätigung der Push-Notifications notwendig ist. Ist dieser einmalig akzeptiert, erhalten wir direkt die Benachrichtigung „Hello World“.
Weitere Benachrichtigungen können nun ausgelöst werden, ohne wiederholt die Bestätigung akzeptieren zu müssen. Die Bestätigung ist für die gewählte Domain solange gültig, bis sie in den Browser-Einstellungen widerrufen wird. Eine Push-Notification benötigt immer einen Titel, alle anderen Optionen können nach Bedarf gesetzt werden. Dazu gehört:
- body (Text der Push-Notification)
- icon (Bild für die Push-Notification)
- onClick (Callback-Funktion, sollte auf die Push-Notification geklickt werden)
- onClose (Callback-Funktion, sollte die Push-Notification geschlossen werden)
- onError (Callback-Funktion, sollte ein Fehler auftreten)
- onShow (Callback-Funktion, sollte die Push-Notification angezeigt werden)
- tag (Dient zur Identifizierung und kann als ID für die Push-Notification genutzt werden)
- timeout (Zeit in Millisekunden, bis die Push-Notification geschlossen wird)
- vibrate (Vibrations-Verlauf für mobile Geräte)
Somit könnte eine umfangreiche Push-Notification folgendermaßen aussehen:
Push.create('Hello World!', {
body: 'This is some body content!',
icon: {
x16: 'images/icon-x16.png',
x32: 'images/icon-x32.png'
},
timeout: 5000
});
Auf der offiziellen Seite von Push.js oder auf dem GitHub-Repo könnt ihr alle wichtigen Informationen nachlesen und euch nochmals mit der Javascript-Notifications-API auseinandersetzen.
Push-Notifications für Webseiten: Für euch ein tolles Feature oder doch eher nervig?
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
Habs gerade auf meinem iPhone und auf dem iPad getestet, leider funktioniert die Demo bei mir nicht.
In Chrome geht es.
Geht auch im Edge irgendwie nicht.
Ich frag mich wo die User gespeichert werden…dafür muss es doch eine Datenbank geben?!
…geht einfacher über den kostenlosen Dienst OneSignal. Meldungen lassen sich zeitlich und thematisch steuern inkl. Monitoring. Es ergeben sich aus der SDK weitere spannende Einsatzmöglichkeiten. Dann sind auch die Nutzer von Apple-Produkten wieder dabei. ;-)