Shopware PWA: Headless Commerce im Detail

Shopware PWA: Headless Commerce im Detail

Am 18. Juni 2020 enthüllte Shopware auf dem digitalen Community Day die Shopware PWA. Basierend auf VueStorefront Next ergänzt sie den "API-First"- und "Headless"-Ansatz von Shopware 6. Damit unterstreicht Shopware seinen Fokus auf zukunftsfähige Frontend-Technologien.

Was ist eine Progressive Web App (PWA)?

Technisch lässt sich eine PWA schnell implementieren: Sie benötigt lediglich eine durchgängige SSL-Verschlüsselung, einen ServiceWorker (eine kleine JavaScript-Datei) und eine Manifest.json mit grundlegenden Informationen wie App-Name und Icon. Erfüllt eine Webseite diese Kriterien, kann sie auf Android, iOS, Windows, Chromebooks und macOS wie eine native App installiert werden. Auch Push-Benachrichtigungen lassen sich über den ServiceWorker integrieren. Die Shopware PWA geht jedoch über diese Basisdefinition hinaus.

Herkömmliche Shopware 6 Themes basieren auf Twig und serverseitig gerendertem PHP. Bei jedem Seitenaufruf erstellt der Server die Seite neu und sendet sie an den Browser. Die PWA-Technologie verändert dieses Prinzip grundlegend.

Funktionsweise der PWA in Shopware 6

Das Shopware 6 Backend nutzt Vue.js, also JavaScript. Während PHP serverseitig ausgeführt wird, läuft JavaScript clientseitig im Browser. Die neue Shopware PWA setzt ebenfalls auf Vue.js und wird somit größtenteils im Browser ausgeführt. Hier kommt der "API-First"-Ansatz von Shopware 6 zum Tragen: Über die "Store API" werden dynamische Inhalte wie Preise, Artikellisten und Account-Informationen individuell vom Server abgerufen.

Eine Progressive Web App unterscheidet sich von traditionellen Frontends durch folgende Merkmale:

• Performance: Statische Inhalte werden nur einmal oder bei Änderungen vom Server geladen. CSS-, JavaScript-Dateien und Bilder wie das Logo werden aus dem Browser-Cache geladen. Dynamische Inhalte werden über eine schlanke API integriert.
• Mehrere Backends, ein Frontend: Besonders für größere Händler ist es üblich, verschiedene Systeme für unterschiedliche Zwecke zu nutzen. Der "API-First"-Ansatz ermöglicht es, Shopinhalte aus Shopware 6 und CMS-Inhalte aus einem anderen System in einem Frontend zu bündeln, ohne dass der Nutzer dies bemerkt.
• Trennung von Front- und Backend: Dies ist die Definition von "Headless" und ein Resultat des "API-First"-Ansatzes. Da dynamische Inhalte per API geladen werden, müssen Frontend und Backend nicht am selben Ort liegen. Dies bietet Vorteile, wie die Entkopplung von Backend-Prozessen und Frontend-Performance. Theoretisch kann das Frontend auch bei unerreichbarem Shopware 6 Backend weiter genutzt werden.

Vorteile und Herausforderungen der Shopware PWA

Der mobile Internetzugang nimmt stetig zu. Obwohl Desktop-Ansichten weiterhin relevant sind, liegt der Fokus bei Shop-Projekten klar auf Smartphones. Bei Pixup Media verzeichnen wir teils über 90 % mobile Zugriffe. Eine PWA adressiert diese Zielgruppe optimal und bietet auch auf dem Desktop erheblichen Mehrwert. Eine Übersicht der Vorteile der Shopware PWA gegenüber dem Shopware 6 Standard-Theme:

• Performance: Eine Vue.js-basierte PWA bietet deutlich bessere Performance in allen Bereichen.
• Trennung Front-/Backend: Separate Serverleistung für Frontend und Backend.
• Offline-Fähigkeit: Schlechte Internetverbindung? Dank Offline-Funktionen kann der Shop (teilweise) weiter genutzt werden.
• App-Feeling: Durch "Installierbarkeit" und lokale CSS/JavaScript-Ausführung fühlt sich die Nutzung wie eine native App an.
• Keine Store-Abhängigkeit: Der aufwendige Veröffentlichungs- und Aktualisierungsprozess in App Stores entfällt. Eine PWA ist eine Webseite, die sich wie eine App anfühlt.
• SEO & Social Media: PWAs sind für Google attraktiv, primär aufgrund der besseren Performance und der verbesserten User Interaction. Einzelne Seiten lassen sich wie reguläre Webseiten über WhatsApp oder Facebook teilen.
• Flexible Backend-Integration: Erweiterte Produktdaten aus einem PIM, Basisdaten aus Shopware, Banner aus einem CMS – all das lässt sich bei einem Abruf einer Produktdailseite einfach über eine PWA abbilden.

Obwohl die Vorteile zahlreich sind, ist die Shopware PWA nicht für jeden Händler geeignet. Der initiale Entwicklungsaufwand und die benötigte Budgetierung sind derzeit noch hoch. Ohne technisches Know-how ist ein nachhaltiger Betrieb schwierig. Besonders für kleinere Händler, die oft auf Plugins aus dem Shopware Community Store setzen, ist die Integration nur bedingt möglich, auch wenn eine Drittanbieter-Plugin-Schnittstelle in der PWA existiert. Diese Slots müssen von Plugin-Herstellern aktiv umgesetzt und meist individuell angepasst werden, was spezielle Fähigkeiten erfordert, die über klassisches Webdesign hinausgehen.

Fazit

Viele große E-Commerce-Systeme verfügen über ein Headless Frontend, nun auch Shopware. Die Kooperation mit VueStorefront für die PWA-Entwicklung und Shopware für die Store API ermöglicht den Einsatz einer PWA mit Shopware 6. Dies erfordert jedoch einen gewissen Aufwand. Pixup Media ist seit über einem Jahr mit der Entwicklung von PWAs im Shopware 6 Kontext vertraut und launcht dank der neuen Shopware 6 Store API bald erste Projekte. Diese reichen von absoluter Mobiloptimierung bis hin zu Frontends mit Shopware 6 und angebundenen Microservices.

Sie interessieren sich für die Möglichkeiten der Shopware PWA oder benötigen Unterstützung bei der Umsetzung? Kontaktieren Sie uns für eine Beratung!" , seo_title=