© Excellent backgrounds/Shutterstock.com
Java Magazin
Teil 3: Echte Push Notifications für Progressive Web-Apps

Fast wie native


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 Workern können sie außerhalb des Browserfensters sogar dann erscheinen, wenn die Anwendung nicht läuft oder das Endgerät gesperrt ist.

Video: User Interfaces: Welche Webtechnologie passt zu mir?

Artikelserie

Teil 1: Offlinefähige Web-Apps mit Angular 2

Teil 2: Browserdatenbanken und Synchronisierung im Hintergrund

Teil 3: Echte Push Notifications für Progressive Web-Apps

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 sie 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 (Abb. 1). Dieser Artikel geht auf die Implementierung solcher Szenarien ein. Dazu stellt er eine Erweiterung zur in der vorliegenden Artikelreihe verwendeten Angular-2-Anwendung vor. Den gesamten Quellcode stellt der Autor unter [1] zur Verfügung.

steyer_angular_1.tif_fmt1.jpgAbb. 1: Push-Nachricht für Webanwendung erscheint außerhalb des Browserfensters

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. 2), die er an ein Web-API weitergibt. 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.

steyer_angular_2.tif_fmt1.jpgAbb. 2: Nachrichten werden über einen Push-Dienst versendet

Derzeit unterstützen Chrome und Firefox die Standards für solche Benachrichtigungen, und auch andere Browserhersteller haben bereits Interesse daran bekundet. So gibt Microsoft bekannt, dass es gerade an einer Unterstützung für Edge arbeitet [2] und Apple führt für die zugrunde liegenden Service Worker zumindest den Status under consideration an [3]. Für die Nutzung in Chrome ist die Webanw...

Java Magazin
Teil 3: Echte Push Notifications für Progressive Web-Apps

Fast wie native

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 Workern können sie außerhalb des Browserfensters sogar dann erscheinen, wenn die Anwendung nicht läuft oder das Endgerät gesperrt ist.

Manfred Steyer


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 Workern können sie außerhalb des Browserfensters sogar dann erscheinen, wenn die Anwendung nicht läuft oder das Endgerät gesperrt ist.

Video: User Interfaces: Welche Webtechnologie passt zu mir?

Artikelserie

Teil 1: Offlinefähige Web-Apps mit Angular 2

Teil 2: Browserdatenbanken und Synchronisierung im Hintergrund

Teil 3: Echte Push Notifications für Progressive Web-Apps

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 sie 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 (Abb. 1). Dieser Artikel geht auf die Implementierung solcher Szenarien ein. Dazu stellt er eine Erweiterung zur in der vorliegenden Artikelreihe verwendeten Angular-2-Anwendung vor. Den gesamten Quellcode stellt der Autor unter [1] zur Verfügung.

steyer_angular_1.tif_fmt1.jpgAbb. 1: Push-Nachricht für Webanwendung erscheint außerhalb des Browserfensters

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. 2), die er an ein Web-API weitergibt. 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.

steyer_angular_2.tif_fmt1.jpgAbb. 2: Nachrichten werden über einen Push-Dienst versendet

Derzeit unterstützen Chrome und Firefox die Standards für solche Benachrichtigungen, und auch andere Browserhersteller haben bereits Interesse daran bekundet. So gibt Microsoft bekannt, dass es gerade an einer Unterstützung für Edge arbeitet [2] und Apple führt für die zugrunde liegenden Service Worker zumindest den Status under consideration an [3]. Für die Nutzung in Chrome ist die Webanw...

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