Vor- und Nachteile von Progressive Web Apps - ein weiterer Hype oder das Ende der native Apps?
Inhaltsverzeichnis
- Features
- Chancen
- Herausforderungen
- Tools und Entwicklung
- Vergleich zu nativen Apps
- Fazit
Es gibt immer mehr Möglichkeiten um mobilen Nutzerinnen und Nutzern Zugang zur Webseite zu ermöglichen. Ein neuer Trend sind dabei die sogenannten Progressive Web Apps, die ein Hybrid zwischen Webseiten und mobilen Applikationen sind. Diese können ohne Play- oder AppStore dem Homescreen hinzugefügt werden und dann sehr ähnlich wie eine native App verwendet werden. Hervorzuheben ist, dass es sich nicht um eine eigene Sprache oder ein Framework handelt, sondern um eine neue Herangehensweise an die Entwicklung von Applikationen. Das Ziel ist es dem Nutzer eine Benutzererfahrung, die mit einer mobilen App vergleichbar ist, zu bieten.
In diesem Blogbeitrag wird besonders auf die Features, Chancen und Herausforderungen von Progressive Web Apps eingegangen, sowie ein Vergleich zu nativen Apps und zum Schluss ein Fazit.
1. Features
Eine Progressive Web App zeichnet sich durch vier Hauptfeatures aus, die im Folgenden näher erläutert werden.
1. Offline Verfügbarkeit
Zum einen wird eine Offline Verfügbarkeit mit Hilfe von Service Worker gewährleistet. Ein Service Worker ist ein auf JavaScript-basiertes Skript, dass der Browser im Hintergrund laufen lässt. Es ist unabhängig von Nutzerinteraktionen und der Webseite, wodurch Serveranfragen gesteuert und beeinflusst werden können. Zusätzlich wird es möglich, Daten in einem Cache abzulegen, auf den auch ohne Internetverbindung zugegriffen werden kann. Dies ist essenziell für die Offline Verfügbarkeit einer PWA, da Inhalte nicht offline geladen werden können, wenn sie sich noch nicht im Cache befinden.
2. Benachrichtigungen
Die Voraussetzungen für das nächste Feature werden ebenfalls durch Service Worker geschaffen. Hierbei handelt es sich um das Senden von Benachrichtigungen, sogenannten Push Notifications, an das jeweilige Endgerät, auch wenn die App derzeit nicht geöffnet ist. Dadurch kann der Nutzer bzw. Nutzerin wieder aktiv aufgefordert werden die Anwendung zu besuchen.
3. Performance
Im Rahmen von PWAs wird ebenso die Performance als Auszeichnungsmerkmal gesehen. Die gute Lade- und Interaktionsgeschwindigkeit wird unter anderem durch sogenannte Web Worker gewährleistet. Sie sind mit HTML5 eingeführt worden und umgehen das Blockieren von Requests, welches bedingt ist durch die single-threaded Umgebung von JavaScript passiert. Um Rendering- und Interaktionsprozesse nicht zu blockieren wird eine API genutzt, die es ermöglicht Inhalte parallel zu verarbeiten und so weder das Userinterface noch das Skript für die Nutzer-interaktionen stört. Zusätzlich steigert eine App Shell die Performance. Die App Shell ist das Grundgerüst der App und beinhaltet minimalen HTML-, CSS- und JavaScript-Code. Dieser wird immer gecacht und ist somit gleich zu Beginn verfügbar. Im Normalfall wird hier kein Inhalt gespeichert, da dieser dynamisch nachgeladen wird. Trotzdem bleibt zu beachten, dass die Performance auch von der Leistung des Endgerätes abhängt, auf dem die PWA geöffnet wird.
4. Homescreen
Wie zu Beginn erwähnt, ist es möglich eine PWA dem Homescreen hinzuzufügen. Hierfür muss ein App Manifest erstellt werden. Dieses ist eine JavaScript Object Notation (JSON)-Datei, die Zusatzinformationen für die Anwendung enthält. Dort wird unter anderem der Name der App, das Icon für den HomeScreen und die Ladeansicht festgelegt. Das App Manifest ist ein kurzes JSON Dokument, in dem unter anderem der Name und die Startadresse für die App angegeben wird. Der Vorteil dieser Vorgehensweise ist, dass der Nutzer bzw. die Nutzerin nicht jedes Mal über die URL im Browser zur Webseite navigieren muss. Verglichen zu einer App kann so der langwierige Prozess für die Registrierung der Anwendung im Play- bzw. AppStore umgangen werden.
2. Chancen
Eine PWA bietet eine responsive Lösung, die über einen Link mit anderen Menschen geteilt werden kann. Zusätzlich ist sie leicht zu finden, da sie auch über eine Suchmaschine erreichbar ist. Des Weiteren ist sie angepasst an die Möglichkeiten des jeweiligen Nutzers und der jeweiligen Nutzerin durch Progressive Enhancement. Darunter wird verstanden immer einen Teil des Inhalts zur Verfügung zu stellen. Und je mehr Features vom Geräte und Browser unterstützt werden, desto mehr Inhalt wird mit modernen (interaktiveren) Features bereitgestellt. Ein Beispiel dafür ist, dass ein fünf Jahre altes Handy eine statische Seite mit den Inhalten angezeigt wird und einem neueren Endgerät beim Zugriff auf dieselbe PWA mehr interaktive Features, wie ein interaktiver Zeitstrahl, geboten werden. So kann ein auf Browser und Geräte optimiertes Weberlebnis geschaffen werden.
Weiteres können Restriktionen von bekannten App Stores umgangen werden, da PWA’s nicht in Stores geladen werden müssen. Dies ist einerseits eine Chance, da Entwickelnden so alles offen gelassen wird. Andererseits bieten PWA’s die Möglichkeit, leichter Schadsoftware oder schlecht programmierte Apps zu verbreiten.
3. Herausforderungen
Damit eine PWA implementiert werden kann müssen einige Voraussetzungen erfüllt sein. So muss die Webseite über HTTPS (was allerdings schon Standard ist) laufen. Zudem müssen die Inhalte und das Design responsive gestaltet sein. Das heißt sie müssen unabhängig vom Endgerät oder Browser eine gute Userexperience bieten. Jede Unterseite muss zudem eine eigene URL besitzen, damit sie verlinkbar ist. Um die Entwicklung zu vereinfachen, stellt Google eine Beispiel-Checkliste zur Verfügung in der sinnvolle Anpassungen für HTML-Syntax, Performance und Userexperience abgefragt werden.
4. Tools und Entwicklung
Bei der Entwicklung von Progressive Web Apps ist darauf zu achten, dass die Mindestanforderungen erfüllt sind. Diese sind zum einem eine sichere Verbindung (HTTPS) um einen sicheren Datenverkehr zu gewährleisten, zum anderem wird ein Standard-Manifest erstellt, in welchem das Verhalten und die Zustände der App, wie zum Beispiel Sprache oder Startseite, festgelegt werden. Zudem sollte die PWA netzwerkunabhängig funktionieren sowie auch auf mobilen Endgeräten und unterschiedlichen Browsern problemlos laufen. Viele dieser Punkte können mit Hilfe eines Service-Workers umgesetzt werden. Um die Entwicklung von Progressive Web Apps zu erleichtern, gibt es genügend Open-Source Tools, welche von den Programmierern verwendet werden können.
Da eine PWA durchaus viele Anforderungen mit sich bringen kann, ist es vom Vorteil mit einem Framework, wie Angular oder React zu arbeiten, da diese die Entwicklung erleichtern können. Mit Hilfe von Lighthouse, einem Plugin-Tool für Chrome kann die App hinsichtlich Performance und Funktionalität getestet werden. Dabei wird unter anderem analysiert, ob die PWA auch bei schlechter bzw. keiner Netzwerkverbindung funktioniert, ob sie zum Homescreen des User hinzugefügt werden kann und wie Design, Benutzerfreundlichkeit, Ladezeiten der App sind. Zu jedem dieser Abschnitte werden schließlich Technologien oder zumindest Richtungen vorgeschlagen, wie die Probleme behoben werden können und die PWA verbessert werden kann.
5. Vergleich zu nativen Apps
Der Unterschied zwischen nativen und Progressive Web Apps ist, dass native Apps so geschrieben werden, dass sie direkt auf dem Endgerät ausgeführt werden. Progressive Web Apps hingegen laufen direkt in einem Webbrowser und es ist daher nicht notwendig die App zuerst zu installieren. Dadurch können PWAs nicht vollständig mit dem Endgerät interagieren, was zu einem Vorteil von nativen Apps führt. Zudem sind native Apps schneller, da der Code, wie bereits erwähnt direkt am Endgerät ausgeführt wird und speziell für das verwendete Gerät geschrieben wurde.
Ein klarer Vorteil von PWAs ist, dass jeder Webentwickler fähig ist eine Progressive Web App zu erstellen, da HTML, CSS und JavaScript die grundlegenden Technologien sind. Somit sind keine Kenntnisse zur nativen App-Entwicklung erforderlich, um das Nutzerlebnis von nativen Apps zu ermöglichen.
Zwar ist die Erstellung einer PWA viel ressourcensparender und einfacher, jedoch bietet eine native App nach der Installation eine robustere und leistungsstärkere Benutzererfahrung. Allgemein sei gesagt, dass nicht eines besser sei wie das andere – es kommt vielmehr auf den Zweck und die gewünschte Wirkung an.
6. Fazit
Progressive Web Apps bieten eine enorm große Reichweite, weil jedes Gerät mit dem Internet verbunden ist und sie über Suchmaschinen gefunden werden. Im Zuge dessen ergibt sich der Nachteil, dass der Funktionsumfang abhängig von der jeweiligen Browserkompatibilität ist. Als weiterer Nachteil ist festzuhalten, dass derzeit viele Möglichkeiten nicht plattformübergreifend nutzbar sind. Dennoch sollten die Möglichkeiten, die sonst nur bei nativen Apps gewährleistet sind, bei PWA-kompatiblen Systemen in Betracht gezogen werden. Mit einer PWA wird der Zugriff auf die Zwischenablage und das Dateisystem gewährleistet. Außerdem kann sie im Vollbildmodus verwendet werden. Ebenso werden Login-Daten dauerhaft gespeichert und hardwarebeschleunigte 2D/3D Animationen unterstützt.
Zu guter Letzt handelt es sich um ein flüssiges UI mit 60 fps. Allerdings mangelt es bei einigen anderen nativen Funktionalitäten. Darunter fällt der Zugriff auf Kontakte, Kalender, Lesezeichen und auf Telefonfunktionen, wie SMS oder Telefonieren und der Zugriff auf diverse Hardwaresensoren der jeweiligen Geräte. Hierbei handelt es sich z.B. um die Taschenlampe oder den Luftdrucksensor. Genauso wenig können PWAs Daten loggen oder mit dem Prozessmanagement interagieren.
Gerade für kleine Unternehmen, welche nicht genügend Ressourcen für die Umsetzung einer nativen App haben, eignen sich Progressive Web Apps gut. Doch auch PWAs gewinnen immer mehr an Funktionen und sind daher auf keinen Fall zu unterschätzen.
