© prettyboy80/Shutterstock.com
Mobile Technology
Teil 3: Echte Push Notifications für progressive Web-Apps

Sie haben Post!

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.

Manfred Steyer


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. Artikelserie Teil 1: Progressive Web-Apps mit Angular 2 und Service Workers Teil 2: Browserdatenbanken und Synchronisierung im Hintergrund Teil 3: Echte Push Notifications für progressive Web-Apps Teil 1: Progressive Web-Apps mit Angular 2 und Service WorkersTeil 2: Browserdatenbanken und Synchronisierung im HintergrundTeil 3: Echte Push Notifications für progressive Web-AppsPush im WebPush 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. 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.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 Punkt 3 in Abb. 1). Bei der Registrierung generiert die Developer Console auch eine Projektnummer, die im Webmanifest als gcm_sender_id einzutragen ist (Listing 1). Hierbei handelt es sich um eine Google-spezifische Erweiterung. Eine detaillier...

Mobile Technology
Teil 3: Echte Push Notifications für progressive Web-Apps

Sie haben Post!

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.

Manfred Steyer


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. Artikelserie Teil 1: Progressive Web-Apps mit Angular 2 und Service Workers Teil 2: Browserdatenbanken und Synchronisierung im Hintergrund Teil 3: Echte Push Notifications für progressive Web-Apps Teil 1: Progressive Web-Apps mit Angular 2 und Service WorkersTeil 2: Browserdatenbanken und Synchronisierung im HintergrundTeil 3: Echte Push Notifications für progressive Web-AppsPush im WebPush 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. 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.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 Punkt 3 in Abb. 1). Bei der Registrierung generiert die Developer Console auch eine Projektnummer, die im Webmanifest als gcm_sender_id einzutragen ist (Listing 1). Hierbei handelt es sich um eine Google-spezifische Erweiterung. Eine detaillier...

Neugierig geworden?


    
Loading...

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