Was ist eine progressive Web App?

Progressive Web Apps (kurz: PWA) sind im Webfrontend-Bereich das Buzzword 2018. Genauer gesagt existiert der Begriff progressive Web App schon seit mehreren Jahren. Jedoch ist vielen noch nicht klar, um was es sich dabei handelt. Oft werden responsive Webapps damit in Verbindung gebracht – doch wie hängen diese beiden Paradigmen zusammen? Und welche Technologien werden für progressive Web Apps benötigt? Diese und weitere Fragen möchte ich in diesem Beitrag beantworten.

Als Argumente für native Apps werden gegenüber Webapps meist eine bessere Performance und die Möglichkeit zur Verwendung nativer Funktionen wie Kamera, GPS-Sensor, etc. genannt. Doch mit immer leistungsfähigerer Hardware und der Erweiterung der W3C-Spezifikation (HTML 5.3) zur Anbindung von nativen Funktionen werden diese beiden Argumentationspunkte bald nichtig. Die native- und die web-Welt verschmelzen endlich.

Merkmale einer progressive Web App

Progressive Web Apps haben genau dieses Verschmelzen aus nativer- und web-Welt zum Ziel: der Benutzer soll eine webbasierte App nicht mehr von einer nativen unterscheiden können. Hierzu gibt es verschiedene Merkmale, die eine progressive Web App erfüllen sollte:

• Offline Funktionalität: Die Webapp an sich sollte auch ohne Internet Verbindung funktonieren, d.h. der Benutzer sollte niemals einen Browser-Fehler (404 – Keine Internetverbindung) zu sehen bekommen
• Push-Benachrichtigungen: Der Benutzer sollte Benachrichtigungen proaktiv erhalten
• Add-To-Homescreen Feature: Die Webapp sollte sich zum Homescreen des Smartphones hinzufügen lassen und somit den Zugriff wie auf einer nativen App ermöglichen
• Verwendung von nativen Funktionen: Keine Einschränkung bei nativen Funktionen gegenüber nativen Apps
• Repsponsive Design: Das Design sollte sich dem jeweiligen Endgerät und Auflösung anpassen

Wird eine mobile App nach dem progressive Web App Paradigma designed und entwickelt, sollten die oben genannten Merkmale aus Benutzersicht erfüllt werden. Dazu muss der Entwickler Technologien wie HTML5 Local Storage für das Caching, eine Webapp Manifest-Datei, die das Add-To-Homescreen Feature ermöglicht, oder einen Service Worker einsetzen. Ein Service Worker ist ein JavaScript-Programm, welches als clientseitiger Proxy zwischen der eigenen Web App und dem Internet dient. Hier müssen beispielsweise auch die offline Funktionalitäten implementiert werden. Eine detaillierte Liste aller technischen Anforderungen an eine progressive Web App hat Google in einer Progressive Web App Checklist veröffentlicht. Bereits der zweite Punkt der Checkliste beantwortet die Frage nach dem responsive Design. Eine progressive Web App muss auch responsive sein. Man kann daraus ableiten, dass progressive Web Apps die nächste Evolutionsstufe in der Entwicklung von Webapps sind. Dies zeigt auch das globale Suchvolumen zu den beiden Buzzwords.

Abschließend muss noch erwähnt werden, dass die bereitgestellten Technologien wie z.B. die Webapp Manifest-Datei natürlich nur funktionieren, wenn die jeweils verwenden Browser der Benutzer diese auch unterstützen. Bei diesem konkreten Beispiel unterstützt Microsoft weder mit dem Internet Explorer 11, noch mit dem aktuellen Edge Browser die Web App Manifest Datei. Auch Mozilla lässt mit dem Firefox und der Implementierung des Features noch auf sich warten. Apple hingehen unterstützt ab Safari 11.1 den „Einstieg“ in die progressive Web Apps. An dieser Stelle kann man nur hoffen, dass bald alle Browser die – vor allem von Google definierten – Standards für progressive Web Apps unterstützen. Vielleicht wird dadruch die Installation von nativen Apps weitestgehend überflüssig und progressive Web Apps können sich als Standard für mobile Apps etablieren.

Tipp: wie „progressive“ Ihre Web App heute schon ist, lässt sich mit dem Lighthouse Plugin für Google Chrome analysieren.

Bildquelle: caniuse.com/#feat=web-app-manifest