Auf ein Wort: Was sind Progressive Web Apps

1. Grundzüge von Progressive Web Apps
2. Vorteile von PWAs
3. Technische Umsetzung
4. Progressive Web Apps mit TYPO3

Klassische Apps werden bei der Entwicklung immer für ein spezielles Betriebssystem, in der Regel iOS (Apple) oder Android (Google), angepasst – daher der Name native App. Installiert und heruntergeladen werden sie über den jeweiligen Store des Betriebssystems. Progressive Web Apps (PWA) verfolgen einen anderen Ansatz. Sie basieren auf klassischen Webtechnologien und sind somit über einen Browser erreichbar. Von dort aus sind auch sie installierbar. Nach der Installation kann die Anwendung über ein Icon auf dem Homescreen aufgerufen werden. Beim Klick auf das Icon öffnet sich die Anwendung - meistens, wenn entsprechend konfiguriert, im Vollbildmodus.

Rein optisch unterscheidet sich eine Progressive Web App also nicht von einer nativen App. Im Hintergrund läuft zur Ausführung allerdings stets ein Browser. Dadurch sind Progressive Web Apps erstmal gewöhnliche Webseiten, die um einige Funktionen erweitert werden. Über Schnittstellen können Progressive Web Apps beispielsweise auf die Kamera, auf das Mikrofon oder auf Sensoren des Gerätes, auf lokale Daten oder die Kontakte im Telefonbuch zugreifen. Andere Schnittstellen ermöglichen den Zugriff auf Steuerelemente des Gerätes oder den Vibrationsalarm. Eine weitere wichtige Eigenschaft ist die Offline-Fähigkeit. Das bedeutet, dass die Anwendung auch mit fehlender oder mangelhafter Internetverbindung funktioniert und Inhalte anzeigt.

Die Vorteile von Progressive Web Apps gegenüber native Apps sind eindeutig:

• geringere Entwicklungskosten
• bessere Wartung möglich
• Unabhängigkeit von Ranking in den App-Stores
• kein Installationszwang für den Nutzer
• Performanceanalyse über gängige Website-Analysetools möglich

Da Native Apps immer für ein bestimmtes Betriebssystem entwickelt werden, ist mindestens eine doppelte Entwicklung nötig, um alle User zu erreichen. Besteht zusätzlich eine Webanwendung mit der gleichen Funktionalität ist sogar eine dreifache Entwicklung notwendig. Bei Progressive Web Apps sind der Entwicklungsaufwand und damit die Kosten deutlich geringer.

Die Anwendung ist vom verwendeten Betriebssystem unabhängig und teilt sich stets dieselbe Code-Basis. Damit ist der Code zudem besser wartbar. Eine Änderung muss nur an einer Stelle vorgenommen werden. Außerdem sind Änderungen an der Anwendung in kürzester Zeit „live“, da der Code lediglich auf den Server deployt werden muss. Langwierige Freigabeprozesse durch die Stores der Betriebssysteme entfallen. Dies ist auch bei der erstmaligen Entwicklung der Anwendung von Vorteil. Die Time-to-Market ist im Vergleich zu Native Apps deutlich kürzer. Auch die Auffindbarkeit hängt nicht von der Suche und dem Ranking innerhalb der Stores ab.

Ein weiterer Vorteil ist, dass die Installation zwar möglich, aber nicht zwingend notwendig ist, um die Funktionalitäten der Anwendung zu nutzen. Da die Anzahl der neu installierten Apps pro Nutzer rückgängig ist, können auf diesem Weg User erreicht werden, die sich die Anwendung nicht installieren. Ein weiterer Vorteil von Progressive Web Apps ist, dass Analyse-Tools für die Suchmaschinenoptimierung weiterhin verwendet werden können, da der gesamte Traffic über den gleichen Server läuft.

Progressive Web Apps basieren auf klassischen Webtechnologien wie HTML, CSS und JavaScript. Der Zugriff auf die erwähnten Schnittstellen erfolgt mit JavaScript. Die Schnittstellen selbst sind durch Spezifikationen des W3C-Konsortiums definiert. Nicht alle Browserversionen unterstützen die aktuellsten Spezifikationen. Daher ist es üblich erst zu testen, ob eine Schnittstelle im jeweiligen Browser vorhanden ist, ehe sie verwendet wird. Falls die Verwendung der Schnittstelle nicht möglich ist, wird ein Workaround verwendet. Dieses Vorgehen nennt sich Progressive Enhancement.

Im Unterschied zu klassischen Webseiten verfügt eine PWA über zwei zusätzliche Dateien:

1. das Webmanifest
2. der Service Worker

Das Webmanifest dient als Absichtserklärung, eine Progressive Web App zu sein. Es enthält alle Metainformationen, die für die Installation nötig sind, darunter den Namen, einen Link zum Homescreen-Icon und den Anzeigemodus. Die zweite zusätzliche Datei ist der Service Worker. Diese ist eine JavaScript-Datei, die im Hintergrund ausgeführt wird, auch dann, wenn die Anwendung gar nicht geöffnet ist. Der Service Worker ist hauptsächlich für die Offline-Fähigkeit der Anwendung zuständig. Dafür speichert er Inhalte in einem internen Cache zwischen und fungiert als eine Art Proxy zwischen der Anwendung im Client und dem Server. Zudem kann der Service Worker Push Notifications verschicken.

Eine bestehende TYPO3-Webseite kann bereits mit wenigen Handgriffen zur Progressive Web App erweitert werden. Dafür werden die beiden erwähnten zusätzlichen Dateien manuell oder mit Hilfe einer Extension hinzugefügt. Die Extension PWA Manifest erstellt die Manifest-Datei beispielsweise, basierend auf Eingaben im Backend, automatisch. Meist empfiehlt es sich jedoch, nur einen Teil einer komplexeren Seite als Progressive Web App zu realisieren und das User Interface entsprechend anzupassen. Eine weitere Möglichkeit ist es, TYPO3 als Headless CMS zu verwenden und ihm eine Single-Page-Application als Frontend zur Seite zu stellen. 

Autor: Luka Mutschler