Progressive Web Apps: Warum E-Commerce-Anbieter sie nutzen sollten

Kunal Khullar

Jan 15, 20208 Min. Lesedauer
Progressive Web Apps: Warum E-Commerce-Anbieter sie nutzen sollten

INHALTSVERZEICHNIS

Gutes Marketing allein gewährleistet nicht, dass Sie Ihre Kunden auch erreichen.

Für die Marktpräsenz von E-Commerce-Unternehmen ist barrierefreier Zugriff von verschiedenen Geräten aus wesentlich, insbesondere Smartphones und Tablets. Auf Basis von eMarketer-Schätzungen sagt Statista ein kräftiges Wachstum im mobilen E-Commerce voraus. Demzufolge könnte dieser im Jahr 2021 weltweit bereits 73 % der Onlineverkäufe ausmachen – das entspricht einer Summe von 3,5 Billionen US-Dollar.

Dieser Kundenzustrom zum mobilen E-Commerce ist nicht zuletzt den Vorteilen hochfunktionaler und -attraktiver mobiler Apps zu verdanken – auch als Progressive Web Apps bekannt (PWAs).

In diesem Artikel erläutere ich, was PWAs sind, erkläre anhand von Fallstudien drei beliebter Websites ihre Vorteile für E-Commerce-Anbieter und zeige Ihnen, wie Sie diese Technologie für Ihren eigenen Onlineshop nutzen können.

Was sind Progressive Web Apps?

Progressive Web Apps sind responsive Web Apps für mobile Plattformen, die eine attraktive Alternative zur ständig wachsenden Zahl nativer Apps darstellen können. PWAs ermöglichen Push-Mitteilungen und Synchronisierung mit Ihren persönlichen Daten. Sie stellen hochwertige Services bereit, die mit denen einer iOS- oder Android-App vergleichbar sind.

PWAs sind unabhängig von Betriebssystemen. Indem dieselbe Applikation auf iOS ebenso nutzbar ist wie auf Android, sparen PWAs die Zeit und die Kosten für die Entwicklung separater nativer Apps.

Wirken sich die geringeren Kosten einer PWA negativ auf die Kundenerfahrung aus? Wahrscheinlich nicht. Ein Vergleich der iOS- und Android-App von Flipkart mit der PWA des Anbieters zeigt, dass sie sich kaum unterscheiden. Und während die herkömmliche mobile App 10 Megabyte Speicherplatz einnimmt (beginnend mit dem Download), braucht die PWA-Version nur 100 Kilobyte oder weniger.

Diese Screenshots zeigen die Benutzeroberflächen beider App-Versionen:

Flipkart: Android-App vs. PWA
Flipkart: Android-App vs. PWA

Die Vorteile von PWAs für E-Commerce-Anbieter

Sie ermöglichen kürzere Entwicklungszeiten:

PWAs beruhen auf wiederverwendbaren Codebausteinen, so dass Entwickler zügig neue Apps aus vorhandenen Modulen erstellen können. Da die App außerdem vor allem Traffic auf die eigentliche E-Commerce-Seite leitet, ist die grundlegende Infrastruktur bereits vorhanden. Für E-Commerce-Betreiber, die ihren Kunden möglichst schnell Features wie bei einer nativen App anbieten wollen, kann sich eine PWA als effizienteste Alternative zur Entwicklung einer nativen App oder responsiven Website erweisen.

Sie verkleinern die Distanz zwischen Unternehmen und Kunden:

Nach Daten des 2017 U.S. Mobile App Report von ComScore verwenden die meisten Smartphone-Nutzer in den USA nur drei bis zehn mobile Apps. Auf der anderen Seite  behauptet Google, dass Twitter nach der Einführung seiner "Twitter Lite"-PWA im Jahr 2017 erhebliche Zuwächse an Nutzerinteraktionen verzeichnet hat. Wenn native Apps eine Hürde sind, die der Interaktion Ihrer Kunden mit Ihrem Unternehmen im Wege steht, kann eine PWA zur Lösung des Problems beitragen.

Sie sparen Ihnen die Kosten für App Stores:

Native Apps werden über die App Stores der entsprechenden Betriebssysteme ausgeliefert, wo Sie für die Veröffentlichung ein kostenpflichtiges Entwicklerkonto benötigen. Mit einer PWA können Sie die Gebühren vermeiden, ohne auf Sichtbarkeit zu verzichten.

Sie verbessern die Sichtbarkeit:

Eine native App "schlummert" im App Store, während potenzielle Kunden im Browser nach Ihnen suchen. Dieses Sichtbarkeitsproblem besteht bei PWAs nicht, denn diese bieten dieselben App-Funktionen in Form von Webseiten, die über Suchmaschinen auffindbar sind.

Sind PWAs also besser als native Apps? Die folgende Grafik zeigt eine Auswahl ihrer Vorteile:

PWA vs. native Apps

Fallstudien ausgewählter E-Commerce-Websites

Es folgen einige reale Fälle, in denen E-Commerce-Marken erfolgreich PWAs eingeführt haben, um native Apps und Websites als traditionelle Marketingkanäle zu ergänzen. 

AliExpress

AliExpress PWA
Quelle: Mobile-Screenshots

Erfolg: Conversion Rate auf 104 % erhöht

Der Online-Einzelhandelsmarktplatz AliExpress muss Marktkennern nicht mehr vorgestellt werden. Mit seinem um die 150 Millionen Menschen starken Kundenstamm war er bereits mit seiner nativen App gut aufgestellt. Doch es gab auch Probleme.

Herausforderungen:

  • Die native App wurde nicht im erwarteten Umfang angenommen.
  • Die mobile Version der Website war auf eine starke Internetverbindung angewiesen.
  • Die mobile Conversion Rate war sehr niedrig.

Lösung:

Die Einführung einer PWA hat sich für AliExpress als richtige Lösung erwiesen, die auf Mobil- und Desktop-Geräten mit allen gängigen Browsern funktioniert.

Gewonnene Vorteile:

  • Eine schnelle und zuverlässige Benutzeroberfläche.
  • Push-Benachrichtigungen aktiviert.
  • Offlinezugriff möglich.
  • Verbesserte Benutzerfreundlichkeit.

Ergebnisse:

Nutzer können nun mehr Zeit auf dem Onlinemarktplatz verbringen, ohne eine mobile App herunterzuladen. 

  • Die Conversion Rate für neue mobile Nutzer über alle Browser hinweg stieg auf 104 %.
  • Allein auf iOS-Geräten stieg die Conversion Rate um 82 %.
  • Die Zahl der Seitenaufrufe pro Sitzung und Nutzer verdoppelte sich in allen Browsern.
  • Die Sitzungsdauer stieg um 74 %, wiederum in allen Browsern.

Datenquelle: Widely.io

Lancôme

Lancome PWA
Quelle: Mobile-Screenshots

Erfolg: Time to Interact (Ladezeit) um 84 % gesunken

Lancôme ist eine französische Luxusmarke für Parfum und Kosmetik, die ihre Produkte international vertreibt. Die Muttergesellschaft L’Oreal bietet Hautpflegeprodukte und ebenfalls Parfums an.

Herausforderungen:

Während die Luxusmarke 2016 einen relativen Anstieg mobilen Traffics gegenüber dem Desktop-Traffic verzeichnete, brachten die Desktop-Geräte eine überlegene Conversion Rate von 38 % gegenüber den mobilen 15 %. Verlassene Warenkörbe mobiler Nutzer und andere Probleme stellten die Marke vor Herausforderungen. 

Lösung:

Durch Push-Benachrichtigungen in der PWA-Version konnten verlassene Einkaufskörbe reaktiviert werden, was die Conversion Rate erhöhte. Dass die PWA auch in Gebieten mit schwachen Internetverbindungen gut funktionierte, ließ die Conversions ebenfalls steigen.

Ergebnisse:

  • Conversions um 17 % gestiegen
  • Absprungrate um 15 % gesunken.
  • Time to interact um 84 % reduziert.
  • Zahl mobiler Sitzungen um 51 % gestiegen.

Datenquelle: Google

Flipkart

Flipkart PWA
Quelle: Mobile-Screenshots

Erfolg: Sitzungsdauer verdreifacht

Neben Amazon ist Flipkart der beliebteste Onlineshop in Indien und gilt dort als größter Shop für Produkte wie Mobiltelefone, Mode, Elektronik, Schmuck und Haushaltsgeräte.

Herausforderungen:

Mehr als 63 % der Flipkart-Nutzer griffen über ein 2G-Netzwerk auf die Site zu, weshalb die Ladezeit recht hoch war. Als sich die Zielgruppe immer mehr an die mobile Internetnutzung gewöhnte, entstand bei dem E-Commerce-Riesen der Bedarf nach einer effizienteren Option.

Lösung:

Progressive Web Apps laden auch über langsamere Verbindungen zügig. Im Vergleich mit einer dedizierten App verbraucht die PWA-Version (Flipkart Lite) nur ein Drittel des Datenvolumens.

Ergebnisse:

Die PWA-Version brachte einen 70%igen Anstieg der Conversions relativ zu den vorher vorhandenen Optionen, also der Website und der nativen App. Die Einführung eines Buttons "Add to Home Screen" ("Zum Startbildschirm hinzufügen") erwies sich als äußerst erfolgreicher Schachzug.

  • 60 % aller Besuche via Flipkart Lite kommen über die Schaltfläche “Add to Home Screen".
  • Die Besucher, die über die Schaltfläche "Add to Home Screen" kommen, haben eine Conversion Rate von fantastischen 70 %.
  • Die Anzahl zurückkehrender Kunden stieg um 40 %.
  • Die Nutzer verbrachten mit der PWA Flipkart Lite durchschnittlich 3,5 Minuten auf der Site, nachdem frühere mobile Sitzungen nur 70 Sekunden gedauert hatten. Damit hat sich die Sitzungsdauer verdreifacht.

Datenquelle: Google

Braucht Ihre E-Commerce-Website eine PWA?

Ohne Zweifel bieten PWAs eine lange Liste an Vorteilen für E-Commerce-Sites. Ob sie sich lohnen, hängt dennoch davon ab, wie Ihr Onlinegeschäft aufgestellt ist.

Wenn Sie zum Beispiel gute Geschäfte mit iPhone-Nutzern machen, vermeiden Sie PWAs besser, da diese nicht gut für die iOS-Plattform optimiert sind. Bei Android-Nutzern können PWAs dagegen Wunder wirken.

Auf eine PWA zu setzen kann unter folgenden Bedingungen eine sehr gute Wahl sein:

1. Ihr E-Commerce-Geschäft ist noch in der Gründungsphase

E-Commerce-Unternehmen neigen zu rohen, aber spannenden Ideen. Das einzige, was ihnen fehlt, ist oft das Budget und die Richtung, um ihre Vision zu priorisieren.

In Anbetracht begrenzter Ressourcen und Zeit müssen Seiteninhaber Risiken auf Basis minimaler Investitionen eingehen.

2. Ihre Zielgruppe nutzt hauptsächlich Android

Der App Store ist eine Haupteinnahmequelle für Apple. Das ist ein Grund dafür, dass der Konzern Jahre gebraucht hat, um PWAs zuzulassen.

Android hat sich von Anfang an offener gezeigt. Die meisten Websites haben nun eine PWA mit annähernd denselben Funktionen wie das entsprechende APK (Android-Paket).

3. Sie haben es eilig und wollen nicht auf Qualität verzichten

Verglichen mit einer nativen App erfordert eine PWA viel weniger Entwicklungszeit und Ressourceneinsatz, bietet aber trotzdem eine wettbewerbsfähige mobile Nutzererfahrung. Sie ist in kürzester Zeit bereit für die Vermarktung an Ihre M-Commerce-Kunden.

4. Ihre Conversion Rate sinkt

In obigen Fallstudien haben wir gesehen, dass E-Commerce-Anbieter manchmal Schwierigkeiten haben, Sitzungen in Conversions umzuwandeln, obwohl sie eine voll funktionsfähige native App haben. Dabei hat sich gezeigt, dass diese Applikationen hohe Ansprüche an die Internetverbindung und Datenbank stellten.

Es ist nicht unwahrscheinlich, dass die Performance Ihrer nativen App hinter dem Potenzial Ihrer Marke zurückbleibt. Probieren Sie's aus, implementieren Sie eine PWA und bieten Sie Ihren Kunden die bestmögliche Version Ihrer E-Commerce-Website. 

Tools zur Entwicklung einer PWA für Ihre E-Commerce-Website 

Immer mehr Plattformen öffnen sich für die PWA-Entwicklung, allen voran E-Commerce-Entwicklungsplattformen wie Magento und Shopify. Ich habe PWAs im Detail diskutiert, um Geschäftsinhabern die Vorteile dieser Technologie sowie die wesentlichen Schritte der Entwicklung einer eigenen PWA zu zeigen.

Im Folgenden stelle ich Ihnen die Entwicklungstools vor, die für Magento und Shopify verfügbar sind. Wobei man diese noch nicht komplett für Shopify SEO nutzen kann.

Das Magento PWA Studio

Magento 2 widmet den PWAs ein ganz eigenes neues Projekt: das Magento PWA Studio. Damit können Sie eine PWA auf der Magento-2-Plattform implementieren, einsetzen und pflegen.

Magento PWA Studio

Mit dem PWA Studio für Magento 2.3 erhalten Magento-Anbieter ein PWA-Layout für Ihre gesamte Website. Es ist alles dabei, was Sie für eine erfolgreiche Implementierung benötigen:

PWA Buildpack: 
Dies ist ein Build- und Entwicklungstool für die Magento-PWA. Das PWA Buildpack dient zur Einrichtung und Konfiguration der lokalen Umgebung für die PWA-Entwicklung.

Venia Storefront: 
Dies richtet die Shop-Oberfläche der E-Commerce-Website ein. Enthalten ist ein Standardtheme namens “Luma.”

Peregrine:
Dies definiert die UI-Komponenten für Magento-PWA-Projekte. Damit können Sie individuelle Shop-Oberflächen erstellen.

Der Shopify-Shop

Shopify hat sein eigenes Sortiment an Apps zur PWA-Integration, die eine optimierte mobile Version der Web App ermöglichen. Nutzer fügen die URL ihres Onlineshops hinzu und erhalten in einfachen Schritten eine PWA-Version. So wie Magento PWA Studio alle Komponenten für eine leichte PWA-Entwicklung abdeckt, bringt auch Shopify vorgefertigte Tools mit. Dabei sollten Sie diese Shopify Optimierung Tipps beachten.

Folgende PWA-Tools erfreuen sich im Shopify Store einiger Beliebtheit:

PWA von Litefy

Litefy ist einer der ersten Shopify-App-Entwickler, die Nutzern eine direkte Konvertierung von Websites in PWAs ermöglicht haben.

PWA von Litefy
PWA von Litefy

Funktionen:

  • Keine Programmierung nötig
  • Mit Shopify AR kompatibel
  • Ermöglicht Push-Benachrichtigungen
  • Einfache Integration mit diversen Applikationen

PWA von AmpifyMe

PWA von AmpifyMe
PWA von AmpifyMe

Die PWA-App von AmpifyMe ist mit dem AMP-Tool des Anbieters integriert, um hochwertige mobile Apps mit großem Funktionsumfang zu ermöglichen.

Superchargify von Etherbits

Superchargify AMP + PWA
Superchargify AMP + PWA

Superchargify kombiniert AMP und PWA perfekt, um hochfunktionale mobile Apps zu ermöglichen. Es nutzt PWA-Funktionen, um die App ressourcensparsam zu gestalten, während AMP die Funktionen der Applikation vervielfältigt.

Ressourcensparende Zukunftstechnologie

PWAs sind ein vielversprechender Blick in die Zukunft. Eigenschaften wie Benutzerfreundlichkeit, Funktionsvielfalt und Ressourcensparsamkeit machen sie für viele E-Commerce-Anbieter zu einer hochattraktiven Option.

Keine Lösung garantiert eine Erfolgsrate von 100 Prozent. Auch von PWAs ist das nicht zu erwarten. Doch anhand gründlicher Recherche Ihres Traffics und seiner Quellen finden Sie heraus, wie Sie von PWAs profitieren können, aktuell und in Zukunft.

Fallstudien wie die obigen haben viele Anbieter auf die Möglichkeiten einer weniger aufwendigen, aber hoch skalierbaren Alternative zu konventionellen mobilen Apps aufmerksam gemacht. Es ist zu hoffen, dass E-Commerce-Unternehmen die Notwendigkeit sehen, sich für zukunftsfähige Lösungen dieser Art zu öffnen und sich so auf die steigende Nachfrage vorzubereiten.

Teilen
Author Photo
Kunal Khullar is a Co-Founder at The Brihaspati Infotech, a leading IT consulting & service provider. He holds 10+ years of experience with providing software services, development and team management with diverse offshore software consulting firms all across the globe. He is passionate about technology and believes in serving today’s diversified business world with his knowledge and expertise.