Spätestens seit dem so genannten Web 2.0, an dem sich der ein oder andere noch erinnern mag, können Nutzer selbst Inhalte erstellen und entwickelten sich vom reinen Konsumenten hin zum Schöpfer vielseitiger Inhalte. Etwa im selben Zeitraum erschien das erste iPhone und wenig später Android und auch Apps und damit eine ganze Reihe an neuen Branchen, Anwendungen und Möglichkeiten mit seinen Nutzern zu interagieren. Auch das Web hat sich seitdem rasant weiterentwickelt, oft findet man Apps, die im eigentlichen Sinne sogar Websites sind.
Ansätze Apps zu schreiben, gibt es viele. Zum einen ist es möglich, die jeweilige vom Betriebssystem unterstützte Sprache wie Swift/Objective-C (Apple iOS) oder Java/Kotlin (Android) und zum anderen Web-Technologien zu nutzen, die in diese Sprachen übersetzt werden oder Wrapper zu nutzen, um Webseiten als App auszuliefern. Klassische Vertreter der letzten Gruppe sind React-Native sowie Ionic.
Neben diesen Möglichkeiten gibt es eine weitere, die in den letzten Jahren immer relevanter geworden ist – die so genannten Progressive Web Apps, kurz PWA. Diese haben sich zum Ziel gesetzt, nativen Apps in nichts nach zu stehen und progressiv, wie das Web selbst, besser zu werden und sich nahtlos in jedes System zu integrieren. PWA verbinden Vorteile aus beiden Welten und sind:
- Installierbar: Sie können zum Startbildschirm des Nutzer hinzugefügt werden, ohne einen App-Store zu nutzen
- Anpassungsfähig & plattformunabhängig: Egal welcher Formfaktor, Geräteklasse, Betriebssystem oder Browser
- Verbindungsunabhängig: Auch offline oder bei schlechtem Empfang ist eine PWA nutzbar
- Aktuell: Immer auf dem neuesten Stand
- Sicher: Verbindungen sind über HTTPS gesichert
- Auffindbar: Suchmaschinen können PWA finden und in ihren Index aufnehmen
- Verlinkbar: Inhalte können direkt über Links geteilt werden
- Interaktiv: Nutzer können animiert werden, die App zu nutzen
Ob nun eine PWA eine alternative zur klassischen App oder zur Hybrid-App ist, möchte ich in diesem Beitrag klären.
Einer der großen Vorteile einer PWA ist, dass diese nicht über einen App-Store bezogen werden müssen. Für beide Parteien, also Ersteller und Nutzer, ergeben sich durch dieses Wegfallen Vorteile. Nutzt man als Ersteller den Distributionsweg eines App-Stores, so muss man sich an dessen Vorgaben und Einschränkungen halten und dem Betreiber am Umsatz beteiligen. Auch die Auffindbarkeit von klassischen Apps ist zum Problem geworden, die schiere Masse an Apps macht es für den Nutzer schwer, zu finden, was er will und für Entwickler schwer, diese so zu bewerben, dass diese auch gefunden werden können. 60% aller Apps im Google Playstore wurden noch nie heruntergeladen, der durchschnittliche Nutzer lädt 3 Apps im Monat und die Hälfte aller Smartphone-Nutzer in den USA lädt genau 0 Apps pro Monat. Das liegt unter anderem an der schweren Auffindbarkeit, aber auch an den Schritten, die zur Installation notwendig sind. Jede Abfrage nach einem Passwort, Berechtigungen und Ähnlichem hat das Potential Nutzer abzuschrecken eine App zu installieren und diesen für immer zu verlieren. Um eine PWA auszuprobieren, reicht es aus, eine URL aufzurufen und die App auf Wunsch zum Startbildschirm hinzuzufügen. Siehe auch: https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9
Plattformunabhängigkeit bedeutet für Firmen weniger Entwickler mit verschiedenem Know-how einstellen zu müssen und statt drei verschiedenen Plattformen (iOS, Android, Web) nur eine eine – nämlich das Web zu unterstützen. Ebenso ist es aus Entwicklersicht einfacher, eine Website zu veröffentlichen als verschiedene Deploy-Systeme der Stores nutzen zu müssen – ohne auf etwaige Freischaltungen warten zu müssen.
Installierbar
Um Nutzern die Möglichkeit zu geben, ihre PWA schnell wiederzufinden und ohne Umständen nutzen zu können, müssen diese nahtlos im Betriebssystem integrierbar sein.
Unter Android und bald auch unter Windows 10 ist genau das möglich. Im Falle von Android wird die PWA über einen System-Dienst in eine App konvertiert und ist somit in verschiedenen Bereichen zu erreichen.
PWA im Startbildschirm
PWA in der App-Übersicht
Verbindungsunabhängig
Wer kennt es nicht, die Netzabdeckung ist schlecht oder gerade so gut, dass sich der Browser zu Tode lädt und letztlich doch abbricht. Wäre es nicht schön, eine “Später lesen”-Funktion nutzen zu können oder die nächsten Seiten eines Blogs schon im Speicher zu haben? Auch in einer Chat-Anwendung erwartet der Nutzer, dass wenn keine oder nur eine schlechte Verbindung besteht seine Nachrichten letztlich doch verschickt werden oder man zu mindestens die zuletzt empfangenen lesen kann und keine 404-Seite vorgesetzt bekommt. Vorstellbar ist auch eine Notiz-App über die man neben Text auch Bilder oder Ton speichern kann und auch abspielen möchte, wenn keine Verbindung zum Internet besteht. Ein simples Beispiel für diese Funktionalität bietet die PWA Air Horner (Achtung es trötet recht laut). Stellt man sein Gerät (nach dem man die PWA mindestens einmal besucht hat) auf Flugmodus, so funktioniert die App auch im Offline-Modus.
Interaktiv
Was bringt es einem Entwickler, wenn eine App zwar heruntergeladen wurde, aber dann einfach nicht genutzt wird? Wie unsinnig wäre beispielsweise eine Chat-Anwendung oder eBay ohne die Möglichkeit Aktualisierung empfangen zu können? Auch im E-Commerce haben Shopbetreiber mit verlassenen Warenkörben oder gefüllten Wunschlisten, die nie gekauft werden, zu kämpfen. Abhilfe können hier Push-Benachrichtigungen bieten, die das Benachrichtigungssystem des jeweiligen Betriebssystems ansprechen und somit Nutzern mehr Interaktion mit einer App ermöglicht. Natürlich muss man zunächst der PWA diese Berechtigung erteilen – was im übrigen nie direkt beim ersten Öffnen der PWA passieren sollte, sondern nur aufgerufen durch eine Aktion des Nutzers. Das könnte beispielsweise so aussehen, dass die Zugriffsberechtigung für die Ortung des Nutzers erst auf Klick geschieht – also immer dann, wenn ein Nutzer sich bewusst für etwas entscheidet.
Präsentiert man hingegen direkt Aufforderung so ist die Wahrscheinlichkeit des Abbruchs sehr hoch.
Web-Notification
Aktuell
Neue Features an seine Nutzer auszuliefern, um die Nutzererfahrung zu verbessern oder einfach um eine bessere Conversion Rate zu erreichen und somit mehr Geld zu verdienen, ist wichtig für jedes Unternehmen. Wie schwer es sein kann, neue Features an seine Nutzer auszuliefern, musste Microsoft mit Windows 10 erleben. Über verschiedene Aktionen wurde versucht, es dem Nutzer schmackhaft zu machen, sich die neue Version herunterzuladen, um endlich weg von älteren Versionen zu kommen. Viele verschiedene ältere Versionen unterstützen zu müssen, kann mitunter sehr teuer werden. PWA nutzen die Möglichkeit der Service-Worker (mehr dazu später) auch im Hintergrund, also wenn die App geschlossen ist, Aktualisierungen und Benachrichtigungen durchzuführen und bereitzuhalten. Eine Bibliothek, die es Entwicklern ermöglicht, verschiedene Caching-Strategien zu nutzen ist WorkBox> von Google. Verschiedene Strategien bedeutet in diesem Kontext wie auf den Cache zugegriffen wird:
- – Nur Cache
- – Erst Cache ansonsten Rückfrage im Netzwerk
- – Cache mit Aktualisierungen aus dem Netzwerk
- – Nur Netzwerk
- – Erst Netzwerk dann Cache
Technische Voraussetzungen
Um alle Features einer PWA nutzen zu können, müssen folgende drei Technologien unterstützt werden:
- – Web App Manifest Datei
Über diese werden die Meta-Daten und Icons einer PWA, Inhalte der Suchmaschinenindexierung, und Verhalten der PWA an sicht festgelegt. Beispielsweise lässt sich festlegen, ob eine PWA im Breitbildmodus oder mit einer URL-Leiste und anderen Browser-Bedienelementen startet: - – HTTPS
Die Sicherheit der Nutzer und ihrer Daten stand bei der Entwicklung der Service-Worker immer im Vordergrund. Ohne eine über HTTPS gesicherte Verbindung ist es nicht möglich Features wie Push-Benachrichtigungen und Caching zu nutzen. - – Service-Worker
Diese Technologie ist das Herzstück einer PWA. Über JavaScript wird ein clientseitiger Proxy-Dienst zwischen Endgerät und Server aufgebaut, welcher Anfragen an das Netzwerk abfangen und je nach Strategie verarbeiten kann. Auch Push-Benachrichtigungen werden im Hintergrund über diesen Proxy abgefangen und an das Betriebssystem weitergegeben.
Sicher
Die Sicherheit der Nutzer und ihrer Daten stand bei der Entwicklung der Service-Worker immer im Vordergrund. Ohne eine über HTTPS gesicherte Verbindung ist es nicht möglich Features wie Push-Benachrichtigungen und Caching zu nutzen.
Bekannte Nutzer & Zahlen
Alibaba Group
Einer der größten B2B Anbieter (erreichter Umsatz in 2016: 410 Mrd. Euro) erreichte mit der Umstellung auf eine PWA der Website alibaba.com
- – 76% höhere Conversion Rate über alle Browser hinweg
- – 14% höhere monatliche aktive Nutzer auf iOS und 30% auf Android
- – 4 mal höhere Interaktionsrate durch die Möglichkeit die PWA vom Startbildschirm aus zu starten
The Weather Channel
Wetteranbieter seit 1982. Veröffentlichte seine PWA in 62 Sprachen und 178 Ländern und erzielte 80% besserer Ladezeiten.
Eine App aus Indien mit der sich Tickets für Veranstaltungen kaufen lassen.
- – Über 85% der Transaktionen erfolgen mobil
- – 80%+ Erhöhung der Conversion Rate was bedeutet das mehr Leute Tickets kaufen
- – 54 mal kleiner als die Android App und 180 mal kleiner als die iOS App
Ausblick & Fazit
Um die Eingangsfrage abschließend zu bewerten, ob nun eine PWA eine Alternative zur klassischen oder hybriden App ist, kann man in vielen Fällen mit “Ja” beantworten. Viele der Vorteile, die klassische Apps bisher bieten konnten, gibt es nun auch im Web. Die wichtigsten Schnittstellen wie Mikrofon und Kamera werden unterstützt und weitere Sensorik folgt (Blink basierte Browser unterstützen sogar Bluetooth und USB). Die Integration in das Betriebssystem durch Installierbarkeit und Push-Nachrichten sowie Offline-Verfügbarkeit tun ihr übriges zum echten App-Feeling hinzu. Auch im Hintergrund können Aktualisierungen vorgenommen werden und lästige Restriktion von App-Stores vermieden werden. Sogar die Integration in Desktop Betriebssysteme nimmt langsam Formen an: erst kürzlich veröffentlichte Microsoft eine Vorschauversion von Windows 10 die PWA direkt unterstützt. Auch Apple hat nach langem Zögern sich dazu entschieden, Service-Worker und Web App Manifest Dateien zu unterstützen und somit die Basis geschaffen auch unter iOS PWA im Vollen Umfang zu nutzen. Aber auch ohne diese beiden Technologien ist über Meta-Tags möglich. Selbst Spiele sind durch die leistungsfähige WebGL-API möglich geworden und unterstützen handelsübliche USB Controller von manchen Browsern unterstützt. Erst wenn es wirklich rechenintensiv wird oder man die komplette Sensorik eines Gerätes ansprechen oder ein bestimmtes SDK nutzen will, sollte man über eine hybride oder native App nachdenken und deren Vorteile nutzen.
