This page is also available in English. Change to English page

Progressive Webapps im eCommerce – lohnt sich das?

DE_Progressive_Webapss_-PWAs-860x325

Im klassischen Webdesign hält der Trend zu Progressive Webapps (PWAs) weiterhin an, doch auch im eCommerce können sie eine Alternative sein oder die Strategie erweitern. Sie kombinieren Online-Funktionen einer klassischen Website mit denen einer nativen App. Einen Überblick verschafft Dir Shopware Partner solutionDrive mit zwei Anwendungsbeispielen:

Die Technologien, auf denen eine PWA basiert, sind die der klassischen Webentwicklung – im Grunde HTML5, CSS3 und JavaScript. Durch sogenannte Service Worker (JavaScript-Dateien, die separat vom Haupt-Browser-Thread ausgeführt werden) können weitere Funktionen, wie Offline-Fähigkeit (durch Caching von Inhalten) und Push-Benachrichtigungen hinzugefügt werden.

Vereinfacht gesagt, entsteht so am Ende eine Website, die sich optisch an die verschiedenen Endgeräte anpasst und sich auf mobilen Endgeräten größtenteils wie eine App anfühlt und viele derer Funktionen abbildet.

Diese Vorteile bieten Dir PWAs:

Responsive

Es müssen nicht mehrere Anwendungen für verschiedene Geräte/ Displaygrößen entwickelt werden.

Offline-Funktionalität

Durch Caching von Inhalten können diese auch mit langsamer Internetverbindung oder ganz ohne Verbindung mit kurzen Ladezeiten zur Verfügung gestellt werden. Dies kann die Absprungrate verringern und die Conversion Rate deutlich steigern.

Browserbasiert

Es ist keine Installation über einen App-Store nötig; der Nutzer muss keine Software-Updates durchführen. Eine Verknüpfung auf dem Home-Screen kann erstellt werden, um ein App-Feeling zu unterstützen. Zudem wird die PWA als Website von Google indexiert und arbeitet über HTTPS, was die Sicherheit der Datenübertragung erhöht.

Diese Nachteile gibt es:

Browserabhängigkeit

Letztendlich ist der Funktions- und Darstellungsumfang abhängig von den Browserfunktionen. Safari unterstütze PWAs lange Zeit nicht, oder nicht in vollem Umfang, ab iOS 12.2 wurde nun nachgebessert.

Echtzeitdaten-Verarbeitung

Gerade im eCommerce muss der Umgang mit Echtzeitdaten beachtet werden, d. h. einige Prozesse funktionieren nicht oder nur eingeschränkt ohne bestehende Internetverbindung (z. B. Payment). Die Umsetzung erfordert eine gute Konzeption der Anwendungsfälle und genaue Betrachtung, welche Daten wann zwischengespeichert werden können.

PWA_solutiondrive_Imagebild

Wie kannst Du PWAs im Shop-Umfeld einsetzen?

Der Anteil von Mobile Traffic und Umsatz im eCommerce steigt kontinuierlich an. Langsame Seiten haben eine schlechtere Conversion Rate – mit offline verfügbaren Inhalten kann man hier den entscheidenden Vorteil bieten. Außerdem erfordert nicht jedes Szenario im eCommerce einen kompletten Shop mit all seinen Funktionen. Oftmals reicht es, wenn einzelne Komponenten ausgegeben werden. Die relevanten Informationen können beispielsweise über die Shopware-API im Sinne eines „Headless Systems”, d. h. der Trennung von Frontend und Backend, abgeholt werden. Über verschiedene Ausgabekanäle können die Inhalte für die jeweiligen Endgeräte optimiert, dargestellt und genutzt werden. So fungiert der Shop als Datenquelle und aus dieser können weitere Frontends, wie die PWA, „beliefert” werden. 

In den folgenden Anwendungsbeispielen wird die Shopware-API als Datenbasis genutzt, um Use-Cases rund um den Shop abzubilden.

Anwendungsbeispiel A: Abbildung von Außendienst-Prozessen

Im konkreten Kundenprojekt ist das im Shopware-B2B-Shop verfügbare Sortiment über eine PWA für den Außendienst per Tablet abrufbar. 

Der Außendienst-Mitarbeiter öffnet die App über das Desktop-Icon und aktualisiert die Sortiments-Daten morgens mit bestehender Internetverbindung. Tagsüber können die Bestellungen aufgenommen werden. Die Eingabe der Artikelnummern wird mit einem Handscanner unterstützt, mit dessen Hilfe man die Artikel direkt vom Katalog abscannen kann. Besteht beim Kunden keine Internetverbindung, werden die Bestellungen in der PWA zwischengespeichert und können später an den Shop oder ein ERP-System übertragen werden. Die Bestellungen sind somit vor Ort digitalisiert und es wird keine weitere Software benötigt, um die Bestellungen aufzunehmen. Bei erneuter Internetverbindung werden die Informationen dann (z. B. abends nach der Rückkehr vom Termin) synchronisiert.

Anwendungsbeispiel B: Zusatzinformationen im Store

Bei einem weiteren Kunden hat der Shopware Partner ein völlig anderes Szenario mit Hilfe einer PWA gelöst. Hierbei geht es um das Bereitstellen von weiterführenden Informationen zu Produkten, beispielsweise auf Messen oder im Store. In der PWA kann der Artikel im Shop-Sortiment gesucht und die gewünschten (Zusatz-) Informationen dazu angezeigt werden. Dies funktioniert über mobile Endgeräte oder auch über Scanner in Verbindung mit einem Display. 

Somit kann ein Store-Mitarbeiter den Kunden anhand der weiterführenden Informationen zum Artikel beraten oder die Online-Verfügbarkeit und den aktuellen Preis erfragen.

Denkbar ist auch, dass sich Kunden an einer fest installierten Scan-Station eigenständig weitere Infos zu einzelnen Artikeln abrufen. Hier wäre es dann einfach möglich, z. B. erklärende Videos zu den Artikeln einzubinden.

Der Vorteil einer PWA ist hierbei, dass kein gesamter (Sub-)Shop erstellt oder angepasst werden muss. Shop-Startseiten, Listenseiten und der gesamte Check Out werden hier nicht benötigt, sondern nur gezielte Produkt-Informationen.

Fazit

Händler müssen ihren Kunden einen Mehrwert durch innovative Services und Usability bieten. Hierbei können PWAs einen entscheidenden Vorteil liefern. Erste Online-Shops mit PWA-Frontends sind bereits online; weitere Anwendungsfälle gibt es reichlich. Innovative Shop-Systeme, wie auch Shopware 6, setzen verstärkt auf API-Lösungen, die die Basis für den Einsatz von PWAs bilden.

Über solutionDrive

Die solutionDrive GmbH mit Sitz in Nürnberg setzt als eCommerce-Agentur Shopware B2B- und B2C-Projekte um und entwickelt individuelle Software-Lösungen, um Online- und stationären Handel zu verbinden. Hierzu gehören u. a. PWAs und native Apps.

 

Das könnte Dich auch interessieren:

Praxistipp: Performance-Optimierung für Onlineshops

Grundlagen der Conversion Optimierung für Onlineshops

Social Shopping auf Instagram sorgt für Absatz