Auf dem diesjährigen digitalen Shopware Community am 18.06.2020 wurde das Geheimnis der Shopware Community endgültig enthüllt: Auf Basis der VueStorefront Next erhält Shopware 6 mit seinem "API First"- und "Headless" -Ansatz die eigene Shopware PWA!
Damit untermauert Shopware seinen mit Shopware 6 eingeschlagenen Weg der "Headless"-Frontends. Dies ist ein aktueller Trend, der sich in der gesamten Branche verfolgen lässt.
Was ist eigentlich eine Progressive Web App (PWA)
Aus technischer Sicht ist eine PWA in nur wenigen Minuten in so ziemlich jedem Shop umgesetzt. Diese muss nämlich nur eine durchgängige SSL-Verschlüsselung aufweisen, einen „ServiceWorker“ (hierbei kann es sich um eine kleine Javascript Datei handeln) sowie eine Manifest.jason. In dieser Datei sind einfache Informationen wie App-Name oder Icon definiert. Sind diese drei Voraussetzungen gegeben, lässt sich jede Webseite auf jedem Android oder iPhone Device, Microsoft PC, Chromebook oder Mac "installieren" und sieht aus wie eine native App auf dem jeweiligen Betriebssystem. Auch Push Notifications können über den kleinen ServiceWorker relativ einfach eingebunden werden. Bei dieser vereinfachten Darstellung einer PWA bleiben aber die eigentlichen Vorteile außen vor!
Die Shopware PWA geht ein deutliches Stück weiter. Das herkömmliche Shopware 6 - Theme basiert auf Twig und somit auf serverseitig gerenderten PHP. Rufe ich also eine bestimmte Webseite auf, dann baut der Server genau diese Seite zusammen und schickt sie mir an meinen Browser zurück, um sie mir darzustellen. So hat das Web seit jeher funktioniert, was sich nun mit der PWA-Technologie ändert.
Wie funktioniert die PWA in Shopware 6
Das neue Shopware 6 - Backend basiert auf Vue.js und somit auf Javascript. Der Unterschied von PHP und Javascript liegt darin, dass, wie bereits erwähnt, PHP serverseitig ausgeführt wird und Javascript im Gegensatz dazu im Client, also lokal im jeweiligen Browser. Die neue Shopware PWA setzt dabei wie das Shopware 6 - Backend auch auf Vue.js und wird somit weitestgehend im Browser ausgeführt. Hier kommt nun das Schlagwort "API First" von der Shopware 6 ins Spiel, denn nur durch die Einbindung der "Store API" lassen sich dynamische Inhalte wie z.B. Preise, Artikellisten, Account-Informationen usw. individuell vom Server abrufen.
Eine Progressive Web App zeichnet sich im Gegensatz zu einem herkömmlichen Frontend also durch folgende Eigenschaften aus:
- Performance: Statische Inhalte werden nur ein einziges Mal oder nach Änderung vom Server abgerufen. CSS - und Javascript - Dateien oder bestimmte Bilder wie z.B. das Logo werden nicht immer neu, sondern aus dem Browsercache geladen! Dynamische Inhalte werden durch eine schlanke API integriert.
- Mehrere Backends in einem Frontend: Weniger bei kleinen Händlern, aber durchaus die Regel bei größeren ist die Tatsache, dass es mehrere unterschiedliche Systeme für verschiedene Zwecke gibt. Durch den "API First" - Ansatz können in einem Frontend z.B. die Shopinhalte aus Shopware 6 und CMS - Inhalte aus einem anderen CMS - System geladen werden. Der User bemerkt das im Frontend nicht.
- Trennung von Front- und Backend: Diese Trennung ist per se die Definition vom Buzzword "Headless" und ein Resultat des "API First" - Ansatzes. Da die dynamischen Inhalte per API ins Frontend geladen werden, muss das Frontend also nicht mehr am selben Ort wie das Backend liegen. Die Vorteile sind vielfältig, wie z.B. der, dass Backend - Prozesse keinen direkten (meist negativen) Einfluss auf das Frontend haben. Rein theoretisch ist es sogar möglich, dass das Frontend weiterhin genutzt werden kann, während das Shopware 6 - Backend gar nicht mehr erreichbar ist.
Vorteile und Herausforderungen der Shopware PWA
Der Anteil mobiler Nutzung steigt auch in Deutschland unentwegt. Die Desktop-Ansicht ist zwar weit davon entfernt an kompletter Bedeutung zu verlieren, aber der Fokus muss bei jedem Shop-Projekt ganz klar auf dem Smartphone liegen. Auch wir bei Pixup Media sehen in unseren Projekten teils Zugriffszahlen von bereits über 90% über das Smartphone. Eine Progressive Web App adressiert passgenau diese User und bietet zeitgleich in der Desktop-Ansicht einen bedeutenden Mehrwert! Hier eine grobe Übersicht über die Vorteile der Shopware PWA gegenüber dem Shopware 6 - Standard Theme:
- Performance: Wie schon oben erwähnt punktet eine auf Vue.js basierte PWA durch eine deutlich bessere Performance in so ziemlich allen Bereichen
- Trennung Front-/Backend: Eigene Serverpower, sowohl für das Front- als auch das Backend
- Offline: Schlechtes Internet auf dem Land oder in der U-Bahn? Dank der Offlinefunktionen in einer PWA kann der Shop (teilweise) weiter genutzt werden
- App-Feeling: Dank der "Installierbarkeit" und den lokal ausgeführten CSS- und Javascript - Dateien fühlt sich die Nutzung wie bei einer richtigen App an
- Keine Play/App Store Abhängigkeit: Wer diesen Prozess einmal mitgemacht hat, weiß wie aufwendig die Platzierung einer App in einem Store sein kann. Eine PWA muss nicht über einen bestimmten Store veröffentlicht und auch nicht aktualisiert werden. Es ist immer noch eine Webseite, fühlt sich aber wie eine App an.
- SEO & Social Media: Eine PWA ist Googles neuer Liebling. Das liegt natürlich in erster Linie an der deutlich besseren Performance, aber eben auch am App-Feeling und der dadurch meist stark verbesserten User Interaktion. Auch lassen sich einzelne Seiten wie bei einer regulären Webseite schnell über Whatsapp oder Facebook teilen.
- X-beliebige Backends / 1 Frontend: Erweiterte Produktdaten aus einem PIM, grundlegende Daten aus Shopware, Banner aus einem CMS usw. bei einem Abruf einer Produktdetailseite. Dieses abstrakte Szenario ist mit einem PWA ein leichtes!
Man könnte mit dem Aufzählen von Vorteilen noch eine ganze Weile fortfahren und es klingt bestimmt zu schön um wahr zu sein. In vielerlei Hinsicht ist es auch so. Aber ist nun die Shopware PWA etwas für jeden Händler? Da der initiale Entwicklungsaufwand aktuell noch relativ hoch ist, sehen wir eine entsprechend hohe Budgetierung.
Ohne viel technisches Know-How lässt sich solch eine Plattform auch nicht nachhaltig betreiben. Gerade bei kleineren Händlern im Shopware Universum wird fehlendes technisches Wissen versucht, mit dem Einsatz von Plugins aus dem Shopware Community Store zu ersetzen. Das wird mit der Shopware PWA nur bedingt funktionieren, obwohl eine Drittanbieter-Plugin- Schnittstelle in der PWA existiert. Diese Slots müssen aber aktiv vom Pluginhersteller auch umgesetzt und in den meisten Fällen dann noch individuell angepasst werden. Also wird auch hier wieder spezielle Fertigkeiten benötigt, welche weit über das Fähigkeiten eines klassischen Webdesigners hinaus gehen.
Fazit
Viele große E-Commerce-Systeme haben es, Shopware nun auch: Ein Headless Frontend in Form der Shopware PWA. Dank der Kooperation mit vueStorefront, welche sich auf die Entwicklung der eigentlichen PWA konzentriert, und Shopware, die wiederum die Store API bereitstellt, kann man nun in den Genuss der zahlreichen Vorteile einer PWA mit Shopware 6 kommen, wenn auch nicht ohne geringem Aufwand.
Wir bei Pixup Media sind nun seit weit über einem Jahr mit der Entwicklung von PWA‘s im Shopware 6 - Kontext vertraut und können nun endlich zeitnah, dank der neuen Shopware 6 Store API, unsere ersten Projekte launchen. Hier wird es ganz unterschiedliche Beispiele von absoluter Mobiloptimierung, bis hin zu einem Frontend mit Shopware 6 und diversen angebundenen Microservices geben.