Progressive Web Apps – eine kurze Übersicht

24/08/2017

Progressive Web Apps sind der neue heilige Gral in der Welt der Webanwendungen. Seit Google den Begriff 2015 geprägt hat, gewinnt das Konzept der PWAs mehr und mehr an Popularität. Es könnte dabei die Art und Weise, wie wir Webanwendungen entwickeln und verwenden, in den kommenden Jahren vollständig umkrempeln.

Die Idee hinter PWAs: Statt eine Anwendung (beispielsweise einen Onlineshop) auf einer Webseite und parallel als Apps für verschiedene Plattformen wie iOS oder Android anzubieten – samt dem damit verbundenen mehrfachen Entwicklungsaufwand – wird die Anwendung in eine einzige, plattformunabhängige Progressive Web App gesteckt.

Aus Anwendersicht ist eine PWA nichts weiter als eine App mit einem responsiven Layout, die auch offline funktioniert und die per Browser über eine URL erreichbar ist, aber gleichzeitig auch dauerhaft auf dem Homescreen von mobilen Geräten gespeichert werden kann.
Aus Entwicklersicht ist eine PWA ein Bündel aus HTML5, CSS3 und JavaScript, bei dem ein sogenannter Service Worker die Offline-Funktionalität bereitstellt und die über HTTPS mit einem Server kommuniziert.

Im Folgenden sollen kurz die Eigenschaften von PWAs und ihre möglichen Folgen für die App-Entwicklung skizziert werden. Am Ende werden verschiedene Tools und Frameworks für die Entwicklung von PWAs vorgestellt.

Eigenschaften von PWAs

Schauen wir wie Google Progressive Web Apps definiert, finden wir unter anderem eine Checkliste für PWAs, wie Google’s Lighthouse-Tool sie vorgibt, mit dem u.a. die Performance und Qualität von PWAs getestet werden kann. Zusammengefasst hat eine PWA folgende Eigenschaften:

Progressivität: Eine PWA läuft auf jedem Gerät und in jedem Browser (so jedenfalls die Idee; bisher noch nicht überall erreicht, siehe weiter unten).
Responsive: Das Layout der PWA passt sich an die Bildschirmauflösung von Desktop-Monitoren, Tablets und Smartphones an.
Offline-Funktionalität: Die PWA funktioniert grundsätzlich auch offline oder mit einer schlechten Internetverbindung.
Sicherheit: Die PWA wird über verschlüsseltes HTTPS ausgeliefert und kommuniziert auch ausschließlich über HTTPS.
Push-Nachrichten: Benutzerinnen und Benutzer können per Push-Nachrichten auf die PWA aufmerksam gemacht werden.
Installierbarkeit: PWAs lassen sich direkt aus dem Browser heraus auf dem Homescreen installieren. Sie benötigen daher keinen App-Store mehr.
Verlinkbarkeit: einfache Verbreitung über eine URL. Keine komplizierte Installation mehr.

Was haben PWAs für Folgen?

Wenn mehr und mehr Funktionalität in die Browser übertragen wird, inklusive Hardware-Unterstützung wie das Auslesen der Kamera und anderer Sensoren wie zum Beispiel des Standardortes über GPS und dergleichen, sind Progressive Web Apps auf dem besten Weg, einige herkömmliche Technologien überflüssig zu machen. Bis heute sind noch SDKs für native Apps oder beispielsweise Apache Cordova/Phonegap für hybride Apps notwendig, um einer App diese Hardware-Unterstützung zu bieten. Sobald dies über den Browser angeboten wird, können PWAs die meisten Aufgaben herkömmlicher Apps übernehmen.

Den Gedanken zu Ende gedacht könnte die Zukunft von Betriebssystemen für mobile Geräte allein aus einer Kombination aus Kernel und Browser bestehen.

Bisher wurden Apps primär über die App-Stores für Android und iOS ausgeliefert. Eine PWA, die direkt über den Browser heraus dauerhaft installiert werden kann, macht solche Stores überflüssig. Dazu kommt der große Vorteil, dass PWAs direkter und damit schneller aktualisiert werden können. Das geht bis zu der Idee, dass für kleine Änderungen auch nur die entsprechenden Komponenten aktualisiert werden statt die ganze App auf einmal.

PWAs ermöglichen einen direkteren Kontakt zwischen Entwicklerinnen und Entwicklern mit den Usern ihrer Apps.

Beispiele für PWAs

Umfangreiche Listen der verschiedensten PWAs bieten u.a. Google’s PWA-Verzeichnis sowie die Liste von PWAs in der englischen Wikipedia.

Eine PWA entwickeln

Progressive Web Apps basieren auf zwei durch das des WWW-Konsortium W3C festgelegte Spezifikationen: dem Web App Manifest und den Service Workers. Praktisch wird eine PWA in HTML5, CSS3 und JavaScript umgesetzt, wobei der Service Worker die Offline-Funktionalität bereitstellt.

Der Service Worker ist eine in JavaScript geschriebene Browsertechnologie, die im Hintergrund läuft und vor allem zwei Funktionen vorhält: Die Speicherung von Daten und Inhalten unabhängig von einer Internetverbindung sowie die Annahme von Push-Nachrichten, die von einem Server gesendet werden.

Der Service Worker ist auch der Grund dafür, dass PWAs noch nicht auf allen Browsern lauffähig sind. Dies betrifft vor allem die Browser Safari und Edge, für die aber bereits an einer Implementierung des Service Workers gearbeitet wird. Der aktuelle Stand des Supports für verschiedene Browser kann auf der Webseite Is Service Worker Ready Yet? abgerufen werden.

Zusätzlich kann die Entwicklung durch die Verwendung von Frameworks erleichtert werden, die viele der benötigten Funktionen und Elemente schon von Haus aus mitbringen:

Angular: ist ein TypeScript- bzw. JavaScript-basiertes Webapplikationsframework für das Front-End. Um Verwechselungen zu vermeiden wird der Vorgänger statt Angular 1 mittlerweile AngularJS genannt, während die aktuelle Version schlicht Angular heißt. Angular wird von Einzelpersonen und Unternehmen unter der Führung Googles entwickelt und steht unter der freien MIT-Lizenz. Mehr dazu auf der Angular-Webseite.
Polymer: ist eine freie, unter der BSD-Lizenz stehende JavaScript-Bibliothek für die Entwicklung von Webanwendungen mittels Web-Komponenten. Polymer wurde im Mai 2015 von Google veröffentlicht und mittlerweile in verschiedenen Google-Diensten eingesetzt. Mehr dazu auf der Polymer-Webseite.
Vaadin: ist ein freies, unter der Apache-Lizenz stehendes Framework mit Fokus auf der Entwicklung von Web-Komponenten, wobei die Logik vor allem in Java auf der Serverseite untergebracht ist. Mittels Polymer können Vaadin-Komponenten in PWAs integriert werden. Mehr auf der Vaadin-Webseite.

Ganz frisch veröffentlicht ist Stencil, ein Kompiler mit dem plattformunabhängige Web-Komponenten für PWAs erstellt werden können. Mehr dazu auf der Stencil-Webseite. Stencil wurde im August 2017 auf dem Polymer Summit vom Ionic-Team vorgestellt, die mit zu den PWA-Vorreitern gehören.

Zusammengefasst

PWAs haben das Potenzial, die Art und Weise wie wir Apps entwickeln und benutzen zu revolutionieren. Sollten PWAs sich in der breiten Masse durchsetzen, wird dies zudem einen starken Einfluss auf das Betriebssystem auf mobilen Geräten haben und nicht zuletzt völlig neue Vertriebswege von Apps abseits der althergebrachten Stores auftun.