Shopware 6 setzt verstärkt auf API-Lösungen, die eine Basis für Progressive Web Apps (PWAs) bilden. In diesem Artikel stellen wir Dir Vue Storefront vor – erfahre mehr über die Vorteile und die Zielgruppen dieser PWA-Lösung von Divante.
Was Du über PWAs wissen musst
Die komplett neu gedachte technologische Basis von Shopware 6 eröffnet viele neue Möglichkeiten, mit Deinem E-Commerce-Business zu wachsen. Dazu zählt auch die Anbindung einer Progressive Web App.
Was genau ist das? Progressive Web Apps (PWAs) sind nicht neu, werden aber zunehmend beliebter. Offiziell wurde der Begriff 2015 durch Frances Berriman (Designer) und Alex Russell (Google Chrome Engineer) geprägt. Seitdem haben mehrere große Marken diese Technologie für sich entdeckt. Zudem wird sie stark durch Google getrieben, indem der Suchmaschinenriese PWAs im Ranking berücksichtigt und PWA-Features unter anderem den Mobile Score beeinflussen. Auch viele der PWA Grundkonzepte stammen von Google. Dabei betont Google vor allem diese drei Eigenschaften:
- Schnelligkeit – PWAs sind performant in der Bereitstellung und Handhabung
- Nutzerbindung – PWAs binden User nachhaltig über ihre Kernfeatures
- Zuverlässigkeit – einige PWAs unterstützen sogar eine eingeschränkte Offline-Nutzung
Vereinfacht ausgedrückt sind PWAs eine Mischform aus klassischen Websites und Apps. Da sie die Vorteile beider Systeme vereinen, schließen sie eine wichtige Lücke.
Aus technischer Sicht setzen sie sich aus HTML, CSS und JavaScript Frameworks zusammen (Angular, React oder Vue.js). Service Worker, Local Caching, Web App Manifest oder andere moderne Browsertechnologien unterstützten wesentliche Funktionen wie Offline-Zugriff oder Push-Benachrichtigungen. Je nach Umfang und Funktionsweise der PWA ist auch die Anbindung an ein Backend nötig.
Warum sind PWAs für den E-Commerce sinnvoll?
Gerade für den E-Commerce sind PWAs strategisch wertvoll – zumal immer mehr Einkäufe über mobile Endgeräte stattfinden. Tatsächlich nutzen laut einer Umfrage von McKinsey in Deutschland ein Viertel der Befragten oft mobile Endgeräte für ihre Einkäufe; 20 Prozent der Befragten sogar fast immer.
PWAs eignen sich besonders gut für Händler, die einen hohen Umsatz über mobile Endgeräte erzielen oder hier Potenzial sehen. Gerade, wenn die mobile Conversion Rate noch verbesserungsfähig ist, liegt das vermutlich an einer schlechten Usability oder anderen Hürden, die mit einer PWA optimiert werden können. Was genau eine PWA alles kann, soll ein Blick auf die Webanwendung von Divante zeigen.
Vue Storefront wurde speziell für den E-Commerce entwickelt
Divante bietet die erste exklusive PWA für Shopware 6 an. Sie nennt sich Vue Storefront und wurde dementsprechend in dem beliebten Webframework Vue.js geschrieben. Die PWA ist plattformunabhängig und lässt sich via API mit verschiedenen Backends verknüpfen.
Das sind die Vorteile:
Native App Experience
Browser starten und URL eintippen? Das war einmal. Die PWA wird wie eine herkömmliche App als Verknüpfung auf dem Home Screen des mobilen Endgeräts angezeigt. Darüber kann der User diese bequem starten und direkt den Onlineshop einsehen. Auf diese Weise erhöhst Du die Reaktivität ungemein.
High Speed
Die Verbindung aus PWA und AMP (Accelerated Mobile Pages) sorgt für ein beeindruckend schnelles Lade- und Laufzeitverhalten. Tests mit Google Lighthouse belegen das und sind zudem relevant für Googles Mobile-First-Ranking.
Shopware Checkout
Der Shopware Standard Checkout ist auch offline in Vue Storefront möglich. Gängige Bezahl- und Versandmethoden können integriert werden.
SEO-Boost
Vue Storefront unterstützt die besten SEO-Praktiken für PWAs. Zum einen basiert Vue Storefront auf Vue.js, einer der SEO-freundlichsten von Google empfohlenen Lösungen. Zum anderen ist serverseitiges Rendern problemlos möglich, wodurch auch Java-Script-basierte Applikationen crawler-freundlich sind.
Push-Benachrichtigungen
Mit Push-Benachrichtigungen kannst Du Deine Kunden über Rabatte, Sonderaktionen, Neuerungen im Sortiment oder die wiederhergestellte Internetverbindung aufmerksam machen. Dabei können externe Services angebunden werden.
Google Analytics-Anbindung
Standardmäßig werden Google Analytics, Google AdWords und andere Dienste unterstützt. Analysen und Reportings funktionieren also ebenso wie bei einer herkömmlichen Website.
Konfigurierbare Produkte
Nutzer können Produkte konfigurieren, bevor sie diese dem Warenkorb hinzufügen. Dazu zählen beispielsweise Farbvarianten, verschiedene Größen und so weiter. Die Daten werden direkt aus dem Shopware 6 Backend übertragen. Zudem ist die Anzeige in der PWA sehr dynamisch und bietet deutlich mehr Möglichkeiten als herkömmliche Apps.
Barcode Scanner
Mit Vue Storefront kann der User sein Smartphone auch als Barcode Scanner benutzen. Die Frontkamera des mobilen Endgeräts fungiert dabei als Scanner. Mit diesem Feature können Nutzer ganz einfach Produkte der Bestellung hinzufügen, ohne erst online danach suchen zu müssen. Das ist z. B. auch sehr praktisch für Mitarbeiter in Lagerhallen: Direkt das Produkt im Lagerregal scannen und nachbestellen – auch ohne Internetverbindung.
Voice Commerce-Integration
Sprachgesteuerte Assistenten werden in Zukunft immer wichtiger. Mit dieser Integration kannst Du Deinen Onlineshop auch über Sprache steuern. Alexa oder Google Home lassen sich problemlos anbinden und auch die Voice-Recording-Funktion des Browsers kann angesprochen werden, zum Beispiel für die Suche.
Headless
Dank der internen Architektur ist Vue Storefront weitestgehend plattformunabhängig. Das bedeutet auch: Im Backend können Änderungen vorgenommen werden – ohne das Frontend anpassen zu müssen.
Open Source
Vue Storefront ist kostenlos unter der MIT-Lizenz und via GitHub verfügbar.
Funktionsumfang
Ein Vergleich zwischen PWA, nativer App und responsiver Website zeigt: Eine PWA vereint die Stärken beider Systeme und deckt somit das volle Spektrum ab.
Wichtiges zur Umsetzung
Es gibt PWAs in unterschiedlichem Umfang, da das Ausmaß auch von den gewünschten Funktionalitäten abhängt. Normalerweise stellt die Implementierung ein größeres Projekt dar. Die PWA kann aber auch schrittweise erweitert werden, beispielsweise durch Plugins oder mithilfe des vorgefertigten Adapters zur Umsetzung beziehungsweise Anbindung.
Für wen lohnt sich eine PWA?
Wie bereits erwähnt, eignen sich PWAs vor allem für Unternehmen, die sich im Mobile Commerce besser aufstellen wollen. Eine schlechte Verbindung, Schwierigkeiten beim Bezahlen und eine schlechte UX tragen oft zu Frustrationsmomenten und Kaufabbrüchen bei. Mit PWAs kannst Du dem effektiv entgegenwirken.
Neben Onlinehändlern, die ihre Chancen in Hinblick auf Mobile Commerce verbessern wollen, eignet sich eine PWA auch besonders gut für Händler, die
- ein Upgrade von Shopware 5 auf Shopware 6 in Betracht ziehen,
- von einem anderen Shopsystem auf Shopware migrieren wollen,
- auf sozialen Medien sehr präsent sind,
- die in den Branchen Fashion, Beauty oder Furniture & Living tätig sind,
- die Verluste bei der organischen Suche verzeichnen,
- die ihr Suchmaschinen-Ranking verbessern wollen,
- die sich mit dem Speed Scoreboard von Google befassen,
- die innovationsgetrieben sind und langfristig und strategisch planen.
Fazit
Mit PWAs kannst Du die Kundenbindung spürbar erhöhen. Das hängt mit zahlreichen Funktionen und Features zusammen: von der Offlinefähigkeit über Push-Benachrichtigungen bis hin zur Performanz. Usern macht die Nutzung einer PWA schlichtweg Spaß – und das wirkt sich auch auf die Conversions aus.
Die Implementierung einer PWA ist zwar ein aufwendiges Projekt, doch für viele innovationsgetriebene Onlineshops durchaus lohnenswert.
Weiteres zum Thema:
Progressive Webapps im E-Commerce – lohnt sich das?
