Tutorial: Progressive Web Apps mit Workbox, Teil 2
PWA muss der Entwickler in die jeweilige Betriebsumgebung einbinden – egal ob mobiles Gerät oder Desktop. Allerdings machen hier noch nicht alle Browser mit.
- Steffen Jahr
Der zweite Teil des Tutorials für Progressive Web Apps (PWA) mit Workbox zeigt, wie man seine PWA in die Betriebsumgebung mobiler Geräte einbindet. Konkret: wie der Entwickler sie auf dem Home-Bildschirm ablegt (derzeit nur auf dem Smartphone) und den Benutzer per Push-Benachrichtigung auf neue Vorgänge in der Anwendung hinweist. Das Hinzufügen auf dem Desktop ist bisher noch nicht oder nur mittels experimenteller Features möglich.
Wie das genau geht, soll eine kleine Anwendung demonstrieren. Sie besteht aus einer Liste, der man Aufgaben hinzufügt, die man bearbeitet, erledigt und löscht – eine simple To-Do-Liste. Das Single-Page-Application-Framework Angular hilft dabei, die Handhabung der Liste zu verbessern und ihr ein natives Verhalten beizubringen, etwa dynamisches Austauschen der Inhalte. Allerdings nutzt die Beispielapplikation zur Umsetzung des Service Workers nicht die Angular-eigene Service-Worker-Implementierung, sondern aus Flexibilitätsgründen und aus dem Wunsch nach Unabhängigkeit vom Framework einen eigenen Ansatz in Kombination mit Workbox. Die Demoanwendung ist inklusive Installationsanleitung auf GitHub zu finden.
Manifestdatei einbinden
Um die PWA auf dem Home-Bildschirm abzulegen, benötigt der Browser, in dem sie aufgerufen wird, einige Details. Diese Metainformationen schreibt der Entwickler in die Datei manifest.json. Sie besitzt Eigenschaften, die den Browsern Hinweise für verschiedene Aktionen und Dialoge geben:
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Elektroauto MG4 Trophy im Test: Bestseller mit Batterie-Upgrade
Smart-Home-Zentralen im Vergleich: Amazons Echo Hub gegen Home Assistant
Fujifilm X100VI im Test: Neuauflage der beliebten Edelkompaktkamera
Wärmepumpe simpel und effektiv: Über die Rolle von Dämmung, Solar und Co.
Schöner sehen: Fünf 4K-Monitore mit USB-C für den Mac im Test
OpenCore Legacy Patcher: Wie Sie alte Macs mit jungem macOS aufbrezeln
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Elektroauto MG4 Trophy im Test: Bestseller mit Batterie-Upgrade
Smart-Home-Zentralen im Vergleich: Amazons Echo Hub gegen Home Assistant
Fujifilm X100VI im Test: Neuauflage der beliebten Edelkompaktkamera
Wärmepumpe simpel und effektiv: Über die Rolle von Dämmung, Solar und Co.
Schöner sehen: Fünf 4K-Monitore mit USB-C für den Mac im Test