Premium-Inhalte Tools Wordpress

OneSignal: So richtest du Web Push ein

Seit einiger Zeit bieten bekannte Web-Browser wie Chrome oder Safari die Möglichkeit an, Push-Benachrichtigungen einzublenden. Diese Funktion soll zumindest bei Chrome vor allem den Chrome Apps einen starken Mehrwert bieten. Einige Nachrichten-Seiten haben sich diese Funktion aber zur Einblendung neuer Nachrichten zu Nutze gemacht. In diesem Beitrag möchte ich dir mit Hilfe des Dienstes OneSignal erklären, wie du deinen Benutzern Browser-Benachrichtigungen bereitstellen kannst.

Schwierigkeiten

Aktuell steckt die Web Push-Technologie noch in den Kinderschuhen. So unterstützt Firefox Browser-Benachrichtigungen derzeit nur in der aktuellen Alpha-Version. Und auch bei Chrome und Safari sind Benachrichtigungen erst vor kurzem ausgerollt worden. Aus diesem Grund ist es nicht verwunderlich, dass die Einrichtung aktuell noch etwas schwierig ist. OneSignal versucht hierbei mit ausführlichen Dokumentationen Klarheit in die Technologie zu bringen. Ich habe aber einige Versuche gebraucht, um den Dienst erfolgreich hier auf WPTIMES einrichten zu können.

Um den Web Push Dienst aktivieren zu können benötigst du natürlich einen mit WordPress betriebenen Blog. Außerdem sind Accounts bei OneSignal und der Google Console nötig.

Da ich einige Versuche benötigt habe, um OneSignal erfolgreich einzurichten, werde ich dir im Folgenden ausführlich erklären, wie du Web Push für Safari und Chrome zum laufen bekommst.

Einrichtung

Bevor du mit der eigentlichen Einrichtung beginnst, musst du zunächst das WordPress-Plugin von OneSignal auf deinem Blog installieren. Wechsle anschließend in dein Dashboard von OneSignal und klicke auf „Add a new app“.

Erstelle eine App in OneSignal

Erstelle eine App in OneSignal

Füge einen passenden Namen ein und wähle im nächsten Dialog-Fenster Website Push aus.

onesignal-create-3

Wenn du auf „Next“ klickst, kannst du zwischen Google Chrome, Apple Safari und Mozilla Firefox wählen.

onesignal-create-4

Einrichtung von OneSignal für Google Chrome

Wähle Google Chrome aus und klicke auf „Next“. Öffne anschließend einen neuen Browser-Tab und wechsle zur Google Developers Console. Erstelle ein neues Projekt und wechsle zum Projekt-Dashboard.

onesignal-projektnummer

Hier findest du nun deine Projektnummer, die du dir möglichst in einen Texteditor einfügst, um sie zur späteren Einrichtung verfügbar zu haben.

onesignal-api-aktivieren

Suche anschließend im Suchfeld der Top-Bar nach Google Cloud Messaging for Android und aktiviere die API. Wähle anschließend in der linken Sidebar „Zugangsdaten“ und klicke auf „Anmeldedaten hinzufügen“. Wähle den Punkt „API-Schlüssel“ aus und erstelle einen neuen Server-Schlüssel.

onesignal-server-api

Wähle einen passenden Namen für den Serverschlüssel und beachte, dass du keine IP-Adresse einfügst. Mit einem Klick auf „Erstellen“ erscheint dein API-Schlüssel. Kopiere auch diesen für die Einrichtung bei OneSignal.

onesignal-apischlüssel

Jetzt kannst du die Google Developers Console schließen und zurück zu OneSignal wechseln. Füge im aktuellen Setup-Fenster bei OneSignal nun deine Domain, den Google Server API Key und einen Icon für deine Benachrichtigungen ein. Bitte beachte hierbei, einen Icon mit einer Auflösung von 80 x 80 Pixeln zu verwenden. Wenn du bei der Icon-URL nichts einfügst, wird automatisch ein Standard-Bild von OneSignal Push eingefügt.

Bevor du fortfährst, lese dir bitte den Punkt „HTTP-Fallback“ genau durch

Generell hast du jetzt bereits eine Verbindung zwischen OneSignal und der Google API hergestellt. Du könntest also im Grunde bereits Benachrichtigungen versenden. Um nun eine Verbindung zu WordPress herstellen zu können, musst du im nächsten Fenster den Punkt „WordPress“ auswählen.

onesignal-create-5

Im folgenden Schritt wird dir nun ein Rest API Key und eine APP ID angezeigt. Wechsle in einem neuen Browser-Tab in die Einstellungen des WordPress OneSignal Plugins und füge diese beiden Punkte ein. Klicke anschließend auf „Save“.

Um nun eine Testbenachrichtigung senden zu können, muss mindestens ein Nutzer abonniert sein. Wähle hierfür im Tab „Configuration“ den Button „Preview Popup“ aus und aktiviere über das neu geöffnete Fenster die Browser-Benachrichtigung.

Bitte beachte, dass du diesen Schritt auch über Google Chrome ausführst. Die einmalige Einrichtung muss immer über den entsprechenden Browser ausgeführt werden.

Wenn du die Browser-Benachrichtigung für deine Seite aktiviert hast, kannst du zurück in den Tab von OneSignal wechseln. Wenn du nun auf „Check my progress“ klickst, erhältst du nun normalerweise eine Nachricht, dass alles richtig eingerichtet ist.

Nach einem Klick auf „Next“ hast du nun die Möglichkeit, mit einer Test-Benachrichtigung das Setup abzuschließen. Schließe hierfür die Website für welche du Browser Push einrichten möchtest und sende die Test-Benachrichtigung.

Um das Setup zu beenden, musst du auf die Benachrichtigung klicken.

Wechsle nun zurück zur OneSignal Website und schließe das Setup ab.

Konfiguration HTTP-Fallback

Die Web Push Technologie arbeitet standardmäßig nur mit vorhandener SSL-Verschlüsselung. Wenn deine Seite nicht bzw. nicht vollständig per SSL-Zertifikat verschlüsselt ist, hast du die Möglichkeit, ein HTTP-Fallback in deine Konfiguration einzubauen. OneSignal leitet die Benachrichtigungen dann durch einen Tunnel mit SSL-Verschlüsselung und täuscht vor, dass du SSL in Verwendung hast. Klicke hierfür (im Fenster, in welchem du deinen Google API-Key eingetragen hast) auf die Checkbox „My site is not fully HTTPS“.

onesignal-create-9

Um den Fallback zu aktivieren musst du zum einen eine Subdomain wählen. Ich habe hier wptimes eingetragen. Alle Verbindungen laufen dann über wptimes.onesignal.com.

Ebenfalls musst du die Google Projekt-Nummer einfügen. Beachte, dass bei einer Änderung dieser Nummer alle vorherigen Abonnenten verloren gehen.

Safari Setup

Das Setup für Apples Browser Safari verläuft ähnlich dem, von Google Chrome, ist aber deutlich einfacher umzusetzen. Du benötigst hier nämlich keine API-Codes. Wähle einfach nach dem Setup von Chrome den Safari-Browser aus und klicke auf Next. Hier hast du nun die Möglichkeit, einen Seiten-Namen und deine Domain einzufügen. Außerdem kannst du ein .p12 Zertifikat hinterlegen (Entwickler-Zertifikat bei Apple) und eigene Icons einbinden.

Im Anschluss wir eine Safari Web ID generiert. Kopiere diese ID und füge diese im WordPress-Plugin ein. Im Anschluss kannst du Web Push in Safari abonnieren. Mit einer Test-Benachrichtigung hast du auch dieses Setup beendet.

Fazit

Ich persönlich finde, dass Web Push eine interessante und weitergeführte Lösung von Smartphone-Notifications ist. Wir erhalten Benachrichtigungen aus unseren Lieblings-Apps. Warum sollen wir nicht auch über unsere favorisierten Websites Benachrichtigungen erhalten, wenn wir diese gerade nicht geöffnet haben? Ich sehe hier gerade in Wetter- oder auch Fußball-Apps große Vorteile. Auf dem Smartphone erhalten wir hier nahezu täglich Benachrichtigungen, warum also nicht auch auf dem Desktop über die jeweilige Website?

Der Dienst OneSignal ermöglicht eine schnelle und einfache Einrichtung und ist außerdem nicht nur für das Web, sondern auch für diverse mobilen Plattformen wie iOS, Android, WindowsPhone und Fire OS kostenlos nutzbar. Bloggern steht also nichts im Wege, zu den Ersten zu gehören, welche dieses innovative System nutzen.

  1. Klasse, Deine Anleitung vielen Dank dafür! Bin grad selber dabei, das OneSignal-Modul auf meiner Seite einzurichten und stehe vor dem Problem, dass ich die Notification-Bell nur für eingeloggte Mitglieder sichtbar machen möchte. Hast Du einen Tipp für mich?

    • Hallo Frank,
      wenn du etwas programmieren kannst, solltest du es sicher hinbekommen, einen Button mit Registrierungs-Link nur für eingeloggte User anzeigen zu lassen.

      Ebenfalls könntest du mal mei den Entwicklern anfragen. Einer meiner Wünsche wurde bereits in das Plugin eingebaut 🙂 .

  2. Hallo Rico,

    deine Anleitung wurde sehr schön geschrieben. Ich sehe bei https://esportsobserver.com/ auch OneSignal und wollte fragen, ob du weißt, wie man das automatische Anfragen beim Aufrufen der Seite einstellt oder einprogrammiert. Ich würde mich über deine Antwort freuen!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.