© DrHitch/Shutterstock.com
Progressive Web-Apps

3 Echte Push Notifications für progressive Web-Apps


Einige Browser unterstützen bereits heute Push Notifications und bieten somit ein weiteres Merkmal, das in der Vergangenheit nativen Anwendungen vorbehalten war. Durch den Einsatz von Service Workers können diese außerhalb des Browserfensters sogar dann erscheinen, wenn die Anwendung nicht läuft oder das Endgerät gesperrt ist.

Progressive Web-Apps verfolgen das Ziel, den von nativen Anwendungen gebotenen Komfort ins Web zu bringen. Dazu gehört die Möglichkeit, die Anwendung über den Home-Bildschirm ohne lange Ladezeiten zu starten, aber auch die Implementierung von Offlineszenarien zum Überbrücken schlechter oder fehlender Datenverbindungen. Zusätzlich unterstützen einige Browser auch schon den Empfang von Push Notifications. Wie bei ihren nativen Gegenstücken informieren diese den Benutzer selbst dann über aufgetretene Ereignisse, wenn er die Browseranwendung gerade nicht ausführt oder gar den Sperrbildschirm aktiviert hat. Dazu blendet das System eine kurze Nachricht außerhalb des Anwendungsfensters ein.

Dieses Kapitel geht auf die Implementierung solcher Szenarien ein. Dazu stellt es eine Erweiterung zur hier verwendeten Angular-2-Anwendung vor. Den gesamten Quellcode stellt der Autor unter [1] zur Verfügung.

Push im Web

Push Notifications funktionieren im Web ähnlich wie bei klassischen Anwendungen: Der Client, hier der Browser, registriert sich bei einem Push-Dienst und erhält dabei eine ID (Abb. 3.1). Diese gibt er an ein Web-API weiter. Um später eine Push-Nachricht an den Client zu senden, beauftragt es den Push-Dienst unter Angabe der ID. Durch dieses Vorgehen muss der Browser nur mit dem Push-Dienst und nicht mit den einzelnen Web-APIs in Kontakt bleiben.

image

Abbildung 3.1: Die Push-Nachricht für die Webanwendung erscheint außerhalb des Browserfensters

Derzeit unterstützen Chrome und Firefox die Standards für solche Benachrichtigungen, aber auch andere Browserhersteller haben Interesse daran bekundet. Beispielsweise arbeitet Microsoft gerade an einer Unterstützung für Edge [2], und Apple führt für die zugrunde liegenden Service Workers zumindest den Status „under consideration“ an [3].

Für die Nutzung in Chrome ist die Webanwendung im Vorfeld bei der Google Developer Console unter [4] zu registrieren. Zusätzlich ist dort für die Anwendung das Google-Cloud-Messaging-API zu aktivieren und unter Credentials ein so genannter API Key für den Browser (Browser Key) zu erzeugen. Damit authentifizieren sich die genutzten Web-APIs beim Push-Dienst (siehe Pu...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang