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

Was ist Shopware PWA?

Shopware 6

Jetzt Shopware testen

Onlineshop erstellen
SW6-PWA_DE-860x325px

To the English article

Shopware PWA ist ein modernes Javascript-basiertes Frontend, das für Shopware 6 entwickelt wurde und dessen Headless-API-Ansatz voll ausnutzt. Es ist ein komplett separates stateless Web-Frontend und kann über mehrere Edge-Server bereitgestellt und repliziert werden. Es hat also nichts mit der Shopware-Instanz in Bezug auf Rechenleistung, Zustand oder andere gemeinsam genutzte Ressourcen zu tun. Shopware PWA ist ein Projekt, das in Zusammenarbeit mit Vue Storefront erstellt wurde. Diese Zusammenarbeit ermöglichte es uns von Shopware, uns auf die Bereitstellung einer stabilen API zu konzentrieren, während Vue Storefront sicherstellt, dass Shopware PWA effizient, schnell und an die mobile Welt angepasst ist - die perfekte Synergie.

Warum eine neue Storefront?

Das aktuelle Shopware 6-Frontend hat eine Full-Stack-Architektur. Mit Shopware PWA zielen wir auf mehr Unabhängigkeit der Frontend-Entwickler vom Backend ab. Shopware PWA wurde von Grund auf neu aufgebaut, um moderne Ansätze aus dem Vue- und JavaScript-Bereich wie  Composition API, SSR oder “universal javascript applications” zu integrieren. Shopware PWA ist mehr als nur ein weiteres Frontend - es eröffnet eine völlig neuen Bereich von Anwendungsarchitekturen auf technischer Ebene und ermöglicht es individuelle Kundenerlebnisse auf geschäftlicher Ebene zu schaffen, was besonders, für erlebnis- und UX-orientierte Marken von großem Vorteil sein wird.

Was unterscheidet Shopware PWA von ähnlichen Lösungen?

Shopware PWA wurde in Zusammenarbeit mit Vue Storefront entwickelt. Vue Storefront hat über mehrere Jahre Erfahrung im Bereich PWA in Verbindung mit Ecommerce gesammelt. Die Zusammenarbeit zwischen beiden Teams ermöglichte es uns, beide Ansätze grundlegend aufeinander abzustimmen, was sich in der Tiefe und Nachvollziehbarkeit der Integration bemerkbar macht. Auswirkungen auf die Architektur von Shopware 6 sowie die Möglichkeit von Shopware Plugins die PWA zu erweitern oder die Integration der Shopping Experiences, des Checkouts oder Payments zeigen dies deutlich.

Davon abgesehen konzentrieren wir uns sehr darauf, die richtige Grundlage für zukünftige Implementierungen zu schaffen, wie z. B. ein Theme-System oder eine interne API (Javascript SDK), die die Kommunikation mit den Shopware-APIs vereinfacht und Erweiterungen durch Plugins von Drittanbietern ermöglicht. Da sich vieles davon im Bereich der Endgeräte des Verbrauchers abspielt, ist es für uns auch von entscheidender Bedeutung, bewährte Praktiken für die Entwicklung und den Einsatz bereitzustellen, wie z. B. Bundling, das Erstellen von Pipelines oder die Wiederverwendbarkeit von Code.

Wie spielen die Shopware Store API und das CMS mit Shopware PWA zusammen?

Die Shopware PWA ist eine eigenständige Anwendung und kann (und sollte) auf einem vom Shopware getrennten Server gehostet werden. Diese Architektur erlaubt es, das Frontend beinahe unabhängig vom zugrunde liegenden Backend zu skalieren. Zur Laufzeit ist die einzige Verbindung zwischen der Client-Anwendung (PWA) und der Backend-Anwendung (Shopware 6) die Store API. Trotz dieser klaren Entkopplung haben wir einige der Kernfunktionen von Shopware 6 in das PWA-Projekt übernommen. Zum Beispiel das zuvor erwähnte CMS. Dies ist ein wichtiges Unterscheidungsmerkmal zu anderen Ansätzen, denn es nutzt den einzigartigen visuellen Editor aus unserer Administration und verfolgt den gleichen Ansatz von unserem CMS bis hin zum PWA-Frontend.

Shopware Store-API

Mit Shopware 6 haben wir die sogenannte Store-API als Abstraktion der Shopware Storefront eingeführt. Es handelt sich dabei um eine funktionale, prozessorientierte API. Im Gegensatz zum einfachen Ansatz datenorientierter APIs (wie der Admin API) wird diese prozessorientierte API im Hinblick auf die Funktionalitäten, die sie abdecken soll, entworfen. Es gibt zig Möglichkeiten, eine Checkout-API zu entwerfen, aber nur einige wenige sind tatsächlich verständlich und verhalten sich nachvollziehbar für den Nutzer (den Entwickler). Die parallele Entwicklung der Store API und der Shopware PWA ermöglicht es uns, beide schnell zu iterieren und gegeneinander zu testen. Wir legen jedoch viel Wert darauf, die API nicht für die PWA zu entwickeln, sondern sie für andere Anwendungsfälle generisch und leistungsfähig zu halten.

Shopware-CMS innerhalb der PWA

Die Shopware PWA unterstützt eines der mächtigsten Features in Shopware 6 - das CMS. Innerhalb des CMS können Layouts im Shopware Admin-Bereich definiert und visuelle Erlebnisse gestaltet werden, die sowohl statische Daten als auch dynamische Inhalte mit Mappings sowie Produkt- oder Kategorie-Informationen verbinden. Auf diese Weise haben Leute mit wenig technischem Vorwissen große Freiheit bei der Erstellung von Inhalten, ohne dass Entwickler involviert werden müssen. Die PWA verfügt über einen Mechanismus, um diese Konfiguration in eine visuelle Darstellung aufzubereiten, genau wie in unserer Shopware-Storefront. Außerdem gelten die gleichen Erweiterungs-Mechanismen, wenn benutzerdefinierte Elemente bereitgestellt oder bestehende Elemente erweitern werden sollen. Wir haben viel Zeit investiert, um sicherzustellen, dass sich die CMS-Struktur für Entwickler in der PWA genauso nativ anfühlt wie im Backend.

Darüberhinaus kann das Shopware CMS einfach erweitert werden, dafür werden benutzerdefinierte Widgets bereitgestellt (wir unterscheiden hier zwischen Sektionen, Blöcken und Elementen) und das für PWA-Frontend verwendet.

Shopware-Plugins innerhalb der PWA

Plugins in Shopware 6 haben den großen Vorteil, dass sie vertikal integriert sind. Das bedeutet, dass sie in den gesamten Stack eingreifen können, von der Datenbank über die Geschäftslogik, Events, Templates bis hin zur API. Daher sind Plugins eine sehr angenehme Möglichkeit, den Shopware-Kern tiefgreifend zu ergänzen - wie es zum Beispiel die Shopware B2B Suite macht.

Wenn es jedoch um JavaScript-basierte Frontends wie die PWA geht, hört der "Einflussbereich" bei der API auf. Und alles andere würde dem Ansatz einer stärker entkoppelten Architektur widersprechen.

Da es zahllose Plugins gibt, die Shopware einen großen Mehrwert bieten, wollten wir dennoch einen Weg zur "Integration" von Plugins mit Shopware PWA-Projekten anbieten. Daher haben wir eine Methode entwickelt, mit der Shopware Plugins Ressourcen (d.h. benutzerdefinierte UI-Komponenten) zur Verfügung stellen können, die während des Anwendungs-”Builds” über die Admin-API angefordert werden können.

Jedes Mal, wenn das PWA-Frontend neu gebaut wird, versucht die mitgelieferte CLI, diese Ressourcen vom Shopware-Backend zu holen und sie in die Frontend-Anwendung zu laden.

Ist Shopware PWA die richtige Lösung für Dein Projekt?

Zunächst einmal ist zu beachten, dass die Wahl eines Headless-Ansatzes wahrscheinlich die anfängliche Komplexität Deines Projekts erhöht. Einige Dinge werden anders funktionieren, als Du es von Shopware gewohnt bist. Andererseits werden eine klare Verteilung der Zuständigkeiten innerhalb Deiner Architektur und das Verständnis der zugrunde liegenden APIs auf lange Sicht zu mehr Freiheit in Deinem Projekt führen.
So kannst Du ein vollständig benutzerdefiniertes Frontend erstellen, warten und skalieren, welches zu 100% auf Deine und die Anforderungen Deiner Kunden zugeschnitten ist. Ebenfalls hast Du die Möglichkeit separate Teams an Backend, APIs und Frontend arbeiten lassen, was vor allem bei größeren Projekten zu mehr Unabhängigkeit führt. Frameworks wie Vue.js oder Nuxt.js bieten Dir eine zeitgemäße Entwicklungsumgebung und jede Menge Tools.

Natürlich sind alle weiteren Funktionen die im Zusammenhang mit einer PWA stehen, wie Service Worker, Installation auf dem Homescreen oder Push-Benachrichtigungen großartige Möglichkeiten, um die Leistung und Resilienz der Website, aber auch die Kundenerfahrung nachhaltig zu verbessern.

Durch den universellen Charakter der PWA ist sie auch für die Anforderungen bestens gerüstet, die SEO für Frontend-Entwickler bereithält.
Sie bringt außerdem einige intelligente Mechanismen wie vorzeitige Bündelung und Kompilierung oder ES Treeshaking mit. Diese Mechanismen helfen Dir dabei durch den richtigen Umgang mit Dingen wie Bundlegrößen, Berechnungskomplexität und allgemeine Frontend-Richtlinien ein hochleistungsfähiges Frontend aufzubauen.

Wie startest Du mit Shopware PWA?

Wenn Du Dich aufgrund all dieser Punkte fragst, wie Du jetzt am besten startest, ein eigenes Projekt aufzubauen, dann schau Dir unsere Dokumentation an und folge dem Getting Started Guide, um Dein Projekt einzurichten. Wir sind gespannt auf Deine Projekte sowie Fragen und freuen uns von Deinen Erfahrungen mit Shopware PWA über unsere Kanäle Slack und Twitter mit #shopwarepwa zu lesen.

Das könnte Dich auch interessieren:

Shopware PWA for developers

Vue Storefront - die PWA für Shopware 6

Shopware PWA