Was sind Progressive Web Apps (PWAs)?

Wir benutzen Sie alle täglich. Zu Hause, bei der Arbeit und unterwegs. Zu Inspirations- Unterhaltungs- oder Informationszwecken. Und haben sie teilweise dutzendfach auf unseren Handys installiert: Apps. Doch seit der App Store-Eröffnung 2008 hat sich einiges getan. Apps sind nicht mehr einfach nur Apps und müssen nicht mehr zwingend aus dem Store heruntergeladen werden. Bühne frei für Progressive Web Apps.

mobile phone homescreen

Verschiedene Arten von Apps

Auch wenn sich für den unbedarften User jede App ähnlich anfühlt gibt es ein paar grundsätzlich verschiedene Herangehensweisen bei der Erstellung einer App. Die vier etablierteren Varianten im Überblick:

Native Apps

Bei nativen Apps handelt es sich sozusagen um “klassische” Apps. Sie werden speziell für ein Betriebssystem (iOS oder Android) entwickelt und laufen dadurch bezüglich Performance und Handling optimal auf jedem Device. Ausserdem bestehen keine Einschränkungen bezüglich der Nutzung der Gerätefunktionen wie Kamera, GPS oder Bewegungssensoren. Hauptnachteil von nativen Apps ist jedoch, dass jeweils pro Betriebssystem eine eigene App entwickelt werden muss, was das Ganze natürlich auch finanziell etwas aufwändiger macht.

Hybride Apps

Eine hybride App ist eine Web-App, welche in einen Plattformspezifischen “Wrapper” verpackt wird. Sie hat den Vorteil, dass sie plattformunabhängig nur einmal programmiert werden muss und danach über den App oder eben Play Store vertrieben werden kann. Dies ermöglicht auch den Zugriff auf die erweiterten Gerätefunktionen, analog einer nativen App. Abstriche machen müssen User bei der Benutzeroberfläche, welche aus HTML-Elementen besteht und daher auf die gewohnte gerätespezifische Navigationsumgebung verzichten muss.

Cross-Platform App

Ähnlich wie eine hybride App kommt auch die Cross-Platform App mit nur einer Code-Basis für verschiedene Betriebssysteme aus und erlaubt den Zugriff auf die erweiterten Gerätefunktionen. Da sie jedoch auf die nativen Gerätekomponenten zugreifen können, fühlen sie sich auch im Handling so an wie native Apps.

Web Apps

Vereinfacht gesagt sind klassische Web Apps eine etwas interaktivere Form von normalen Websites. Web Apps ruft man wie Websites im Browser auf und funktionieren daher Plattformunabhängig. Dies macht sie relativ effizient in der Entwicklung, hat jedoch den Nachteil, dass ihr Funktionsumfang stark eingeschränkt ist.

Progressive Web Apps

Und dann wäre da noch das neueste Mitglied in der “App-Familie”: Progressive Web Apps. PWAs sind ein gutes Beispiel dafür, was passiert, wenn sich die technologischen Möglichkeiten weiterentwickeln. Vereinfacht gesagt handelt es sich um klassische Web Apps, erweitert durch ein paar wichtige Features, welche eigentlich “normalen” Apps vorbehalten wären. Möglich gemacht wird dies durch Funktionserweiterungen von mobilen Browsern in den letzten ein bis zwei Jahren.

Eigenschaften von PWAs

Doch welche Eigenschaften zeichnen eine PWA nun tatsächlich aus?

  1. Eine Progressive Web App ist grundsätzlich eine Web App. Sie wird also im Browser aufgerufen wie eine klassische Website.
  2. PWAs lassen sich zum Homescreen hinzufügen wie aus dem Store heruntergeladene Apps.
  3. Sie verfügen über gewisse App-Funktionalitäten wie die Möglichkeit, Push-Notifications zu erhalten, Daten offline nutzbar zu machen und die App auf dem Homescreen abzulegen.
  4. Vom Homescreen aus gestartet fühlt sich eine PWA eher wie eine App als eine Website an, da keine Browser-Navigation angezeigt wird.
  5. Auch bezüglich User Experience sind PWAs näher an Apps als an Websites, obwohl sie auf HTML basieren – vergleichbar mit hybriden Apps.

Vorteile von Progressive Web Apps

Die Verwendung einer PWA bringt natürlich einige Vorteile gegenüber den etablierten Technologien mit. In einem Satz zusammengefasst: Progressive Web Apps haben alle Vorteile von Websites, gepaart mit manchen Vorteilen von “regulären” Apps:

  1. Das schwierige Überzeugen der User, eine App herunterzuladen, entfällt
  2. Da die Inhalte im Browser aufgerufen werden ist Plattformübergreifend nur eine Programmiersprache nötig
  3. Eine PWA ist weniger aufwändig und daher günstiger in der Herstellung als eine native App
  4. Content Caching verringert den Datenverbrauch für den User und ermöglicht eine Offline-Nutzung. Ausserdem beschleunigt dies die Nutzung der App im Vergleich zu einer Website.
  5. Bei Usern, welche die Add-To-Homescreen-Option nutzen ist die Kundenbindung vergleichbar mit klassischen Apps.

Limitationen von PWAs

Natürlich ist nicht alles Gold, was glänzt. Und leider ist auch nicht alles Neue automatisch besser. Dies trifft auch auf Progressive Web Apps zu. Durch die Verwendung von Webtechnologien fällt ein Grossteil der App-Funktionalitäten weg:

  1. Kein Zugriff auf Geräte-Sensoren. Dies ist vor Allem für Augmented Reality-Anwendungen ein Problem.
  2. Noch ist der Funktionsumfang browserabhängig. Auf iOS beispielsweise lassen sich PWAs in Google Chrome noch nicht zum Homescreen hinzufügen.
  3. Kein TouchID, FaceID oder Siri.
  4. Der Akkuverbrauch ist bei PWAs höher als bei nativen Apps.
  5. Es hat sich als sehr schwer erwiesen, Kunden dazu zu bringen, die Add-To-Homescreen-Funktion zu nutzen

Jeder App ihr Anwendungsgebiet

Natürlich hat jede Technologie ihre Vor- und Nachteile. Spezifische Bedürfnisse an ein Projekt machen die Wahl einer bestimmten Herangehensweise dadurch sinnvoll – oder eben nicht. PWAs sind jedoch eine gute Möglichkeit, noch genauer auf Kundenwünsche einzugehen und eine bezüglich Umfang und Funktionalität optimale Lösung zu finden. Sie sind jedoch nicht die Lösung aller Probleme sondern sollten als eines von vielen Werkzeugen betrachtet werden.

Ein tolles Verzeichnis von spannenden und gut umgesetzten PWAs findet ihr bei pwa.bar.

LIstory - die Progressive Web App von Bitforge

Wo sinnvoll setzen auch wir gerne PWAs ein. Jüngstes Beispiel dafür ist die für Liechtenstein Marketing umgesetzte LIstory-App. Gleichzeitig sieht man anhand dieses Projektes auch, wo die Grenzen der Technologie liegen:

Die LIstory-App führt Interessierte Besucher Liechtensteins entlang dem Liechtenstein-Weg, einem 147 Erlebnisstationen umfassenden Wanderweg. Diese Stationen bestehen aus Text-Infos, Bildern, Videos und Audio-Files zur Geschichte des Landes. Inhalte, welche wir wunderbar mit einer PWA umsetzen konnten.

Spätestens bei AR ist schluss

Zusätzlich dazu erstellten wir jedoch noch zehn Augmented Reality-Erlebnisse, was den Rahmen des innerhalb einer PWA technisch möglichen sprengte. Also entschieden wir uns dafür, die AR-Inhalte in Unity zu erstellen und die Content-PWA innerhalb dieses Frameworks anzuzeigen. Eine Mischung aus Cross-Platform-App und Progressive Web App also.

Was uns zum letzen Punkt führt: Dinge zu kategorisieren ist ja schön und gut. Wenn es die Umstände erfordern, gibt es jedoch unzählige Abstufungen und Mischlösungen. Aus diesem Grund versuchen wir immer erst, die Projekt-Ziele zu verstehen und dann zu entscheiden, mit welchem Ansatz wir diese am besten erreichen können.