Tutorial: Progressive Web Apps mit Workbox, Teil 1
Fortschrittlich
Progressive Web Apps sind Webanwendungen, die sich wie lokal installierte Apps anfühlen. Ein wesentliches Element ist der Service Worker, der dafür sorgt, dass PWA auch ohne Netzwerkverbindung funktionieren.
Progressive Web Apps (PWA) sind das App-Modell der Zukunft: Schon seit einigen Jahren treibt Google ein Konzept voran, das Webanwendungen in auf dem Gerät installierte Apps verwandeln möchte. Dazu gehören native Features wie ein eigenes Symbol auf dem Home-Bildschirm oder in der Programmliste des Systems, Push-Benachrichtigungen oder Offlinefähigkeit.
Das Anwendungsmodell funktioniert plattformübergreifend, vom iPhone über das Android-Tablet bis hin zum Windows-Desktop. Ausführungsumgebung sind die Webbrowser, die seit dem Aufkommen von HTML 5 eine wahre Flut an modernen Webschnittstellen mit nativer Power erlebt haben: Mittlerweile ist es möglich, aus dem Webbrowser heraus auf Mikrofon und Kamera des Anwenders zuzugreifen oder hardwarebeschleunigte 2D- und 3D-Visualisierungen umzusetzen und darauf aufbauend Virtual-Reality-Anwendungen zu implementieren.
Für Entwickler haben Progressive Web Apps den Vorteil, dass sie nur noch eine einzige Anwendung schreiben müssen, die auf unterschiedlichen Systemen läuft. Auch die Bereitstellung der Anwendung erweist sich als besonders einfach: Ihre Quelldateien werden schlichtweg auf einen Webserver hochgeladen. Zentrale Techniken bei Progressive Web Apps sind der Service Worker zur Umsetzung von Offlinefähigkeit und das Verschicken von Push-Benachrichtigungen sowie das Web App Manifest, das die Gestaltung des Symbols auf dem Home-Bildschirm und in der Programmliste konfiguriert.
Alle vier großen Browserhersteller sind mit ihren Webbrowsern an Bord: Google Chrome (ab Version 40), Mozilla Firefox (ab Version 44), Microsoft Edge (ab Version 17) und Apple Safari (ab Version 11.3). Das Ausmaß der Unterstützung variiert jedoch je nach Browser, es stehen also nicht auf jedem Browser sämtliche PWA-Features zur Verfügung.
Das Konzept der Progressive Web Apps kommt zunehmend in der realen Welt an. So setzen bmw.com und lotto.de die oben genannten Techniken ein, um ihr Webangebot zu einem gewissen Grad auch offline verfügbar zu machen. Um Apps im engeren Sinne handelt es sich bei beiden Angeboten allerdings nicht. Vorzeigbare Progressive Web Apps, die diesen Namen verdienen, sind beispielsweise Twitter Lite (mobile.twitter.com), der offizielle mobile Client für das soziale Netzwerk, oder die Progressive Web App der Financial Times (app.ft.com).
In dieser und den kommenden drei Ausgaben der iX zeigen mein Kollege Steffen Jahr und ich, wie Sie Progressive Web Apps mit Googles Werkzeug Workbox entwickeln können. Im ersten Teil des Tutorials geht es um die Eigenschaften, die Progressive Web Apps auszeichnen, die Frameworkunabhängigkeit des Anwendungsmodells und Workbox als eine Lösung zur Entwicklung von PWA.
Der zweite Teil beschäftigt sich mit der Installation von PWA auf dem Home-Bildschirm und der Umsetzung von Push-Ereignissen auf nativer und Anwendungsebene. Themen von Teil 3 sind der technische Kern der PWA, der Service Worker, und Caching-Strategien, um Anwenderdaten und die Quelldateien der Anwendung offline zu halten. Schließlich stellen wir im vierten Teil einige moderne Webschnittstellen vor und geben eine Einschätzung, wann sich Investitionen in dieses Anwendungsmodell für Softwareentwickler lohnen.
Die DNA von Progressive Web Apps
Progressive Web Apps bezeichnen keine in sich geschlossene Technologie, sondern eher eine Sammlung von Eigenschaften, die eine solche Webanwendung umsetzen sollte. Die zehn Eigenschaften sind:
Progressiv: Nicht alle Webbrowser und -versionen, die Anwender weltweit verwenden, unterstützen sämtliche PWA-Schnittstellen. Eine Progressive Web App soll auf diesen Systemen allerdings dennoch laufen – zumindest im Rahmen des Möglichen. Dieses Prinzip nennt man Progressive Enhancement: Auf Systemen, die eine Unterstützung für die PWA-Schnittstellen mitbringen, erhält der Anwender eine bessere Benutzererfahrung. Auf keinen Fall darf die Anwendung wegen einer fehlenden Schnittstelle abbrechen.
Responsiv: Die Anwendung soll ein responsives Webdesign umsetzen. Dabei passt sich die Gestaltung der Anwendung den zur Verfügung stehenden Bildschirmabmessungen an: Während auf Smartphones mit Fingereingabe Menüs eingeklappt und nur die wichtigsten Inhalte dargestellt werden, sind auf Desktop-Geräten zusätzliche Inhalte sichtbar und Steuerelemente lassen sich dichter beieinander platzieren, da die Maus eine präzisere Eingabe ermöglicht. Das stellt sicher, dass Anwender sowohl auf Smartphones als auch an einem Desktop-Arbeitsplatz mit einem 27-Zoll-Bildschirm eine sinnvolle Benutzererfahrung haben.
App-like: Progressive Web Apps sollen Anwendungsrahmen (App-Shells) mit einer Navigationsstruktur, Übergangseffekten und Interaktionen wie Touch-Gesten implementieren, wie sie der Anwender von nativen Anwendungen kennt. Im Idealfall merkt der Anwender gar nicht, dass er gerade eigentlich mit einer Website interagiert.
Offlinefähigkeit: PWA sollen nicht von der Internetverbindung abhängen. Selbst wenn der Anwender komplett offline ist, müssen sie im Rahmen des Möglichen funktionieren – hier kommt der Service Worker ins Spiel. Die Eigenschaft der Offlinefähigkeit deckt zwei Aspekte ab: einerseits die Anwendungsquelldateien, sodass die App-Shell offline läuft, andererseits die Anwenderdaten. Kann ein Anwender Änderungen nicht abschicken, kann die App diese lokal zwischenspeichern und bei Bestehen einer Internetverbindung hochladen.