Fachartikel
Created by Dr. Ludger Vogt

PWA in eCommerce: The Storefront of the Future

Eine gute Usability, eine individuelle Suche und eine hohe Performance entscheiden im B2B-E-Commerce über die Konversion und damit den Umsatz eines Shops. Die Technologie der Progressive Web App (PWA) vereint dabei das Nutzererlebnis klassischer Websites mit den Vorzügen nativer Apps. Durch die Trennung von Back- und Frontend kann die Entwicklung dynamischer auf Marktanforderungen reagieren. Shop- und Dritt-Anbieter stellen mit ihren PWA-Lösungen eine gute Basis zur Verfügung, sodass der Shop nicht komplett neu gebaut werden muss.

So sehr sich der B2B eCommerce vom B2C eCommerce unterscheidet: Die Anforderungen der User an Websites und deren Komfort nähern sich denen im Endkundengeschäft an. Man will schnell fündig werden, erwartet eine gute Performance der Seite und einen hohen Komfort. Das kann mit dem Ansatz der Progressive Web App (PWA) gelingen. PWA fasst eine Reihe Technologien zusammen, die das Nutzererlebnis klassischer Webseiten verbessert und um die Fähigkeiten erweitert, die User von Apps kennen. PWA vereint damit Merkmale von responsiven Websites und nativen Apps und macht die doppelte Entwicklung für Unternehmen überflüssig.  

Die meisten PWA wie auch die Lösung von Intershop sind sogenannte Single Page Applications: Die gesamte Applikation ist in Javascript geschrieben. Eine HTML-Seite wird nur initial ausgeliefert und nicht klassisch als Server-Site-Rendering-Ansatz, wo jede Interaktion des Users eine neue HTML-Seite produziert, die an den Browser geschickt wird. Hat der User die Seite betreten, erfolgen keine Updates oder Ladevorgänge mehr. Nur noch Javascript wird ausgeführt, darüber neue Daten nachgeladen, die Seite umgerendert und Bestandteile ersetzt, wenn der User sich bewegt und zum Beispiel auf der Startseite einen Kategoriebaum anklickt. Der Inhalt der Seite wird dann ausgetauscht und angepasst mit der Kategorie im Mittelbereich, einer Filternavigation und der Produktliste. Bestimmte Daten können sogar vor der Interaktion des Kunden dynamisch nachgeladen werden, was die Geschwindigkeit der Applikation weiter verbessert.  

PWA bietet Push-Nachrichten, Homescreen-Button und Offline-Funktionalität 

Baut ein Shop auf PWA auf, können User die Applikation wie eine native App auf ihren mobilen Geräten wie Smartphones oder Tablets zum Homescreen hinzufügen und auch Push-Benachrichtigungen erhalten. Für die Nutzung der Website muss diese also nicht mehr im Browser aufgerufen und geladen werden, die User Experience gleicht eher der einer nativen App. Der Installationsvorgang über den Appstore entfällt. Dieser Download stellt in der Regel eine Hürde dar, die meisten User verfügen über eine Vielzahl an Apps und überlegen sich, welche sie noch zusätzlich installieren. Diese Hürde wird mit PWA umschifft. Push-Notifications erlauben es Unternehmen, mit dem Kunden zu interagieren und ihn auf dem aktuellen Stand zu halten, etwa, wenn seine Bestellung verschickt wurde oder eine Preissenkung erfolgt. Das stärkt die Kundenbindung und bietet ein Mehr an Service, das mit einer klassischen Website nicht möglich ist.  

Der Service Worker, ein Stück Javascript im Browser, unterstützt bei PWA darüber hinaus Offline-Funktionalitäten: Er ist auch aktiv, wenn die Website nicht geladen ist. Das erlaubt es, die Applikation auch ohne Internetzugang zu öffnen und im begrenzten Umfang zu nutzen.  

Insgesamt fühlt sich die Benutzung des Shops für den User schneller, flüssiger und reibungsloser an, was den Einkauf angenehmer und komfortabler macht. Mit der besseren Usability steigt auch die Kundenzufriedenheit. Und die bessere Performance mit geringeren Ladezeiten führt am Ende zu einer höheren Conversion Rate. Außerdem: Jede Millisekunde gesparte Ladezeit wirkt sich nachweislich positiv auf das SEO-Ranking aus. Mit dem PWA-Ansatz können Unternehmen die Vorteile von Suchmaschinenoptimierung (SEO) nutzen. Denn sucht ein User im Web ein Produkt, findet er den Link in der Regel über die SERP von Google. Basiert die Zielseite auf PWA, wird er direkt in die Applikation geleitet. Firmen profitieren dann von einer größeren Reichweite über die gängige Suchmaschinensuche und können leichter neue Kunden gewinnen. Die Customer Journey beginnt in der Regel bei Google, mit PWA wird der User dort abgeholt.  

Unabdingbar: PWA wird von den großen Technologieunternehmen Google, Apple und Microsoft und deren Browsern mit dem entsprechenden Service Worker Support sowie deren Java-Script-Frameworks unterstützt. 

PWA mit Headless CMS und REST-API 

Die klassische Entwicklung im E-Commerce schuf lange Zeit Monolithen, wo Storefront bzw. Frontend Teil der Gesamtlösung waren. Das brachte die Vorteile eines direkteren Zugriffs bei der Entwicklung sowie einer geringeren technischen Komplexität im Hinblick auf die Gesamtentwicklung. Ein entscheidender Nachteil liegt allerdings darin, dass bei Änderungen der gesamte Monolith neu deployt und getestet werden muss, was schnell hohe Umfänge annimmt, teuer und umständlich ist. Da anders als früher Inhalte nicht mehr nur auf einer Website, sondern in zahlreichen anderen Formaten und Medien – mobil oder digital TV – ausgeliefert werden, wird PWA ergänzt von einem Headless CMS (Content-Management-System), das die Bereitstellung der Daten unabhängig von der Darstellung macht und damit unterschiedlichste Geräte und deren Strukturen bedienen kann. Die Daten werden über eine REST-API, eine Schnittstelle, ausgeliefert. Daten können darüber in unterschiedlichen Programmiersprachen abgerufen werden. Die REST-API ist getestet und stabil und bietet eine Abwärtskompatibilität: Erhält der Server, der die Business-Funktionalität bereitstellt, ein Update, kann der Client mit der Storefront, dem User Interface, trotzdem weiter funktionieren. 

Intershop PWA und headless-Ansatz haben für Entwickler den Vorteil, dass sie den Frontend-Client nicht selbst aufbauen müssen. Stattdessen werden relevante Features wie Lokalisierung, SEO oder Lösungen zu gängigen Problemen zur Verfügung gestellt. Das Entwicklungsprojekt muss diese also nicht mehr lösen, sondern kann darauf aufsetzen und nur für das Projekt relevante Änderungen vornehmen. Das Look und Feel der Seite lässt sich anpassen, auch kleinere oder größere Änderungen für die User Experience sind ohne weiteres möglich.  

Mit PWA steigt die Migrationsfähigkeit des Frontends, Server-Updates lassen sich einfacher durchführen. Gerade Änderungen am Frontend sind häufiger notwendig: Der Life-Cycle ist mit Usability-Verbesserungen oder neuen Features wie der Optimierung des Checkout-Flows kürzer als beim Backend. Diese Änderungen können schneller ausgerollt werden, Updates öfter erfolgen. Tägliche Deployments sind kein Problem mehr. Die Entwicklung erreicht mit dem schnellen Ausrollen eine bessere Time-to-Market.  

Darüber hinaus steigt mit der PWA-Technologie die Skalierbarkeit eines Shops: Ist das Frontend ausgelastet, können mit Technologien wie Docker und Kybernetes weitere Maschinen hinzugefügt und das System hochskaliert werden. Allerdings wird die Hauptlast vom Browser getragen, da das Rendern dort und nicht mehr auf dem Server erfolgt. Deswegen erfordert PWA weniger Rechenleistung und Kapazität insgesamt. Die Daten werden nur bereitgestellt und übertragen, die Seite selbst wird im Browser gebaut.  

Die PWA-Lösung von Intershop basiert auf der Javascript-Bibliothek Angular, einem Open Source Projekt, das von Google initiiert wurde und von Google für eigene Applikationen verwendet wird. Das hat den Vorteil, dass ein großes Ökosystem mit zahlreichen Experten dahinter steht, und viele Lösungen für bestimmte Features oder Probleme bereits verfügbar sind, seien es die Google Maps-Integration oder Authentifizierungslösung, Webtracking oder Lokalisierung. Daneben gibt es ein umfangreiches Angebot an Schulungen, Video Tutorials etc.  

Fazit:

Der PWA-Ansatz ist für B2B-E-Commerce hochinteressant. Er vereint die User Experience nativer Apps mit der Reichweite mobiler Websites und bietet damit nicht nur Funktionserweiterungen für ein Mehr an Komfort für den User, sondern auch eine bessere Usability und eine schnellere Geschwindigkeit bei der Auslieferung der Inhalte. Mit dem headless-Ansatz wird die Entwicklung dynamischer und kann schneller auf Bedürfnisse reagieren. Und nicht zuletzt stehen bei der Intershop PWA ein breites Set an Basisfunktionalitäten und ein großes Ökosystem zur Verfügung, so dass Entwickler nicht mehr auf der grünen Wiese beginnen müssen. 

Sign up for our newsletter now!

Dive into the world of eCommerce with the Smart Commerce SE Newsletter and stay always up-to-date. To get started, simply sign up with your email address.