Kategorien
Apps Responsive Design

15 aussergewöhnliche Beispiele für Progressive Web Apps

In diesem Artikel gehen wir sowohl auf die Eigenschaften von PWAs ein und zeigen eine Reihe von Beispielen, wo die Umsetzung besonders gut gelungen ist.

Progressive Web Apps (PWAs) sind ein Mittelweg zwischen nativen Apps und mobilen Websites. Sie sind vergleichsweise günstig zu entwickeln, da sie auf plattformübergreifen Web-Standards basieren, und so Kosten sparen für die Entwicklung und Unterhaltung von jeweils eigenständigen Native Apps für iOS und Android.

Anzeige

Was machen Progressive Web Apps?

PWAs sind im Kern normale Websites, denen mindestens drei weitere Standards hinzugefügt werden:

  • Der HTTPS-Standard: Die Verbindung mit dem Internet muss immer über eine sichere HTTPS-Verbindung erfolgen
  • Web App Manifest: Das Web-App-Manifest liefert grundlegende Infos über eine Web App wie beispielsweise der Name der Website, dessen Autor, das Icon sowie eine Kurzbeschreibung. Ein Web-App-Manifest kannst du dir auf der Seite von Bruce Lawson generieren lassen.
  • Service Worker: in jeder PWA steckt ein Service Worker, das Daten auf dem Gerät abspeichert, wie beispielsweise Artikel, die man schon gelesen hat. So kann man eine App-ähnliche Basis-Funktionalität abbilden, auch wenn das Gerät gar nicht mit dem Internet verbunden ist.

Darüber hinaus können noch folgende typische Funktionen hinzugefügt werden:

  • Push-Benachrichtigungen: Um Benachrichtigungen zu erhalten muss die App nicht geöffnet sein
  • Offline-Unterstützung (via oben genannter Service Worker): bestimmte Funktionen der PWA können auch ohne Internetverbindung genutzt werden
  • sofortiges Laden durch Skeleton Screens: Skeleton Screens, also Skelett-Bildschirme, sollen für den Eindruck schneller Ladezeit sorgen. Sie funktionieren so, dass zunächst beim Start der App schnellstmöglich das Skelett, das Grundgerüst der Seite angezeigt wird. Erst nach und nach füllt sich das Gerüst mit Inhalt.
  • ein App-ähnliches Verknüpfungssymbol das auf dem Home-Screen hinzugefügt werden kann
  • Videotelefonie und Chats
  • Share API: Inhalte können via Twitter, Whatsapp & co. über die Share API geteilt werden
  • Bluetooth API: sie erlaubt eine Reihe von Anwendungen für Geräte wie eine Apple Watch und IOT-Geräte, welche über Bluetooth mit dem Handy verbunden sind: Anwendungsbeispiele sind Batteriestatus auslesen, Notifications senden („der Zug verspätet sich um 20 Minuten“), und mehr.
  • Zuguterletzt kann die PWA auch in eine Native App umgewandelt werden, wie dieser Artikel (auf Englisch) aufzeigt.

Nachteile

Kein Fisch ohne Haken: Nicht alle Funktionen einer nativen App kann man in einer progressiven Web App abbilden. Das sind unter anderem:

  • das Auslesen der SMS (bspw. für einen via SMS zugesendeten Pin-Code) und der Anruferliste
  • die Benutzung von Bluetooth und GPS im Hintergrund, also während die PWA gerade nicht aktiv benutzt wird. Beide Punkte sollten jedoch regelmäßig kein Totschlagargument für den Einsatz von PWAs darstellen.

Lies unseren Artikel über Progressive Web Apps um mehr über die technischen Details von PWAs zu erfahren.


Wissenswert: Der Terminus „Progressive Web App“ wurde von Frances Berriman und Alex Russel im Jahr 2015 geprägt. Alex hat zuletzt auch Kritik an Apple geübt, dass sie die Verbreitung von PWAs im App Store erschweren. Diese Kritik ist im Grunde nicht neu, und dennoch haben PWAs auch für iOS-Nutzer einen deutlichen Mehrwert, wie Jason Grigsby schon 2016 aufgezeigte.

Anzeige

Progressive Web Apps: 15 wirklich gelungene Beispiele

About You

Die Start- und Markenseite von m.aboutyou.de

About You ist ein Fashion-Startup der Otto Group mit über 600 Mitarbeitern und monatlich 15 Millionen Besuchern. Die PWA von About You wird wie eine native App im Vollbild-Modus ausgeführt und nutzt die Möglichkeiten von Push Notifications aus, indem man bspw. über Sonderangebote oder die neue Winter-Kollektion informiert wird.

About You konnte durch den Einsatz der PWA folgende Verbesserungen erzielen (Link zur Quelle):

  • Conversion Rate: +3 %
  • Ladezeit: -7 %
  • Bounce Rate: -6 %

BMW   

Eines der Hauptziele der Umwandlung von BMW.com in eine progressive Web App war es, die schnellste mobile Website der Branche zu erstellen — und diese Bemühungen waren von Erfolg gekrönt (Link zur Quelle):

  • Die neue mobile Website lädt dreimal so schnell wie vorher,
  • Die CTR (Click-Through-Rate) ist von 8 Prozent auf 30 Prozent gestiegen, d.h. 30% der Website-Besucher von BMW.com klicken sich bis auf die Verkaufsseiten durch,
  • Dank einer zusätzlichen Einbindung von Google AMP verzeichnet die Website zudem 27 Prozent mehr mobile Nutzer und einen Gesamtanstieg der Besucherzahlen um 49 Prozent.

Continental

Das digitale Continental Magazin ist seit 2016 der Nachfolger eines ehemals in Druckform erscheinenden Kundenmagazins. Die Umsetzung als PWA führte hier ebenso zu einer deutlichen Beschleunigung der Ladezeiten:

  • Die PWA lädt viermal schneller als auf der vorherigen mobilen Website
  • Push-Benachrichtigungen spielen eine wichtige Rolle um die Besucher über Neuigkeiten zu informieren.
  • Ebenso lässt sie sich die Web App offline verwenden, d.h. eine Auswahl an Artikeln wird im Hintergrund geladen und kann dann auch ohne Internetverbindung gelesen werden (Link zur Quelle):

Financial Times   

Die Financial Times hat bereits ab 2011 nach und nach auf den Einsatz von nativen Apps verzichtet, und sich stattdessen auf den Einsatz von PWAs konzentriert, ein damals schwieriges und risikoreiches Unterfangen, welches immer wieder von Rückschlägen gezeichnet war, etwa weil die ersten Web-Applikationen für iOS noch mit PhoneGap gebaut wurden, und der heutige Service-Worker-Standard schlichtweg noch nicht existierte.

Die Progressive Web App von Financial Times ermöglicht ein schnelleres Laden von Artikeln, da diese zunächst geladen und lokal gespeichert werden – und somit auch im Offline Modus gelesen werden können.

George at Asda

Mit einem sehr hohen Anteil an mobilen Besuchern hat sich die britische Bekleidungs-Marke  „George at Asda“ entschieden, einen PWA-basierten Shop online zu bringen. Nach dem Launch desselben konnten sie einen 31 %-igen Anstieg der mobile Conversions sowie 15% mehr Seitenaufrufe je Besuch verzeichnen. Auch die Verweildauer in der PWA erhöhte sich um ganze 28 %, da die Betreiber auch eine Add to Homescreen Funktion eingeführt haben (Link zur Quelle).

Google Maps Go

Bis dato mir unbekannt war, dass auch Google Maps mit einer eigenen progressiven Web App aufwartet (Link). Die Version ist vor allem für Handys mit einer geringen Leistungskapazität ausgelegt.

Instagram Lite   

Instagram Lite ist nicht nur eine Progressive Web App, sie widerlegt auch die immer noch weit verbreitete Annahme, dass PWAs nicht auch bei Google Play erhältlich sein könnten. 

Instagram Lite wendet sich vornehmlich an User in der Dritten Welt, welche regelmäßig mit einer langsamen und instabilen Internetverbindung hadern müssen. Die Instagram Lite PWA ist nur ca. ein halbes Megabyte (MB) schwer und ist somit ca. 50 mal so leicht wie die native App mitsamt Chat-Funktion und Video-Edits. Mit Instagram Lite können auch Fotos hochgeladen und nach ihnen gesucht werden. Somit kann die PWA die Kernfunktionen des Dienstes auch sehr wohl in der Lite-Version abbilden.

Meine-Kartenmanufaktur.de

Meine-Kartenmanufaktur.de ist ein äußerst erfolgreicher Online-Shop der Digital Print Group aus Nürnberg, welcher auf den Druck individueller Karten spezialisiert ist. Er ist ein schönes Beispiel dafür, dass auch WordPress-Seiten zu einer progressiven Web-App umgewandelt werden können: Der Shop läuft auf WordPress und WooCommerce und hat das Enfold Theme installiert. Mittels des PWA-Plugins für WordPress wird die Seite zu einer Progressive Web App, und ist somit auch offline nutzbar.

Netmoms.de

Gewährt man der Website (Web-App) Zugriff auf den eigenen Standort, so kann man sich Freunde und Interessensgruppen in der näheren Umgebung anzeigen lassen.

Netmoms.de ist ein Portal des Burda-Verlags mit über 12 Millionen Seitenaufrufen im Monat. Die PWA von Netmoms bietet schnelle Ladezeiten und personalisierte Push-Nachrichten für eingeloggte User. Auch kann man sich nach Zugriff auf den eigenen Standort potentielle neue Freundinnen in der näheren Umgebung anzeigen lassen.

Nikkei

Die PWA von nikkei.com erlaubt nicht nur das Drucken und Teilen von Beiträgen, sondern man kann die Artikel auch lokal auf dem Handy abspeichern (rechtes Bild), sodass sie auf offline abrufbar sind.

Mit mehr als 450 Millionen Seitenaufrufen pro Monat ist Nikkei das in Japan führende Portal für Wirtschafts- und Finanznachrichten. In 2017 hat das Verlagshaus eine PWA veröffentlicht, welche beeindruckende Leistungszuwächse erzielt hat, unter anderem hat sich die Ladezeit der Seite um 14 Sekunden verbessert, und durch welche sich wiederum deutliche Erfolge hinsichtlich der Zugriffszahlen und der Conversion-Rate erzielen ließen (Quelle).

  • Der mobile Traffic hat sich mehr als verdoppelt
  • Es konnten 58% mehr Abonnements im Vergleich zur mobilen Vorgängerseite erzielt werden
  • Es gibt 49% mehr aktive Nutzer pro Tag
  • Die Anzahl der Seitenaufrufe pro Sitzung hat sich mehr als verdoppelt

Tinder

Tinder wurde erstmals auf dem Chrome Dev Summit in 2017 vorgestellt. Die PWA bildet nahezu alle Funktionen der nativen App ab. So kann beispielsweise durch Freigabe des Standortes Nutzer in der Umgebung angezeigt werden, und wie in der nativen App kann man durch das Streichen nach links und nach rechts potentielle Liebschaften ab- oder auswählen (Link zur Studie).

Tourismus NRW E.V.

Die PWA des Tourismusverbands NRW führt Besucher als digitaler Guide zu relevanten Orten der Popmusik. Durch die neuen Funktionalitäten können User durch Freigabe ihres Standortes durch verschiedene Städte navigiert werden und erhalten in kurzer Entfernung zu verschiedenen Spots weiterführende Inhalte in multimedialer Form (Link zur Website).

Twitter

Twitter Lite ist die Browser-basierte Version der nativen Twitter-App. Die PWA wurde 2017 an den Start gebracht, und hat bemerkenswerte Resultate erzielt, und das bei nahezu identischem Funktionsumfang (Quelle):

  • Einen 65%-igen Zuwachs an Seitenaufrufen je Sitzung
  • Einen 75%-igen Zuwachs an Tweets
  • Eine Reduzierung der Absprungrate um 20%
  • Eine Reduzierung der Ladezeit um 30% im Vergleich zur Vorgängerversion der mobilen Website
  • 10 Millionen Push-Notifications werden jeden Tag über Twitter Lite versendet
  • Die PWA wiegt nur 1/40 der nativen App

Uber

Uber hat 2017 eine PWA auf den Markt gebracht, die sich vorrangig an Nutzer mit begrenzter Datenbandbreite richtet. Die Kernanwendung ist gerade einmal 50 kb groß und benötigt weniger als 3 Sekunden, um in 2G Netzwerken geladen zu werden. (Quelle)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.