Web Push-Benachrichtigung mit OneSignal und Hugo

Eine einfache Möglichkeit seinen Webseiten-Besucherkreis regelmäßig über Neuigkeiten zu informieren, ist die sogenannte Web Push-Benachrichtigung.

Besucher, die zum ersten Mal auf die Seite gelangen, werden automatisch befragt, ob sie zukünftig über Neuigkeiten informiert werden möchten. Dabei sind keine persönlichen Angaben wie der Name oder einer Email-Adresse notwendig. Die Benachrichtigung erfolgt einzig über den Browser. Das Gute daran ist, dass der Browser dafür nicht einmal geöffnet sein muss.

Unterstützt werden auf Windows und Android die Browser Chrome, Firefox, Edge, Opera und Yandex. Auf macOS werden Chrome, Firefox, Safari, Opera und Yandex unterstützt. Auf iOS wird aktuell noch kein Web Push unterstützt.

Für die Implementierung habe ich den Anbieter OneSignal gewählt. Bis 30’000 Abonnenten ist der Dienst gratis, die Dokumentation und die Browserunterstützung ist sehr gut. Und, was eventuell später auch noch interessant sein könnte, es gibt bereits eine Option für «Email-Benachrichtigung», die derzeit in der Beta-Phase zur Verfügung steht.

Meine Webseite ist mit dem statischen Seitengenerator Hugo erstellt. Daher muss sämtlicher Code für die Funktionalität des Web-Pushs mittels Javascript möglich sein. Gemäß Dokumentation sind dafür aber nur wenige Zeilen Code notwendig.

OneSignal konfigurieren

Als erster Schritt wird ein Konto auf OneSignal erstellt. Dazu klickt man auf «Start for Free» oder «Sign Up». Der Account muss über die angegebene eMail-Adresse anschließend bestätigt werden.

Startseite von OneSignal
Startseite von OneSignal

Nachdem das Konto bestätigt wurde, muss eine «App» erstellt werden. In unserem Fall ist das die Webseite danielseidel.com, denn für diese Webseite wollen wir die Push-Benachrichtigung einrichten. Als nächstes wählt man den Typ der Benachrichtigung aus:

Web Push als Benachrichtigungstyp
Web Push als Benachrichtigungstyp

Wir wollen im Moment nur Web Push anbieten, daher wird diese Option angewählt.

Als Integrationstyp habe ich «Typical Site» gewählt, da Hugo nicht zur Auswahl stand. Wer seine Seite über ein gängiges CMS erstellt (z.B. Wordpress, Blogger, Drupal, SquareSpace, Joomla, Wix, …) wählt am besten «Wordpress Plugin or Website Builder» aus.

Im Schritt 2 sind ein paar Angaben zur Domain zu machen. Es muss die genaue Url-Adresse hinterlegt werden und man muss angeben, ob die Webseite https fähig ist.

Im Schritt 3 kann die Nachricht konfiguriert werden, die der Browser allen neuen Besuchern bezüglich der Benachrichtigungen zeigt. Der Text für die Nachricht und die Auswahl-Buttons sind komplett anpassbar.

Konfiguration für die Frage nach Web Push-Benachrichtigung
Konfiguration für die Frage nach Web Push-Benachrichtigung

Im Schritt 4 kann noch eine Dankes-Nachricht konfiguriert werden. Diese wird angezeigt, falls sich der Besucher für die Web Push-Benachrichtigung angemeldet hat.

Konfiguration der Willkommens-Nachricht
Konfiguration der Willkommens-Nachricht

An dieser Stelle ist die Konfiguration auf OneSignal abgeschlossen. Die nächsten Schritte beinhalten noch die Erklärung, was genau auf der Webseite eingebaut werden muss.

Webseite anpassen

Jetzt muss nur noch die Webseite für die Funktionalität vorbereitet werden.

Damit die Webseite Web Push-Benachrichtung anbieten kann, müssen drei OneSignal-Files im root-Verzeichnis abgespeichert werden und ein kleiner Code-Abschnitt auf der Startseite eingebaut werden.

Die Files kann man in Schritt 6 herunterladen. Es sind dies:

manifest.json
OneSignalSDKUpdaterWorker.js
OneSignalSDKWorker.js

Wer Hugo als CMS verwendet, muss diese Files ins /static Verzeichnis kopieren. Beim Build-Prozess werden diese dann automatisch ins root-Verzeichnis kopiert.

Anschließend kopiert man folgende Code-Zeilen in den head-Bereich der Webseite. Er wird ebenfalls von OneSignal automatisch generiert.


<link rel="manifest" href="/manifest.json" />
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "< ***deine appId hier einfügen*** >",
    });
  });
</script>

Der Code sorgt für die Initialisierung der Web Push-Funktionalität und fordert neue Besucher auf, sich zur Benachrichtigung anzumelden (sofern sie sich nicht schon an- oder abgemeldet haben).

Wer nicht alle neuen Besucher mit der Frage zur Web Push-Benachrichtung «belästigen» möchte, könnte den Code natürlich auch auf einer speziellen Unterseite einbauen und auf diese aus dem Menü verlinken.

Neue Push-Nachrichten werden dann über die Oberfläche von OneSignal erstellt und versendet.

Neue Push-Nachrichten erstellen
Neue Push-Nachrichten erstellen

Ähnliches