let's
play
china
Panda ausblenden

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Push-Notifications für Webseiten: Integration und Umsetzung mit JavaScript

    Push-Notifications für Webseiten: Integration und Umsetzung mit JavaScript
Push-Notifications für Webseiten erstellen. (Bild: Shutterstock)

Push-Notifications sind auf Smartphones und Tablets schon länger ein beliebtes Mittel, um die Nutzer über eine wichtige Neuigkeit zu informieren. Egal ob das Wetter schlecht wird oder der Lieblingsverein gewonnen hat. Wir nutzen Push-Notifications tagtäglich, aber wieso eigentlich nur auf unseren Smartphones und Tablets?

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 (GIF: <a href="https://codepen.io/SchneiderJonathan/pen/rLOmyj">Codepen</a>)
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?

Finde einen Job, den du liebst

5 Reaktionen
Lars Flick

...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. ;-)

Antworten
Patrick Konrad
Patrick Konrad

Ich frag mich wo die User gespeichert werden...dafür muss es doch eine Datenbank geben?!

Antworten
Markus

Geht auch im Edge irgendwie nicht.

Antworten
Mathis Hüttl
Mathis Hüttl

Habs gerade auf meinem iPhone und auf dem iPad getestet, leider funktioniert die Demo bei mir nicht.

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden