Einstieg in Progressive Web Apps, Teil 1 Die App als PWA – Pro und Contra

Autor / Redakteur: Christian Rentrop / Stephan Augsten

Progressive Web-Apps, oder kurz PWAs, führen App-Entwicklung und Web-Design zusammen. Dadurch entsteht eine ebenso einfache wie effiziente Methode, schnell Apps zu entwickeln. Gegenüber nativen Apps ergeben sich dadurch einige Vor- aber eben auch Nachteile.

Firmen zum Thema

Bei Anwendungen wie der Online-Bildbearbeitung Photopea zeigen sich die Möglichkeiten der PWA-Technik.
Bei Anwendungen wie der Online-Bildbearbeitung Photopea zeigen sich die Möglichkeiten der PWA-Technik.
(Bild: Rentrop / Photopea)

Wenn ein Unternehmen Content, Informationen oder Unterhaltungsinhalte auf Smartphone und Tablet bereitstellen möchte, führt kaum ein Weg an einer eigenen App vorbei. Neben dem Web-Angebot ist daher die Präsenz in den App-Stores von Apple, Google und Amazon Pflicht, da sie fast automatisch für eine bessere Wahrnehmung des Angebots durch Mobilnutzer sorgt.

Der gekonnte Online-Auftritt umfasst also nunmehr drei Säulen: Bislang musste neben der Website des Angebots auch eine mobile Website und eine native App angeboten werden. Progressive Web-Apps machen damit Schluss und fusionieren App und Mobilseite zu einer Einheit, die die Vorzüge beider Systeme kombiniert.

Früher war alles App-Store

In der Vergangenheit setzten viele Online-Anbieter auf klassische native Apps in den App-Stores, um ihre Inhalte anzubieten: Dazu wurde eine Art eigener Browser entwickelt, in dem nur das Angebot dieses einen Anbieters lief. Diese Vorgehensweise ist aufwändig und relativ kostenintensiv, zudem sorgen die Review-Prozesse von Apple, Google und Co. für eine Verzögerung bei notwendigen Updates.

Progressive Web-Apps können diese Beschränkungen umgehen, da es sich im Prinzip um reine Mobilseiten handelt – die sich bei Bedarf jedoch wie Apps verhalten und dabei ganz nebenbei die lästigen App-Store-Reviews umgehen: Sie können direkt aus dem Browser wie reguläre Apps auf dem Homescreen installiert werden und offline funktionieren.

Progressive Web Apps sparen Kosten

Einer der größten Vorteil von Progressive Web-Apps (PWA) liegt damit auf der Hand: Gegenüber vollständig nativen Apps für iOS, Android und gegebenenfalls exotischere Mobilsysteme werden hier Entwicklungskosten eingespart, die kostspielige Mehrgleisigkeit aus Mobilseite und systemspezifischen Apps entfällt.

Die Inhalte der PWA werden auf dem Webserver erstellt und von diesem ausgeliefert, eine eigene App wird nicht mehr benötigt. Stattdessen greift die PWA über spezielle Systembibliotheken des Smartphones oder Tablets, auf Systemfunktionen zu. Dadurch ist die PWA wie zuvor der Browser-Wrapper in der Lage, spezifische Funktionen Betriebssysteme – etwa Geolocation, Kontaktinformationen, Push-Mitteilungen, Sensoren oder sogar Mikrofon und Kamera – zu verwenden.

Apples iOS-System unterstützt diese Technik seit iOS 11.4, Android ist seit Chrome 57 in der Lage, diese Apps auszuführen. Übrigens können PWAs mit dem neuen mit Chrome eng verwandten Edge-Browser auf Chromium-Basis auch unter Windows 10 eingesetzt werden und auch für MacOS gibt es ein PWA-Framework. Grundsätzlich ist die Funktionalität vom verwendeten Browser abhängig, generell aber plattformunabhängig.

Mehr als nur ein Browser

Die mobile ZDF-Mediathek kann gleichzeitig als PWA arbeiten.
Die mobile ZDF-Mediathek kann gleichzeitig als PWA arbeiten.
(Bild: Rentrop / ZDF)

Doch wie ist das alles möglich? Grundsätzlich ist eine Progressive Web App zunächst eine mobile Seite. Dadurch ist sie abwärtskompatibel zu Browsern, die die Technologie noch nicht unterstützen und funktioniert hier wie jede reguläre Website. Die Magie kommt ins Spiel, wenn eine moderne Browser-Betriebssystem-Kombi verwendet wird: Dann nämlich kann die progressive Web-App wie ein Favorit auf den Homescreen des Smartphones oder Tablets gezogen werden – und ist hier deutlich schlanker als die native App.

Wird die PWA über den Homescreen geöffnet, verschwindet der Browser, wodurch die Mobilseite wie eine vollständige App wirkt, inklusive Offline-Funktionalität. Ein gutes Beispiel für diese Technik ist zum Beispiel die PWA-Anwendung der ZDF-Mediathek. Hier muss die URL „pwa.zdf.de“ im Browser eingegeben werden. Was zunächst wie eine reguläre Mobilseite aussieht, wird in dem Moment zur PWA, in dem die Anwendung auf den Homescreen gesetzt wird.

PWA spielt Vorteile bei Mobilseiten und Anwendungen aus

Eine PWA muss auf den Homebildschirm gelegt werden.
Eine PWA muss auf den Homebildschirm gelegt werden.
(Bild: Rentrop / Twitter)

Hier sieht die Website dann wie eine App aus und funktioniert auch ähnlich. Auch Dienste wie Uber, Telegram, Twitter, Spotify oder Booking.com sind als PWAs verfügbar. Richtig interessant sind Progressive Web-Apps aber dort, wo echte Funktionen benötigt werden.

Selbst einfache Spiele sind als PWA möglich.
Selbst einfache Spiele sind als PWA möglich.
(Bild: Rentrop / Pacman-PWA)

Die Online-Bildbearbeitung Photopea zeigt, was mit Progressive Web-Apps möglich ist. Sogar kleinere Casual-Games sind kein Problem, wie etwa Pacman PWA demonstriert. Eine gute Übersicht vorhandener Progressive-Apps bietet übrigens die Seite appsco.pe.

Nachteile von PWAs

Bei Anwendungen wie der Online-Bildbearbeitung Photopea zeigen sich die Möglichkeiten der PWA-Technik.
Bei Anwendungen wie der Online-Bildbearbeitung Photopea zeigen sich die Möglichkeiten der PWA-Technik.
(Bild: Rentrop / Photopea)

Kurzum: Es gibt viele gute Gründe, auf PWAs zu setzen: Neben der Kosten- und Zeitersparnis bei der Entwicklung ermöglichen PWAs das Umgehen der zeitaufwändigen App-Store-Reviewprozesses und sparen darüber hinaus auch noch Speicher auf dem Endgerät des Users. Warum sollte also nicht immer eine PWA eingesetzt werden?

Einerseits muss besonderes Augenmerk auf die Verfügbarkeit der Web-Infrastruktur sowie Caching-Technologien gelegt werden, die es erlauben, Inhalte offline zur Verfügung zu stellen. Andererseits eignen sich PWAs natürlich nicht für jede Anwendung. So sind zum Beispiel Anwendungen, die sehr hardwarenah programmiert sind, nicht gut als PWA geeignet. Auch sehr umfangreiche und vollständig offline verwendbare Apps sind nicht für den PWA-Einsatz geeignet, da sie keinerlei Vorteile für den Nutzer bringen.

PWAs sind eben nicht aus dem App-Store

Zwar befreit PWA viele Anwendungen aus dem Klammergriff der App-Stores, allerdings ist das nicht unbedingt ein Vorteil. Anwender suchen ihre Apps zunächst im App-Store oder Play-Store, gibt es hier kein Ergebnis, wird das Produkt abgehakt oder schlimmstenfalls zum Mitbewerber gewechselt. Von einigen boshaften Scams in der Vergangenheit abgesehen sind die App-Stores zudem durch ihre Review-Prozesse eine saubere und sichere Umgebung für Anwender – ein Faktor, der bei PWAs wegfällt.

Zu guter Letzt ist die Installation einer PWA zwar nicht komplexer als die Installation einer App aus dem App-Store, trotzdem ist hier eine nur wenigen Nutzern bekannte Funktion vonnöten. Hier ist Kommunikationsbedarf gegeben, wenn vollständig auf PWA umgestellt werden soll. Und so dürfte auf absehbare Zeit noch der Parallelbetrieb einer nativen App unabdingbar sein.

(ID:47035236)

Über den Autor

 Christian Rentrop

Christian Rentrop

IT-Fachautor