Progressive Web Apps (PWA) in Magento 2

PWA statten Ihren Shop mit einer ganzen Reihe neuer Features und Funktionen aus wie zum Beispiel:

  • Erhöhte Seitengeschwindigkeit
  • Der „Mobil-Modus“, welcher Sie Push-Benachrichtigungen versenden lässt
  • Verfügbarkeit im Offline-Modus
  • eine handliche und reaktionsschnelle Benutzeroberfläche

Nicht zu erwähnen ist, dass PWA sich natürlich auch sonst normal ins Web einfügen.

Für die Entwicklung von PWA wird meist auf einen beliebten modernen Tech-Stapel bestehend aus ReactJS, Redux, GraphQL, Apollo und Webpack gesetzt. Das bietet Magento-Entwicklern viel Spielraum zum Erkunden. Die PWA-Philosophie hat allerdings wenig mit der zu tun, an die wir uns in Magento so gewöhnt haben und unterscheidet sich vom Entwicklungsansatz bis zum klassischen Verständnis des Theme-Konzepts auf ganzer Linie.

In diesem Artikel werden wir die PWA im Detail betrachten und erörtern, welche Möglichkeiten sie für E-Commerce bieten.

 

Wie funktionieren PWA aus der Sicht von Nutzern und Entwicklern?

Für diesen Artikel haben wir uns entschieden, das Ganze von zwei Seiten aus anzugehen und PWA sowohl mit den Augen eines durchschnittlichen Shop-Users als auch mit denen eines Magento-Entwicklers zu betrachten.

PWA-User

Der normale User kann PWA als eine herkömmliche Webseite betrachten, die im Netz wie gewohnt funktioniert. Darüber hinaus interagiert sie mit dem User genauso wie eine native App: Wenn der User die Seite besucht, erhält er die Möglichkeit, sie auf seinem Mobilgerät zu installieren. Nach der Installation funktioniert die Seite wie eine offline Mobil-App, die sogar Push-Benachrichtigungen versenden kann.

PWA-Entwickler

Aus Entwicklersicht stellt PWA ein separates Projekt im Stammverzeichnis einer Standard-Magento-2-Installation dar. Dabei handelt es sich um eine React-Anwendung, die für die Interaktion mit dem Backend GraphQL verwendet. Weitere Komponenten des Projekts sind:

  • Die Build- und Entwicklungs-Tools aus dem PWA-Buildpack CLI, die Ihnen dabei helfen, die Komponenten und die lokale Umgebung einzurichten und zu optimieren;
  • Peregrine-Hooks und -Komponenten (eine Sammlung vorgefertigter nützlicher Komponenten) und React Hooks, welche die Wiederverwendung der allgemeinen Funktionen wie Routing, Produkt- oder Preisanzeige ermöglichen;
  • Workbox (Googles Datensammlung für die Unterstützung des Offline-Modus);
  • Der Venia Store und die visuellen Komponenten – das ist das Theme Nucleus und die vorgefertigten visuellen Komponenten.
  • UPWARD, eine Spezifikation, die beschreibt, wie ein Server auf Datenabfragen reagieren soll. Es ist sozusagen ein Vermittler zwischen der PWA-Storefront und dem Magento-Backend mit verschiedenen APIs, der alle Abfragen an einem zentralen Ort findet und die Rückgabe der erwarteten Antwort ermöglicht.

 

PWA VS. Magento Themes: Was ist der Unterschied?

Das Standard-PWA-Theme von Magento heisst Venia. Allerdings unterscheidet es sich deutlich von den normalen Magento-Themes.

Ein reguläres Magento-Theme ist eine Komponente, die das Erscheinungsbild des Shops bestimmt. Das Magento-Theme ist tief in die Funktionalität von Magento integriert und wird immer vom übergeordneten Theme (dem sogenannten Parent-Theme) beerbt. Ganz oben in der Magento-Erbfolge befindet sich Magento Blank. Dabei handelt es sich um die Kerndateien des Themes. Jedes andere Theme basiert auf diesen Dateien, definiert sie neu und ordnet sie neu an.

PWA-Themes werden nicht von einem übergeordneten Theme beerbt. Sie bestehen vielmehr aus React-Komponenten, die unterschiedliche Funktionen bieten. Sie können diese Komponenten sowohl verschieben, um das Verhalten des Themes zu verändern, oder Sie können sie komplett löschen. Die Vererbung in Magento kommt nicht ohne Risiken: Wenn das Parent-Theme geändert wird, kann sich das auch auf untergeordnete Themes (sogenannte Child-Themes) auswirken.

PWA setzt auf einen modularen Ansatz, mit dem ein Theme mithilfe verschiedener Module von Grund auf neu erstellt werden kann. Diese Herangehensweise bietet eine grössere Flexibilität und Kontrolle beim Aufbau eines Shops.

Die Theme-Komponenten sind modular und daher unabhängig voneinander. Dadurch kann jedes Teil individuell aktualisiert werden, wobei die negativen Auswirkungen auf die anderen Teile auf ein Minimum reduziert werden.

Natürlich hat jeder Ansatz seine Vor- und Nachteile. Jedoch werden die Verbesserungen von PWA in absehbarer Zeit nicht zum Erliegen kommen – im Gegenteil. Immer mehr Seiten beteiligen sich aktiv an der Entwicklung dieses Projekts. Wenn man sich die relevanten Ablagen auf GitHub anschaut, findet man viele Einträge, die sich mit dem „theming“ von PWA beschäftigen. Das wird die Vorteile der zwei Strategien vereinen und die visuelle Anpassung des Shops deutlich vereinfachen.

 

Warum sollte ich für meinen Magento 2 Shop PWA einsetzen?

Genau genommen sind es fünf gute Gründe, die uns zu PWA greifen lassen würden:

Ausgedehnte Abdeckung: Sie können eine PWA durch einen einfachen Klick auf einen Link in einem sozialen Netzwerk, beim Surfen im Web oder in der Google-Suche öffnen. Dafür wird weder der App- noch der PlayStore benötigt. Darüber hinaus bietet diese Funktion eine grössere Informationsabdeckung als native Apps.

Plattformübergreifend: Ein und dieselbe PWA deckt sowohl iOS als auch Android und das herkömmliche Web ab. Sie müssen keine drei Apps bauen, um die Bedürfnisse der unterschiedlichen User beziehungsweise Betriebssysteme zu befriedigen. Sie brauchen lediglich PWA.

Relativ kleine Grösse: PWA sind deutlich kleiner als native Apps. Es dauert nur Sekunden, um sie einzurichten und sie arbeiten rasend schnell. Der Grund dafür ist die konsequente Nutzung der Fähigkeiten des Browsers und seiner Cache-Funktion.

Keine Installation: Eine PWA funktioniert auf jeder Plattform und das ganz ohne Installation.

Bessere Conversionrate: Erfolgreiche Unternehmen wie AliExpress, eXtra Electronics, Konga oder 5 Miles haben ihre Conversionrate durch den Einsatz von PWA bereits um 60 bis 100 Prozent gesteigert. Und ein Ende ist noch gar nicht abzusehen.

 

Die Nachteile von PWA

Der wichtigste Nachteil von PWA ist, dass es sich um eine noch sehr junge Technologie handelt, weswegen noch nicht viele Implementierungen vorgenommen wurden. Das erklärt dann auch, warum noch nicht alle Browser PWA vollständig unterstützen (so ist die mobile Einrichtung nicht verfügbar). Das jedoch behindert – wie oben erwähnt – in keinster Weise den Betrieb von PWA, die im Internet ohnehin normal funktionieren.

Kann man also wirklich von einem Nachteil sprechen? Nun, das müssen Sie selbst entscheiden.

 

Fazit

Bei PWA handelt es sich um eine neue Technologie, die sowohl Usern als auch Entwicklern ganz neue Möglichkeiten bietet. Dazu zählen die mobile Einrichtung, Push-Benachrichtigungen und die Möglichkeit, offline zu arbeiten. Darüber hinaus öffnen PWA neue Horizonte für Geschäftsmöglichkeiten, einschliesslich des Vertriebs ausserhalb des Webs oder eines App-Stores. PWA ist ein neues Magento-Projekt, das sich aktiv entwickelt und uns in der nahen Zukunft noch mit vielen Möglichkeiten und Spielereien begeistern wird.