Progressive Web Apps: Beispiele für gelungene Nutzung

Progressive Web Apps gehören zu den Technologien, die ursprünglich Google vorgeschlagen hat, um das Web für alle zu einem besseren Ort zu machen. „Besser“ heißt in diesem Fall, dass das Web für Nutzer schnell und leicht zugänglich ist, ganz egal wo sie sind und wie sie darauf zugreifen – selbst wenn es über eine sehr langsame Internetverbindung ist. Ausgewählte Progressive Web Apps (PWA) Beispiele sollen in diesem Artikel vorgestellt werden.

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.

Beispiel 1: Twitter Lite 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 2G-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 2G-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