Progressive Web Apps — was ist das & wofür sind sie gedacht?

Wir werfen einen Blick darauf, was progressive Web Apps ausmacht und welche Vor- und Nachteile diese Entwicklungsweise mit sich bringt.

Im Artikel “Was ist eine hybride App und ist das gut oder schlecht?” habe ich bereits 3 unterschiedliche Arten der App-Entwicklung vorgestellt:
native-, hybride- und Web-Apps.

Doch um die Runde zu vervollständigen fehlt noch eine: die progressive Web App. Erstmals erwähnt wurden progressive Web Apps (kurz PWA) 2015 von Alex Russell in seinem Artikel “Progressive Web Apps: Escaping Tabs Without Losing Our Soul”. Dort berichtet er von “einer neuen Klasse von Anwendungen”, die auf der Entwicklung moderner Browser basieren. Diese werden nicht, wie native oder hybride Apps, über App-Stores bereitgestellt. Sondern es sind Webseiten, die sich nach und nach zu Apps entwickeln. Daher auch der Name “Progressive Web Apps” (progressiv = sich entwickelnd).

Ganz konkret — wie sehen PWAs aus?

Am Anfang steht also wie gesagt eine Website. Diese sieht erst mal aus wie jede gewöhnliche Seite, wurde aber unter Berücksichtigung progressiver Web App Funktionen entwickelt. Diese Funktionen sind 
- TLS (Transport Layer Security, ein hybrides Verschlüsselungsprotokoll)
- Service Workers (ein JavaScript, das im Hintergrund einer Web App arbeiten kann)
- Web App Manifest (eine hinterlegte JSON-Datei, die es ermöglicht die progressive Web App zur Installation anzubieten)
- Responsive Design (das dafür sorgt, dass die Website sich entsprechend den Screen-Weiten, Browsern und Endgeräten anpasst)

Das hinterlegte Manifest Script kann dafür sorgen, dass bei wiederholter Nutzung der Website ein Pop-Up Banner erscheint, das den Nutzer dazu auffordert die Website zu seinem Home Screen hinzuzufügen. (Also einen sogenannten Add to Homescreen Button anzeigt)
Sobald der Nutzer dies bestätigt, wird ein App Shortcut zum Home Screen des Nutzers hinzugefügt — die progressive Web App wurde somit installiert. Ruft der Nutzer die App über den Shortcut auf dem Home Screen auf, wird also die bekannte Website aufgerufen. Mit einem Unterschied: die Inhalte des ausführenden Browsers können hier unterdrückt werden. Das bedeutet, die App kann die Inhalte im Vollbildformat anzeigen und die Browserleiste hierbei unterdrücken. Zusätzlich kann im Manifest ein Icon für den Shortcut definiert werden, um dem ganzen noch mehr “App-Look” zu geben.

Die Service Workers, die im Hintergrund arbeiten, ermöglichen es wiederum Inhalte zu cachen und somit auch offline zur Verfügung zu stellen. Hierzu ist HTTPS notwendig, was auf die Sicherheit der Anwendung einzahlt.

Eine progressive Web App ist also die mobile Ansicht einer Website wiedergegeben in einem Browser, dessen Eigenschaften unterdrückt werden. Sie ist leistungsfähig durch verschiedene im Hintergrund liegende Skripte, die bei der Erstellung dieser Website bereits berücksichtigt werden müssen.

Wie alle Entwicklungsformen haben auch Progressive Web Apps ihre Vor- und Nachteile die aus den oben beschriebenen Eigenschaften resultieren.

Vorteile progressiver Web Apps

1. Progressive Web Apps sind plattformunabhängig und funktionieren grundsätzlich (jedoch mit Einschränkungen, siehe unten) auf jedem Gerät und in jedem Browser.
Sie bieten immer das bestmögliche Nutzererlebnis, basierend auf dem Gerät sowie den Funktionen des Browsers, durch die sie ausgeführt werden.

2. Die Installationen einer PWA ist ohne App Store möglich, was wiederum bedeutet, dass sich bei der Entwicklung einer solchen App nicht an die Vorgaben der jeweiligen App Stores gehalten werden muss. Als Anbieter einer progressiven Web App ist man unabhängig von den großen Stores und muss dort nicht durch die Prüfung (was gerne auch mal einige Zeit in Anspruch nehmen kann).

3. Push Notifications sind möglich. Die sind allerdings auch wieder abhängig vom verwendeten Gerät und Browser. Je nach Nutzung Ihrer Zielgruppe ist das jedoch (vorausgesetzt dem Einverständnis der Empfänger) eine tolle Möglichkeit proaktiv Informationen zu teilen und auf neue Inhalte aufmerksam zu machen.

4. Durch Cachen der Inhalte ist eine offline Nutzung der App möglich.

5. Web Apps können schneller und somit günstiger entwickelt werden, als beispielsweise native Apps die unter Umständen für diverse Plattformen seperat entwickelt werden müssen.

6. Progressive Web Apps können dafür sorgen, dass Ihre Website in Google höher gerankt wird, da jede mobil optimierte Unterseite von Google erkannt und bewertet wird.

Nachteile progressiver Web Apps

1. Momentan unterstützen noch nicht alle Browser bzw. Betriebssysteme PWAs vollumfänglich, hier gibt es wie erwähnt Einschränkungen. In Chrome, Opera und Firefox funktioniert alles einwandfrei, Safari hinkt hier jedoch noch hinterher.
Eine volle Funktionsfähigkeit ist bisher nur auf Android gegeben. Auch auf Apple Devices können progressive Web Apps installiert werden, jedoch werden nicht alle Funktionen unterstützt und daher die Inhalte nicht immer wie gewünscht wiedergegeben.

2. PWAs sind Apps, die sich progressiv an die Fähigkeiten des wiedergebenden Gerätes und Browsers anpassen — was das Gerät oder der Browser nicht kann, kann in der App also nicht dargestellt werden. Die App sieht also unter Umständen für jede Nutzergruppe anders aus. Das ist nicht zwingend ein Nachteil, muss aber bei der Konzeption und Entwicklung immer berücksichtigt werden.

3. Vorteil Nummer 2 (Unabhängigkeit von App-Stores) bringt auch einen gewissen Nachteil mit sich: Da progressive Web Apps nicht in den App Stores hochgeladen werden, gibt es eine Herausforderung der Distribution. User müssen sich erst auf Ihre Website begeben, um dort auf die App aufmerksam gemacht zu werden.

Fazit

Progressive Web Apps können für Unternehmen interessant sein, die Ihre Webinhalte mit möglichst geringem Aufwand auch als installierbare App zur Verfügung stellen möchten. Hierbei sollte aber immer bedacht werden, dass man so auf die Distributionskraft der App-Stores verzichten muss.

Wichtig ist immer, dass Sie sich vor einem App-Projekt fragen, was das Ziel der App ist und an welchen Punkten Sie Abstriche verkraften können. Beachten Sie dabei auch unbedingt mögliche Ausbauten in der Zukunft! Ist eine offline Nutzbarkeit nötig? Wie hoch ist das Budget und was will ich damit erreichen? … Wenn Sie sich diese Fragen beantworten, können Sie auf Basis der oben gegeben Informationen entscheiden, ob eine progressive Web App für Ihr individuelles App-Projekt das Richtige ist.

Bei der Beantwortung dieser Fragen hilft Ihnen unsere Mobile App Canvas. Wenn Sie wissen wollen, was eine Progressive Web App konkret von einer nativen unterscheidet, dann nutzen Sie hierzu unsere Checkliste.


Einen Überblick darüber, was PWAs von nativen Apps unterscheidet — und was das im Hinblick auf die Entwicklungskosten bedeutet, gibt außerdem unser YouTube-Video:


Ramona Peters ist Projektmanagerin bei rabbit mobile, einer Agentur für die Entwicklung digitaler Businessanwendungen mit Mobile-First-Ansatz.
rabbit mobile unterstützt seine Kunden von konzeptionell-strategischen Vorüberlegungen bis hin zur Realisierung und Pflege laufender Anwendungen, sowie deren Integration in eine bestehende Systemlandschaft.

Sie erreichen Ramona Peters hier auf Xing, hier auf LinkedIn oder:
via E-Mail: r.peters@rabbit-mobile.de
via Telefon: +49 69 256288–244