Progressive Web Apps – Vorteile für Unternehmen

Christian Schramm | Beratung | Technologie

Es gibt zahlreiche Gründe, warum sich Unternehmen für den Einsatz von Progressive Web Apps (PWAs) entscheiden sollten. Dafür sprechen zum Beispiel die komfortable Bedienung auf allen mobilen Endgeräten, der geringe Entwicklungsaufwand, die Indexierbarkeit in Suchmaschinen, die einfache Wartung und nicht zuletzt die sofortige Verfügbarkeit von neuen Features und Updates für Nutzer. Doch wie genau heben sich PWAs von traditionellen Apps und klassischen Websites ab und wann machen sie für Unternehmen Sinn?

Progressive Web Apps - Vorteile für Unternehmen / Grafik: © webit!

Wie unterscheiden sich PWAs von nativen Apps und Web Apps?

Native Apps sind die traditionellen Apps, die jeder auf seinem Smartphone nutzt. Sie werden speziell für eine Plattform, also iOS, Android oder Windows entwickelt. Der Vorteil ist, sie können auf den vollen Funktionsumfang des Betriebssystems sowie die auf dem Gerät befindliche Hardware – wie GPS, Bluetooth oder die Kamera zugreifen. Sie erreichen dadurch eine sehr gute Bedienbarkeit und Performance. Auf der anderen Seite entstehen jedoch hohe Entwicklungskosten. Denn zu berücksichtigen sind nicht nur unterschiedliche Betriebssysteme und -versionen, sondern auch Gerätetypen und Bildschirmgrößen. Und das fortwährend, denn auch bei Aktualisierungen und Erweiterungen der Apps müssen diese Rahmenbedingungen berücksichtigt werden.

Web Apps sind webbasierte Anwendungen, die betriebssystemunabhängig über einen Browser aufgerufen werden können. Vereinfacht ausgedrückt handelt es sich um Websites. Für die Verwendung ist keine lokale Installation auf dem Smartphone erforderlich, nur ein Browser und eine Verbindung zum Internet. Updates müssen nicht für jedes Betriebssystem ausgerollt werden, sondern stehen für Nutzer online sofort bereit. Die Entwicklungskosten sind deutlich geringer, da Web Apps nicht für verschiedene Plattformen programmiert werden müssen, sondern auf allen gängigen Geräten und aktuellen Systemen laufen. Der größte Nachteil ist, dass Web Apps die Funktionalitäten der nativen Apps in der Regel nicht vollständig abdecken können und Web Apps auch nicht auf alle Gerätefunktionen zugreifen können. Außerdem kann die Performance bei bestimmten Anwendungen deutlich geringer sein als bei nativen Apps.

Progressive App Entwicklung vs. Native App Entwicklung / Grafik: © webit!

PWAs vereinen die Vorteile von nativen Apps und Web Apps

Progressive Web Apps sind Anwendungen mit Eigenschaften, die bisher nativen Apps vorbehalten waren. Progressiv steht dabei für Progressive Enhancement - für die Fähigkeit von PWAs, Nutzern je nach verwendetem Gerät die bestmögliche User Experience zu bieten.  

Zugriff auf native Gerätefunktionen

PWAs können auf viele native Gerätefunktionen zugreifen, darunter

  • Kamera (Video/Audio),
  • Datei-System,
  • Geolocation,
  • Gerätebewegung,
  • Hintergrundsynchronisation,
  • einschließlich Push-Benachichtigungen.

Leichte Installation / App Store / Homescreen

PWAs werden vom Betreiber wie Websites bereitgestellt und können sofort nach Aufruf genutzt werden. Sie können sogar lokal auf dem Smartphone installiert werden. Dabei kann das App-Icon auf dem Homescreen hinzugefügt werden. Die Nutzer können so kaum noch unterscheiden, ob es sich um eine native App oder eine PWA handelt.

In Suchmaschinen auffindbar

PWAs können wie Websites von Google indexiert werden und verfügen demzufolge über eine direkte Suchmaschinen-Anbindung. Statt in App Stores um Aufmerksamkeit zu ringen und Werbung für die Apps machen zu müssen, sind PWAs durch klassische SEO oder SEA sichtbar.

Service Worker / Offlinefähigkeit / Push-Benachrichtigungen

Eine Besonderheit von PWAs ist die moderne Service-Worker-Browsertechnologie. Der Service Worker agiert wie ein Hintergrunddienst, wie eine Kommunikationsschnittstelle zwischen dem Browser und dem Server. Der Hauptvorteil: er kann Hintergrundaufgaben auch dann ausführen, wenn die Anwendung selbst gerade nicht läuft. So kann dieser beispielsweise im Hintergrund selbstständig Positionsabfragen durchführen, ohne dass die Website neu geladen werden muss.
Der Service Worker kann auch angewiesen werden, ausgehende Netzwerkanfragen aus seinen zwischengespeicherten Daten im Browser-Cache zu beantworten. So lässt sich sogar eine Offlinefähigkeit von PWAs realisieren. Durch den Einsatz der Service Worker können auch sogenannte Push-Benachrichtigungen realisiert werden, die den Nutzer erreichen, auch wenn die eigentliche Website gar nicht aktiv ist. Nutzer bekommen wie bei nativen Apps, die Meldungen auf dem Smartphone-Bildschirm, sobald etwas Neues in der App geschieht.

Schnelle Ladezeiten

Der erste Aufruf einer PWA ist ähnlich dem Laden einer Website. Jeder weitere Aufruf wird aus den zwischengespeicherten Inhalten im Browser-Cache realisiert und kann dadurch enorm beschleunigt werden. Der Service Worker kann zudem neue Inhalte dynamisch nachladen, sobald diese verfügbar sind oder benötigt werden.  

Geringe Speichergröße, Updates sofort verfügbar

PWAs haben eine 80-90% geringere Speichergröße als native Apps. Sie werden automatisch über den Browser aktualisiert. Das heißt, der aufwendige Upload von Updates entfällt. Nutzer haben schnellen Zugriff auf neue Features und Updates. Es ist außerdem keine Validierung über den App Store notwendig, was die Veröffentlichung von neuen Versionen auch erheblich beschleunigt.  

Weniger Entwicklungsaufwand und Wartung

Im Vergleich zu nativen Apps ist der Entwicklungsaufwand von PWAs deutlich geringer. Die einmalige Programmierung für alle Endgeräte mit entsprechender Browserunterstützung verkürzt außerdem den Aufwand für Weiterentwicklung und Wartung.

Wermutstropfen: Funktionsumfang und Browserkompatibilität

Was PWAs können, hängt immer vom konkret verwendeten Browser sowie dem Endgerät ab. Auch wenn PWAs immer mehr native Gerätefunktionen mit einbeziehen können, so sind es längst noch nicht alle. Wenn Apps zum Beispiel Zugriff auf Bluetooth, Gesichtserkennung, Fingerprint-Sensor, Kontakte oder den Kalender brauchen, dann sind PWAs aktuell dazu noch nicht geeignet. Dazu kommt, dass nicht alle Browser PWAs in vollem Umfang unterstützen, die Kompatibilität ist derzeit noch in der Entwicklung und wird stetig ausgebaut. Wie die Unterstützung aktuell unter den meistgenutzten Browsern verteilt ist, zeigt die folgende Infografik. (Datenquelle: http://caniuse.com, Stand: September 2020)

Browserunterstützung der PWA Basic Featutes / Datenquelle: https://caniuse.com / Infografik: © webit!

Wann machen PWAs für Unternehmen Sinn?

PWAs bieten vielfältige Anwendungsmöglichkeiten. Die Tatsachen, dass PWAs nicht über einen App Store heruntergeladen werden müssen, dass sie einen geringen Speicher benötigen und über schnelle Ladezeiten verfügen, werden immer wieder als Hauptargumente für PWAs genannt. Der App-Müdigkeit vieler Nutzer kann damit entgegengewirkt werden. Je nach Anwendungsszenario können PWAs für Unternehmen eine Alternative oder eine Ergänzung sein, wenn:

  • keine Einnahmen durch die Installation generiert werden sollen,
  • eine mobile Website mit App-ähnlicher Nutzererfahrung geboten werden soll,
  • unternehmerischer Erfolg von guter mobiler Performance abhängt,
  • die mobilen Ladezeiten signifikant verbessert werden sollen,
  • Push-Benachrichtigungen gesendet werden sollen,
  • Nutzer eine instabile Netzwerkverbindung haben oder gern und oft offline arbeiten,
  • Nutzer oft auf Inhalte zugreifen und regelmäßig neue Inhalte bereitgestellt werden.

Drei erfolgreiche Anwendungsbeispiele

Screenshots: BMW, ABOUT YOU, Twitter Lite / Grafik: © webit!

Der Autohersteller BMW entschied sich für die Realisierung seiner mobilen Website als PWA.
Das Argument: […] „PWAs sind zuverlässig und werden selbst unter schwierigen Netzwerkbedingungen sofort geladen. Sie sind optisch ansprechend und ermöglichen eine App-ähnliche Nutzererfahrung auf Mobilgeräten.“  
Das Ergebnis: „Die neue mobile Website lädt dreimal schneller. Der Anteil potenzieller Kunden, die sich von BMW.com zu einer der Verkaufswebseiten durchklicken, ist von 8 Prozent auf 30 Prozent emporgeschnellt. Wir haben 27 Prozent mehr mobile Nutzer. Außerdem hat die Besucherzahl im Vergleich zur früheren Website durch die Suchmaschinenoptimierung um 49 Prozent zugenommen.“  So Jörg Poggenpohl, Global Head of Digital Marketing bei BMW. (Quelle)

Der Fashion Online Shop der Otto Group ABOUT YOU entschied sich angesichts seiner Kunden mit kurzen Aufmerksamkeitsspannen, für eine PWA. Bei Einführung nutzte ABOUT YOU in erster Linie die Features, die unmittelbare Vorteile für ihre Nutzer versprachen: „Für uns sind das vor allem die Add2Home-Funktion, die Beschleunigung der Nutzererfahrung durch das Caching und die Offline-Funktionen“, sagt Florian Wüst, Product Lead Shop Applications bei ABOUT YOU.

Mithilfe des Service Worker kann ABOUT YOU heute genau festlegen, welche Inhalte regelmäßig im Browser gespeichert werden sollen, ab dem zweiten Aufruf der PWA erhöht sich dadurch die Ladegeschwindigkeit deutlich. Grundlegende Elemente der Shop-Seite werden auch angezeigt, wenn keine Verbindung zum Internet besteht. Durch den Einsatz der PWA konnte ABOUT YOU die Ladezeiten des mobilen Online-Shops um sieben Prozent reduzieren und die Conversion Rate um drei Prozent steigern. (Quelle)

Twitter Lite ist die PWA-Version der nativen Twitter App. Die PWA verwendet standardmäßig weniger Daten, reduziert den Datenverbrauch von Bildern um 70 % und verlässt sich soweit wie möglich auf zwischengespeicherte Daten. Nutzer können steuern, wann Twitter Lite Medienelemente herunterlädt und verbrauchen so weniger ihrer mobilen Daten. Der Funktionsumfang ist identisch geblieben. So konnte die App einen Zuwachs von 65% an Seitenaufrufen pro Sitzung verzeichnen, 75% mehr versendete Tweets und eine Reduzierung der Absprungrate um 20%. (Quelle)

Jetzt sind Sie am Zug

Man könnte die Liste der erfolgreichen Anwendungsbeispiele hier weiter fortsetzen. Viel interessanter ist allerdings für uns, welchen Anwendungsfall Sie als PWA umsetzen möchten und wie wir Sie dabei unterstützen können. Wir beraten Sie gern, welche Szenarien sich elegant mit Progressive Web Apps lösen lassen. Lesen Sie auch unsere aktuelle Referenz zur Umsetzung einer bundesweiten Plattform zur Datenerfassung als PWA und welche Vorteile daraus für unseren Kunden entstanden sind.