Auf ein Wort: Was sind Progressive Web Apps?

Foto: Yura Fresh, Unsplash

Foto: Yura Fresh, Unsplash

Grundzüge von Progressive Web Apps

Klassische, Native Apps werden bei der Entwicklung immer für ein spezielles Betriebssystem, in der Regel iOS (Apple) oder Android (Google), angepasst – daher der Name nativ. 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.

Vorteile von Progressive Web Apps gegenüber Native Apps

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.

Technische Umsetzung von PWA Apps

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. Eine davon ist das Webmanifest, das als Absichtserklärung dient, eine Progressive Web App zu sein. Das Manifest 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. Der Service Worker 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.

Progressive Web Apps mit TYPO3

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