Progressive Web Apps (PWA): Architektur, Beispiele, Vor- und Nachteile

Und ein Großteil dieser Internetnutzung findet über Apps statt. Das hat eine Studie in den USA festgestellt.

Vor nicht all zu langer Zeit standen Unternehmen also vor der Frage, welchen Ansatz sie bei der App-Entwicklung verfolgen sollen. Dabei hatten sie zunächst drei Optionen: native, hybride oder sogenannte Cross-Plattform-Entwicklung. Heute ist mit den Progressiven Web Apps noch eine vierte Option hinzugekommen – und die verdient eine genauere Betrachtung, sehen viele in genau diesen PWAs das App-Modell der Zukunft. 2020, so die Vorhersage von Gartner-Experten, wird rund die Hälfte aller mobilen Apps durch Progressive Web Apps ersetzt sein.

Warum aber Entwickler und Unternehmen auf Progressive Web Apps setzen, das soll diese dreiteilige Blogserie klären.

Was versteckt sich hinter Progressive Web Apps?

Letztlich sind Progressive Web Apps die Antwort auf die immer wiederkehrende Frage, ob sich mobile Apps oder responsive Webseiten langfristig durchsetzen werden, also Webseiten, die an eine Mobilnutzung angepasst sind. PWAs lassen diese bislang bestehende strikte Trennung verschwimmen. Sie nutzen Browsertechnologien, um native App-Funktionen mit der Barrierefreiheit und dem Web-Erlebnis des Internets zu verbinden. Führende Browser sind bereits PWA-kompatibel, darunter Google und Mozilla. Kurz gefasst: PWAs sind Web-Apps mit dem Geschmack nativer Apps. Nach der Installation klicken Nutzer im Home-Bildschirm auf ein kleines Icon und werden dann direkt zur Webseite geleitet. PWAs nutzen Web Stacks (JavaScript, HTML, CSS) und verbinden reichhaltige Funktionalität mit einem reibungslosen Nutzungserlebnis, wie man es von nativen Apps kennt. Google präsentierte diese Idee erstmals 2015 und seitdem sind Progressive Web Applikationen zu einem vieldiskutierten Thema geworden.

Die Beliebtheit von PWAs korreliert mit einem anderen Trend: Dem Phänomen der App-Müdigkeit. Nutzer sind häufig von der Anzahl möglicher Apps überwältigt und begrenzen die Anzahl von Apps auf ihren Geräten – auch um den Speicherplatz nicht auszureizen. Es kann also sein, dass ein Unternehmen, das eine native App entwickelt, erstaunt feststellen muss, dass die Downloadzahlen gar nicht so groß sind, wie man sich ursprünglich erhofft hatte. Progressive Web Apps verbinden dem gegenüber Merkmale, wie Nutzer sie bereits von nativen Apps kennen – aber ohne den datenintensiven Download. Und genau das macht sie ideal für Gelegenheitsnutzer.

Man denke dabei zum Beispiel an eine Shopping-App: Die meisten großen Unternehmen, die online verkaufen, haben auch eine App. Doch viele Kunden kaufen dort nur gelegentlich ein und sehen eigentlich gar keinen Sinn in einer App, empfinden diese vielleicht als unnötigen Datenmüll auf dem Mobiltelefon. Und genau

da können Unternehmen ansetzen: Mit einer traditionellen App für Vielnutzer und einer PWA für alle anderen. PWAs verbrauchen dabei nur wenig Speicherplatz, Nutzer müssen lediglich eine Webseite aufrufen und ein Icon erstellen. Ein Freigabeprozess, wie beim Download aus einem App-Store, fällt dabei weg, ebenso wie die Kontrolle durch Apple oder Google.

Kunden wollen Mehrwert und das müssen Progressive Web Apps bieten: sinnvolle Funktionen, Inhalte in Echtzeit und hohe Qualität. Dabei sollten auch Fragen wie die Offline-Verfügbarkeit berücksichtigt werden, vor allem wenn man bedenkt, dass in Deutschland beispielsweise der flächendeckende Ausbau des mobilen Highspeed-Internets noch zu Wünschen übrig lässt.

Welche Voraussetzungen können und sollten PWAs also erfüllen?

• Responsiveness und Browser Kompatibilität: Content muss für jeden zugänglich sein, egal über welchen Browser er auf die Inhalte zugreift oder wie gut die Verbindung ist. PWAs funktionieren mit jedem Browser und auf allen Geräten, ganz egal welcher Größe oder welcher Spezifikation. Tablet und Handy-Nutzer haben die gleiche Nutzererfahrung. Auch ist es egal, ob der Nutzer ein iPhone oder ein Android-Telefon hat.
• Unabhängigkeit von einer Internetverbindung: Fortschrittliche Applikationen funktionieren auch offline oder in einem Netz mit schlechter Internetverbindung.
• Ein App-ähnliches Interface: Progressive Web Applikationen haben eine ähnliche Navigation und Interaktion, wie Nutzer sie von nativen Apps kennen – und inzwischen erwarten.
• Push-Notifikationen: Als Teil einer gezielten Strategie können Push-Mitteilungen die Aufmerksamkeit und das Interesse von Kunden wach halten. Sie motivieren dazu, die App zu öffnen und häufiger zu nutzen.
• Selbstständiges Update: Updates sollten ganz automatisch möglich sein, so dass die App immer auf dem neuesten Stand ist, ohne dass der Nutzer das ständig kontrollieren muss.
• Sicherheit: Die Apps funktionieren über HTTPS, so dass nur ein autorisierter Nutzerzugang möglich ist. Und das ist ein wichtiger Faktor.
• Leichte Auffindbarkeit und einfach zu installieren: Suchmaschinen klassifizieren PWAs als Apps, sie sind aber nicht über die normalen App-Stores auffindbar. Sie können für eine leichte Auffindbarkeit aber mittels URL geteilt werden. Die Installation ist einfach und beinhaltet lediglich das Besuchen einer Webseite und das Hinzufügen des Icons zum Startbildschirm.

Die bisherigen Aspekte kurz zusammengefasst: Progressive Web Applikationen haben die Funktionalität von nativen und Web Applikationen übernommen. Sie laufen schnell – egal auf welchem Betriebssystem – und stellen eine große Bandbreite an Funktionalitäten zur Verfügung. Dank einfacher Installation, leichter Auffindbarkeit, automatischer Updates und der Möglichkeit selbst bei langsamer Internetverbindung oder offline damit zu arbeiten, können PWAs das Nutzererlebnis merkbar erhöhen.

Vier technische Komponenten sind für Progressive Web Apps entscheidend:

1. Web App Manifest

Das Web App Manifest ist die erste wichtige Komponente für das Erscheinungsbild eines nativen App Interfaces. Mit Hilfe des Manifests kann ein Entwickler kontrollieren, wie dem Nutzer eine App dargestellt wird und wie sie eingeführt wird. Es liefert einen Platz für die Metadaten der Web-App. Das Manifest beinhaltet normalerweise eine Start URL, den vollen und kurzen Namen der App, Links zu Icons und deren Größe, Typ und Ort. Es kann beispielsweise auch die Farbgestaltung der Adressleiste festlegen. Um diese Settings zu nutzen, muss der Entwickler lediglich einen einzelnen Link zum Manifest in alle Header der Unterseiten einfügen.

2. Service Worker

Dies ist ein weiteres technisches Element, dass die Haupt-Features einer Progressiven Web Applikation unterstützt – nämlich die Möglichkeit offline zu arbeiten, Synchronisierung im Hintergrund und die erwähnten Push-Mitteilungen. Es reagiert auf Interaktionen der Nutzer mit der App. Da der Service Worker nur für ein bestimmtes Ereignis zuständig ist, ist seine Lebensspanne recht gering.

3. Die Shell Architecture der Applikation

Das Bauen und die Aufrechterhaltung von PAWs beinhaltet die Trennung von statischem und dynamischem Inhalt. Und so ist die Nutzung einer Shell Architecture ein wichtiges Element. Sie beinhaltet die Kern-Designelemente, die notwendig sind, damit die App auch ohne Internetverbindung läuft. Dieser Ansatz funktioniert besonders gut für JavaScript basierte Apps, die aus einer Seite bestehen und Apps mit einer relativ stabilen Navigation und sich änderndem Content.

4. Transport Layer Security (TLS)

PWAs setzen wirksam das Transport Layer Security Protokoll ein. TLS ist der Standard eines sicheren und robusten Datenaustauschs zwischen zwei Applikationen. Die Datenintegrität erfordert es, die Webseite via HTTPS zu bedienen und ein SSL Zertifikat auf dem Server zu installieren.

Vorteile der Progressive Web Apps:

Was also sind zusammengefasst die Vorteile von PWAs? Ein wichtiger Aspekt ist hier sicherlich die Kostenersparnis, da die Entwicklung von PWAs weniger aufwändig ist und weniger Zeit erfordert. Ein Grund dafür ist, dass Entwickler die App nicht für verschiedene Plattformen bauen müssen, da eine Progressive Web App gut auf Android, iOS und anderen Geräten zeitgleich läuft.

Auch gibt es weniger Reibungen bei der Installation. Auffindbarkeit, als eines der Kernelemente, erhöht die Wettbewerbsfähigkeit gegenüber nativen Apps. Dieser Vorteil ist vor allem deshalb bedeutend, weil jeder zusätzliche Schritt beim Download einer App die Anzahl potentieller Nutzer um ganze 20 Prozent reduziert. Alles, was Nutzer machen müssen, ist auf eine Webseite gehen, die App zum Startbildschirm hinzufügen und dann die Webseite öffnen. Ein Umweg über einen App-Store ist nicht notwendig.

Auch Updates sind sehr viel einfacher: Nutzer haben immer die aktuellste Version der App zu Hand und müssen nicht extra ein Update im App-Store machen. Unternehmen müssen daher auch keine alten Versionen weiterbetreiben, um Kunden und Nutzern mit veralteter Software den Zugang zu ermöglichen. Alle sind auf dem neuesten Stand.

Höhere Nutzerbindung gehört ebenfalls zu den Vorteilen von PWAs. Rund 80 Prozent aller Nutzer legen Apps gerne auf den Homescreen ab. Die Fähigkeit PWAs dort direkt hinzuzufügen, gibt ihnen einen Vorteil gegenüber Web Apps. Weitere wichtige Faktoren für eine dauerhafte App-Nutzung sind unter anderem ein einfacher und schneller Zugriff. Und genau da liegt eine Stärke von PWAs.

Nachteile von Progressive Web Apps

Wie bei allen Technologien gibt es natürlich auch Nachteile – und die stehen in diesem Fall in direktem Zusammenhang mit den erwähnten Vorteilen. Verglichen mit nativen Apps haben PWAs eine begrenztere Funktionalität und verursachen einen höheren Batterieverbrauch, denn auch wenn sie progressiv sind: Sie sind immer noch Web-Apps, das heißt sie verbrauchen Strom, wenn sie sich mit dem Internet verbinden. Sie können einige für native Apps typischen Features nicht unterstützen: Fingerabdruck-Erkennung, NFC, Bluetooth, Geofencing, Inter-App-Kommunikation und fortschrittliche Kamera-Steuerung.

Wie bereits erwähnt ist es einfacher die PWAs zu installieren, da kein Umweg über den App-Store notwendig ist. Darin liegt aber auch einer der Nachteile: Dadurch, dass PWAs nicht in Apps-Stores verfügbar sind, können auch Kunden verloren gehen, wenn diese nur im App-Store nach neuen Apps browsen und die PWA dort nicht finden können.

Chancen der Progressive Web Apps

Mit „Progressive Web Apps“ werden Applikationen beschrieben, die die neuen, von modernen Browsern unterstützten Features nutzen, inklusive Service Worker und Web App Manifest, und das ganz unabhängig vom nativen Betriebssystem des genutzten Gerätes.

Unabhängig der vorgestellten Beispiele beschreiben Progressive Web Apps ein Nutzererlebnis, das die Reichweite des Webs nutzt und über die folgenden Charakteristika verfügt:

• Zuverlässigkeit: Lädt sofort und zeigt nie die Warnung „Keine Internetverbindung“, selbst bei unzuverlässigen Netzwerkbedingungen.
• Schnelligkeit: Sie reagieren schnell auf Nutzerinteraktionen – mit schneller Animation und ohne stockendes Scrollen.
• Ansprechend: Sie fühlen sich wie natürliche Apps auf dem jeweiligen Gerät an und bieten ein immersives Erlebnis.

Bleibt die Frage: Warum braucht man derartige Progressive Web Apps und gibt es bereits Beispiele, von Progressive Web Apps im produktiven Einsatz? Oder ist das wieder nur der nächste Hype, der die IT-Welt erfasst und schnell wieder vergessen ist? Experten beantworten diese Frage ganz klar mit „nein“, denn die Vorteile von PWAs sind immens:

• Kosten: Die Kosten für das Bauen einer PWA sind sehr viel geringer als für mobile Applikationen.
• Progressive: Das heißt, sie funktionieren für jeden Nutzer, ganz egal welchen Browser er nutzt.
• Responsive: Sie passen zu jeder Form der Web-Nutzung – über Desktop-Computer, Mobiltelefon, Tablet… und selbst über Geräte, die heute noch gar nicht entwickelt sind.
• Unabhängigkeit von einer Internetverbindung: Service Worker erlauben es, auch offline oder bei schlechtem Netz zu arbeiten.
• Wie eine App: PWAs fühlen sich an wie eine native App und bieten die gleiche Art Interaktion und Navigation.
• Immer aktuell: PWAs sind immer auf dem neuesten Stand dank eines Service Worker Update Prozesses.
• Sicher: Verbunden über HTTPS verhindern sie unerlaubten Zugriff oder Manipulation.
• Leicht zu finden: Durch W3C Manifest und Service Worker Registrierung sind sie leicht als App zu erkennen und werden daher auch von Suchmaschinen gefunden.
• Weckt wiederkehrendes Interesse: Das Interesse der Nutzer zu wecken ist einfach, da PWAs über Features wie Push-Mitteilugen verfügen
• Installierbarkeit: Es erlaubt Nutzern, diejenigen Apps auf dem Startbildschirm zu hinterlegen, die ihnen besonders sinnvoll erscheinen.

Um das etwas konkreter zu machen, sind einige Beispiel von PWAs angebracht, die derzeit bereits genutzt werden, oder sich in der Entwicklung befinden.

Progressive Web Apps: Beispiele für gelungene Nutzung

Unzählige Beispiele von Progressive Web Apps beweisen, dass diese das Beste von Web Applikationen mit den besten Features mobiler Apps verbinden können. Sie nutzen – wie in den voran gegangenen Teilen dieser Reihe dargestellt – Service Workers, HTTPS, ein Manifest File und eine Shell Architecture, um das Erlebnis einer nativen App auf Web-Applikationen zu übertragen.

Es gibt bereits einige herausragende Erfolgsbeispiele, die zeigen, was PWAs leisten können. Die Washington Post suchte zum Beispiel nach einer neuen Möglichkeit, Nutzern Inhalte zukommen zu lassen. Dabei war klar, dass rund 55 Prozent mittels eines Mobilgeräts auf die Inhalte zugreifen. Zu bedenken war auch, dass Nutzer dazu neigen eine Webseite zu verlassen, dauert das Laden der Seite länger als 3 Sekunden. Die Zeitung wollte also sicherstellen, dass Nutzer die Inhalte innerhalb eines Wimpernschlags auch zur Verfügung hatten. Gleichzeitig sollte es möglich sein, entsprechende Artikel offline zu lesen. Mittels PWA und Accelerated Mobile Pages (AMP, unmittelbares Laden der Seite) konnte die Washington Post die Ladezeit der Webseite um 88 Prozent verbessern. Auch verbesserte sich deutlich die Zahl von Leser an mobilen Geräten, die innerhalb von 7 Tagen erneut auf die Seite zugriffen – und zwar um gut 23 Prozent. Die Progressive Web App ist allerdings noch in der Beta-Phase, das heißt Entwickler arbeiten derzeit weiterhin an den notwendigen Features.

Beispiel 1: x (ehemals Twitter) als Progressive Web App

Twitter Lite (mobile.twitter.com) wurde als Progressive Web App gebaut und das hat dabei geholfen, das Nutzererlebnis zu verbessern, wenn Nutzer von einem Mobilgerät auf die Seite zugreifen. 2017 wurde sie global zur Default Mobilseite von Twitter. Das Social Media Unternehmen entwickelte Twitter Lite, um ein zuverlässigeres Erlebnis zu ermöglichen – mit dem Ziel eines unmittelbaren Ladens, Nutzerbindung und eines geringeren Datenverbrauch.

Da die meisten Nutzer in der Welt mit 2G oder 3G auf das Netzwerk zugreifen, ist es wichtig, dass dieser Zugang sehr schnell erfolgt. Twitter Lite lädt in unter 5 Sekunden bei einer 3G Verbindung. Es unterstützt Offline-Support, so dass man nicht unterbrochen wird, nur weil Twitter vorrübergehend die Verbindung verliert. Verglichen mit nativen mobilen Apps hat die Twitter Lite PWA gerade einem 600 KB, während die Android App 25 MB Speicherplatz verbraucht, die iOS App sogar 215 MB.

Beispiel 2: Mittels Progressive Web App auf Haussuche

Housing.com ist ein indisches Immobilien-Suchportal, das es Nutzern erlaubt nach Wohnungen und Häusern zu suchen. Dabei berücksichtigt werden geographische Lage, Anzahl der Zimmer etc. Es ist eine der führenden Immobilienseiten in Indien. 2016 entschloss sich das hauseigene Entwicklerteam eine eigene Progressive Web App zu entwickeln. Mit einem Ergebnis, das sich sehen lassen kann: So verbesserte sich beispielsweise das Laden der Seite um über 30 Prozent und gleichzeitig erhöhte sich die Zeit, die Nutzer auf der Seite verbrachten, um gute 10 Prozent.

Bedenkt man, dass die meisten indischen Nutzer über 2G oder 3G auf das Netzwerk zugreifen, wird deutlich, wie wichtig eine schnelle Nutzererfahrung ist. Um die Ladezeiten zu verringern, nutzt Housing.com die Service Worker Technologie und eine gestraffte Seite, so dass Nutzer schnell finden, wonach sie eigentlich suchen. Nutzer können weiter nach Immobilien suchen und die vorangegangenen Suchen betrachten – und das alles, während sie offline sind.

Beispiel 3: Uber als Beispiel für PWAs

Auch Uber realisierte zeitnah, dass es einer schnell ladenden Seite bedarf, wenn das Unternehmen in vielen Teilen der Erde erfolgreich sein will – eben auch da, wo es nur schwache Internetverbindungen gibt. Die Lösung war auch hier eine Progressive Web App: m.uber.com

Die PWA liefert denjenigen Nutzern ein App-ähnliche Erlebnis, die über Mobilgeräte günstiger Hersteller auf die Seite zugreifen, für die es vielleicht nicht einmal eine native App gibt. Auch ist die PWA sehr klein. Die einfache Anfrage nach einem Fahrer verbraucht gerade einmal 50KB, was es möglich macht, die Web App auch in einem schwachen Netz schnell zu laden. Auch hier nutzt die mobile Web App Service Workers und lokalen Speicherplatz, so dass Nutzer eine gute Erfahrung haben, selbst wenn die Internetverbindung schwankt

Zusammengefasst lässt sich sagen: PWAs sind also aus vielerlei Hinsicht interessant für Unternehmen. Sie erhöhen die Nutzerbindung erheblich. Auch erschließen sie neue Nutzergruppen, selbst wenn das Unternehmen bereits über eine native App verfügt. Da Nutzer weitestgehend auf ein drahtloses Netzwerk angewiesen sind, bevorzugen sie Webseiten und Apps, die möglichst geringe Datenmengen verbrauchen und zumindest in Teilen auch offline nutzbar sind. Und genau das bieten Progressive Web Apps.