Push Notifications für Webapps mit OneSignal

Lange Zeit war ich auf der Suche nach einer Möglichkeit, um Webapps mit Push Notifications auszustatten. Ich bin Webentwickler, spezialisiert auf PHP, und kenne mich daher wenig bis gar nicht mit dem Programmieren von nativen Android und iOS Apps aus. An vielen Stellen bin ich gestolpert, bis ich OneSignal entdeckt habe. Wie das Ganze funktioniert erkläre ich euch im folgenden Beitrag.

Inhalt

• Was sind Webapps?
• Was sind Push Notifications?
• Push Notifications mit OneSignal
• Extra: Notification mit Symfony2 verschicken

Was sind Webapps?

Die sogenannten Webapps sind so gesehen normale Webseiten wie dieser Blog. Allerdings sind sie so konzipiert, dass sie besonders auch auf mobilen Endgeräten gut aussehen. Aber auch das bringen viele Webseiten mit, ohne dass man sie als Webapp bezeichnen würde.

Ich führe das Ganze also einmal mit der Software für meine Musicalgruppe aus. Die Seite verwenden wir zur Organisation unserer Proben, Mitgliederdaten und Kostüme. Beispielsweise werden sämtliche Probentermine in einen Kalender eingetragen, wo jedes Mitglied angeben kann, ob es zu der Probe kommt oder nicht. Nun leben wir im 21. Jahrhundert und Browser-Lesezeichen sind out. Was will die Jugend also? Apps! Da ich aber, wie bereits oben erwähnt, Webentwickler bin, hab ich von tuten und blasen keine Ahnung, wenn es um native Android und iOS Anwendungen geht.

Um dem App-Feeling besonders nahe zu kommen, ist es möglich eine sogenannte Manifest-Datei zu hinterlegen. In dieser werden Name, Icons und ein paar Einstellungen der App hinterlegt. Wenn man die Webseite bspw. im Chrome unter Android öffnet und „Zum Startbildschirm hinzu“ anklickt, wird auf dem Homescreen das angegebene Icon gespeichert. So hat der Benutzer immer schnellen Zugriff auf die Webseite. Zudem kann in der Manifest-Datei bspw. angegeben werden, dass die Seite im Fullscreen-Modus gestartet werden soll. Und so gibt man dem Benutzer mehr und mehr das Gefühl mit einer echten nativen App zu arbeiten.

Das Ganze kann dann so weit getrieben werden, dass man dem Benutzer sogar Offline-Inhalte zur Verfügung stellen kann.

Was sind Push Notifications?

Push Notifications sind die Benachrichtigungen, die ihr auf eurem Smartphone oder Tablet erhaltet, wenn bspw. jemand in einen Whatsapp-Chat schreibt, ihr eine SMS erhaltet oder auf Facebook markiert wurdet. Kleine Nachrichten, die euch an Ereignisse erinnern, obwohl ihr die dazugehörige App nicht einmal offen habt.

Lange Zeit gab es keine Möglichkeit diese Notifications außerhalb einer nativen App zu verwenden, doch immer mehr Dienste bieten genau das an. Oft werden Push Notifications auch dazu verwendet, eine Nachricht an sämtliche Benutzer zu verschicken. Ein Beispiel wäre eine Shopping App, die all ihren Abonnenten mitteilen möchte, dass es auf ausgewählte Artikel 20% Rabatt gibt. Je nachdem wie oft Notifications gesendet werden, können diese natürlich auch schnell lästig werden, weshalb man darauf achten sollte, seinen Benutzern die Möglichkeit zu schaffen, nur bestimmte „Themen“ zu abonnieren.

Ein Benutzer möchte demnach ggf. über sämtliche Rabatte für Sport-Artikel eine Notification bekommen, nicht aber bei Rabatten für Baby-Artikel.

Push Notifications mit OneSignal

OneSignal bietet neben den folgenden erläuterten Features ebenfalls Services für native Apps an. Diese werde ich hier aber bewusst nicht nennen. Wer sich dafür interessiert sollte auf jeden Fall einen Blick auf deren Seite wagen.

OneSignal registrieren

Zunächst müsst ihr euch auf onesignal.com registrieren. Der Dienst ist glücklicherweise komplett kostenlos. Dann könnt ihr auch bereits eure erste App anlegen und ihr einen Namen geben.

Als nächstes müsst ihr die gewünschte Platform für eure App auswählen. Für eine Webapp wählt ihr „Website Push“. Bestätigt mit einem Klick auf „Next“.

Danach wählt ihr einen Browser aus. Safari wird bisher nicht unterstützt, wählt hier also „Google Chrome & Mozilla Firefox“ und bestätigt erneut mit „Next“. Im nächsten Schritt werdet ihr nach eurer Seiten-URL und einem Default-Icon gefragt. Die Domain sollte im besten Falle https kompatibel sein. Es funktioniert aber auch ohne. Dazu müsst ihr dann eine Subdomain unter Onesignal eingeben (bspw. „nick-hat-boecker“) und später muss ein entsprechender Parameter mehr gesetzt werden. Das Icon sollte in den Maßen 192×192 Pixeln vorliegen. Ich hatte zunächst testweise eine App angelegt und mir irgendein Icon unter google rausgesucht, musste dann jedoch feststellen, dass das Default-Icon nachträglich nicht verändert werden kann.

Nun ist die Frage, wie ihr mit dem Service kommunizieren wollt. Für WordPress gibt es bspw. ein Plugin. Ausprobiert habe ich das nicht, da unsere Musical-Webapp auf Symfony2 basiert. Dazu unten mehr. Wählt hier also wieder „Website Push“, wenn eure Seite nicht mit Wordpress läuft und bestätigt mit „Next“.

Damit habt ihr nun bereits die letzte Seite des Assistenten erreicht. Unter „Your App ID“ wird euch nun eure persönliche App ID angezeigt, die ihr zum Initialisieren der Notifications benötigt, einen Link zur Dokumentation und einen Button „Check subscribed Users“ um zu prüfen, ob bereits ein Benutzer eure Notifications abonniert hat. Die Seite könnt ihr erst einmal offen lassen, um im Nachhinein den Button zu klicken.

Vorbereitungen

Damit wir den Service initialisieren können, müssen außerdem die folgenden Dateien unter eurer Site-URL erreichbar sein:
https://github.com/one-signal/OneSignal-Website-SDK/releases/download/1.6.0/OneSignalSDKFiles.zip

Sprich, bei der Site-Url „https://nick-hat-boecker.de“ müsste die manifest.json unter https://nick-hat-boecker.de/manifest.json erreichbar sein. Ändert in der manifest.json „name“ und „short_name“, sowie „start_url“ falls diese abweicht. Wichtig: „gcm_sender_id“ darf nicht verändert werden.

Der Initialisierungs-Code

Damit Benutzer eure Notifications abonnieren können, müsst ihr folgenden Javascript-Code in den Head eurer Seite einbinden:

<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script> <script> var OneSignal = window.OneSignal || []; OneSignal.push(["init", { appId: "EURE_APP_ID", autoRegister: false, notifyButton: { enable: true, } }]); </script> </head>

Wenn eure Seite kein https unterstützt, muss der Code folgendermaßen um den Parameter „subdomainName“ erweitert werden:

<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script> <script> var OneSignal = window.OneSignal || []; OneSignal.push(["init", { appId: "EURE_APP_ID", autoRegister: false, notifyButton: { enable: true, },     subdomainName: 'nick-hat-boecker' }]); </script> </head>

Natürlich bietet die init-Funktion ein paar weitere Funktionen. Der Code auf unserer Musical-Seite sieht folgendermaßen aus. Das OneSignal-Copyright wird genauso wie das kleine Glocken-Icon ausgeblendet, da ich eine extra Seite eingebunden habe, auf der die Benutzer einstellen können, ob sie Notifications erhalten wollen oder nicht. Diese möchte ich später so erweitern, dass sich Benutzer nur für bestimmte Themen (bspw. neue News Einträge, aber nicht neue Kalender Einträge) einschreiben können. Zudem wird keine Willkommen-Benachrichtigung verschickt und die Benutzer werden automatisch für sämtliche Notifications angemeldet.

FYI: OneSignal empfiehlt die OneSignalSDK.js auf keinen Fall selber zu hosten.

<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script> <script> var OneSignal = window.OneSignal || []; OneSignal.push(["init", { appId: "EURE_APP_ID", autoRegister: true, notifyButton: { enable: false, size: 'large', showCredit: false, text: { 'tip.state.unsubscribed': 'Benachrichtigungen aktivieren', 'tip.state.subscribed': "Benachrichtigungen sind aktiviert", 'tip.state.blocked': "Benachrichtigungen sind deaktiviert", 'message.prenotify': 'Klicke um Benachrichtigungen zu aktivieren', 'message.action.subscribed': "Danke fürs Aktivieren!", 'message.action.resubscribed': "Benachrichtigungen wurden aktiviert", 'message.action.unsubscribed': "Benachrichtigungen wurden deaktiviert", 'dialog.main.title': 'Benachrichtigungen', 'dialog.main.button.subscribe': 'AKTIVIEREN', 'dialog.main.button.unsubscribe': 'DEAKTIVIEREN', 'dialog.blocked.title': 'Benachrichtigungen zulassen', 'dialog.blocked.message': "Folge dieser Anleitung um Benachrichtigungen zu aktivieren:" } }, welcomeNotification: { disable: true } }]); </script> </head>

Wenn ihr eure Seite nun mit dem Desktop PC oder eurem Smartphone öffnet, werdet ihr zunächst vom Browser gefragt, ob ihr Benachrichtigungen der verwendeten Seite zulassen wollt. Wichtig: Wenn ein Benutzer den Zugriff an dieser Stelle verweigert, werden die Push Notifications für ihn nicht funktionieren. Dazu müsste er den Zugriff erst in seinen Browsereinstellungen wieder freigeben.

Je nach Einstellung werdet ihr anschließend gefragt, ob ihr OneSignal Notifications zulassen wollt oder ihr werdet automatisch angemeldet. Wenn die Anmeldung abgeschlossen ist, könnt ihr nun auf die OneSignal Seite zurückkehren und den Button „Check subscribed Users“ klicken. Wenn dort alles in Ordnung ist, könnt ihr den Assistenten mit „Done“ abschließen.

Die erste Push Notification über die OneSignal Plattform versenden

Bevor wir nun eine Notification über den Appcode selbst verschicken, verschicken wir eine Push Notification über die OneSignal Plattform, um zu prüfen, ob alles bis hier hin funktioniert. Navigiert in OneSignal zu „New Push Notification“ und vergebt einen Titel, sowie eine entsprechende Nachricht. Die Inhalte müssen immer mindestens in englisch vorliegen, können aber um weitere Sprachen erweitert werden. Da meine Musical-Anwendung nur für deutsche Benutzer bestimmt ist, füge ich die deutschen Texte immer in die englischen Felder ein. Anschließend könnt ihr entweder weitere Einstellungen vornehmen (es können bspw. auch Testuser bestimmt werden) oder auf „Preview“ und anschließend auf „Send“ klicken.

Wenn alles korrekt konfiguriert wurde, erscheint nun die erste Push Notification auf eurem Smartphone. Herzlichen Glückwunsch!

Extra: eventbasierte Notifications mit Symfony2 verschicken

Da meine Anwendung wie bereits erwähnt auf Symfony2 und somit PHP basiert, erkläre ich euch im Folgenden, wie ihr programmbasiert eine Push Notification versenden könnt. Generell lässt sich die eingebundene Library natürlich auch für jedes andere PHP Projekt verwenden und OneSignal stellt darüber hinaus auch eine REST Api zur Verfügung.

Um das Ganze für euer Symfony Projekt zum Laufen zu kriegen, müsst ihr zwei Composer-Abhängigkeiten hinzufügen und installieren. Anschließend könnt ihr euch einen Service erstellen, der eure Texte entgegen nimmt, eine Notification baut und diese verschickt. Dazu muss im Konstruktor des Service der Client für OneSignal zusammengebastelt werden. Dazu benötigt ihr eure bereits bekannte App-ID, und einen Auth-Key. Diesen findet ihr unter OneSignal in den „App Settings“ im Tab „Keys & IDs“. Er wird dort als „REST API Key“ referenziert. Diese beiden Angaben übergebt ihr eurem Controller über die services.yml. Achtung: Den Auth-Key sollte niemand außer euch kennen, deshalb solltet ihr diesen in der parameter.yml hinterlegen, die nicht in die Versionierung mit aufgenommen werden sollte.

Ist der Service fertig konfiguriert könnt ihr in problemlos in eurem Controller aufrufen und über die Methode triggerMessage() eure Push Notification versenden. In meiner Musical-Anwendung haben wir natürlich viele verschiedene Typen an Notifications, weshalb die private Methode sendMessage() nur die Texte der einzelnen Typen entgegen nimmt und die letztendliche Message verschickt. Wenn ihr nur einen Notification-Typ habt, reicht natürlich auch eine Methode.

Fazit

Dank OneSignal ist das Einbinden von Push Notifications für hybride Apps einfacher denn je. Genauso wie ich es mir immer gewünscht habe. Wenn euch das Tutorial gefallen hat, würde ich mich sehr über ein wenig Feedback freuen.