Labor

Bausteine einer Progressive Webapp

Was ist eine Progressive Webapp?

Eine Progressive Webapp verspricht in erster Linie ein deutlich verbessertes mobiles Nutzererlebnis. Insbesondere wird dies durch zwei Web-APIs unterstützt: Pushmessages und Offline-Speicherung. Aber Progressive bedeutet z.B. auch die Möglichkeit zu haben einen Button auf dem Homescreen zu platzieren.
Die jeweilige Nutzung der Web-APIs aus der Webapplikation ist stark vom eingesetzen Browser abhängig. Hierzu bietet die Webseite https://whatwebcando.today/ die Möglichkeit alle Web-API und deren Verfügbarkeit zu prüfen bzw. auch zu testen.

Dezent im Hintergrund: Der Serviceworker

Die o.g. Kernmerkmale einer Progressive Weabpp benötigen einen Mechanismus der im Hintergrund die Kommunikation mit der Umgebung filtert und verantwortet. Hier kommt ein Serviceworker zum Einsatz; dies ist ein eigenständiger Prozess der auch bei geschlossenem Browser Empfang und Anzeige einer z.B. Pushmessage übernimmt oder Request aus der Webanwendung heraus filtern kann, z.B. für Offlineanwendungen. https://serviceworke.rs bietet gute Recipes für unterschiedliche Einsatzzwecke.

Wie genau funktionieren Pushmessages?

Hier eine Kurzanleitung:

Serviceworker
Wie oben beschrieben ist die Instanzierung eines Serviceworkers die Grundvorraussetzung
User für Pushmessage anmelden
Die Applikation holt über den Browser die Einwilligung des Nutzers für den Empfang von Nachrichten.
Erzeugen eines Private/Public Schlüsselpaar
Zur Kommunikation mit dem Pushservice muss ein Schlüsselpaar erzeugt werden.
Handshake mit Pushservice
Der Pushservice wird vom Browser bestimmt, d.h. jeder Browser hat einen festen Pushservice der nicht änderbar ist(!). Hierfür wird dem Pushservice der öffentliche Schlüssel bekanntgegeben, dieser dient später zur Zuordnung von Browser und Nachricht.
Versand einer Pushmessage
Der Header einer Nachricht muss mit den privaten Schlüssel signiert werden und beim Pushservice eingeliefert.
Pushmessages sind leider derzeit noch nicht in vielen Browsern verfügbar, eine Ausnahme bildet hierbei Chrome for Android.

Detaillierte Guides zu Pushmessages

https://web-push-book.gauntface.com ist eine sehr detaillierte Anleitung, nutzbar auch als Cookbook.

https://pwa.rocks biete einige gute reale Referenzen, z.B. Ali Express.