PWA (Progressive Web App) für Magento 2

Ich unterscheide hier bewusst zwischen „Headless“ und Magento PWA. Warum? Jeder erwähnt PWA weil es ein absolutes Buzzword ist, aber meint nicht unbedingt das, wofür diese Abkürzung steht.

PWA steht für „Progressive Web App“ und steht für eine Sammlung von Technologien und Best Practices.

Viele gehen nicht auf das komplette Feature-Set ein, sondern nur auf einen – zugegebenermaßen wichtigen – Teil der PWAs: in der Regel werden hier Frontend und Backend wesentlich stärker getrennt. Das macht schlanke, moderne und auch sehr individuelle Frontends wesentlich einfacher und kostengünstiger realisierbar als bisher.

Stand von Progressive Web Apps im Jahr 2020

Der Artikel Progressive Web Apps in 2020 fasst anschaulich zusammen, wie weit die Unterstützung von PWAs in unterschiedlichen Systemen im Jahr 2020 ist.

Magento PWA Studio

Für die Entwicklung einer PWA bietet Magento das PWA Studio an. Das ist ein Tool-Set, mit dem man ein Shop-Oberfläche bauen kann, die im Hintergund mit Magento 2 kommuniziert. Am 21. Februar 2019 wurde PWA Studio 2.0.0 veröffentlicht. Das ist die erste Version, für die Magento eine stabile API garantiert und somit als Grundlage empfiehlt, um mit dem Bauen von PWA-Shops zu beginnen. Seitdem gibt es laufende Updates.

Theoretisch kann man mit PWA Studio ein x-beliebiges Frontend bauen, das komplett von dem losgelöst ist, was man aus der Magento-Welt kennt. Als Orientierung bietet Magento aber selbst ein „Proof of concept„, also eine Beispiel-Implementierung, mit dem Namen Venia. Venia ist also ein Beispiel-Theme für eine PWA, so wie es Luma für einen Standard-M2-Shop ist. Die offizielle Demo für Venia findet man auf veniapwa.com. Achtung: mit Stand März 2020 unterstützen Venia-Komponenten Internationalisierung noch nicht.

Im Jänner 2020 wurde PWA Studio in Magento 2.3.4 kompatibel mit dem Commerce-Feature Page Builder (Dokumentation). Das B2B-Modul wird folgen.

Einen detaillierten Einblick geben PWA Studio Roadmap und der PWA Studio Backlog. Das PWA Studio Code Sample Repository macht EntwicklerInnen über kleine Code-Happen mit den Konzepten und der API von PWA Studio vertraut zu machen.

PWA Studio Basics für EntwicklerInnen

Magento hat ein Tutorial PWA Studio Fundamentals erstellt, in dem unter anderem diese Punkte vorgestellt werden:

  • Projekt-Setup
  • Projekt-Struktur
  • Eine statische Route hinzufügen
  • Den Site-Footer verändern
  • Component Props verwenden
  • CSS-Module

Weitere werden folgen.

Tipps und Erfahrungen zur Umsetzung von PWA Studio Projekten

Ein Blog-Eintrag von Lars Röttig dokumentiert seine Einschätzung zu Magento PWA Studio Ende Februar 2020. Andreas Emer veröffentlichte einen weiteren Erfahrungsbericht im März 2020.

Jordan Eisenburger schrieb im März 2020 eine Machbarkeitsstudie für PWA Studio 5.0.1, in welcher er seine Einschätzung abgab, wie HändlerInnen mit In-House-EntwicklerInnen oder Agenturen an eine Implementierung herangehen können, wo die Vor- und Nachteile aktuell liegen.

Ein weiterer Artikel, der hilft das Setup von PWA Studio zu verstehen, ist „Do you need Node on the server to run Magento PWA Studio“ von Jisse Reitsma.

SEO-Aspekte (Server Side Rendering, SSR)

Ein großes Thema bei PWA-Lösungen ist die Auswirkung auf SEO, vor allem im Bereich „Server Side Rendering“ (SSR).

Magento geht im Posting „Server-Side vs Client-Side Rendering and Changing SEO Practices“ auf den aktuellen Stand bei Magento PWA Studio ein.

Listen von Shops mit Magento PWA Studio

Zwei Websites sammeln Listen von Shops, die bereits mit PWA Studio umgesetzt worden sind:

UPWARD

Für PWA Studio hat Magento eine Spezifikation namens UPWARD erarbeitet und sie in NodeJS und PHP implementiert. Sie beschreibt, wie ein Server eine PWA unterstützt und ausliefert. UPWARD wurde im Kontext von Magento 2 und PWA Studio geschrieben, soll aber software- und technologie-unabhängig sein. Ausführlicher erklärt das Javier Villanueva in „Magento PWA Studio: What is UPWARD?„.

Server Side Rendering mit SeoSnap

Die niederländische Agentur Experius veröffentlichte mit SeoSnap eine Open-Source-Lösung die es erlaubt PWA Studio basierte Webshops mit Server Side Rendering (SSR) zu sehen. Das ist wichtig für gute SEO.

Was passiert mit dem Standard-Frontend (z.B. Luma), wenn PWA Studio veröffentlicht ist?

Das wurde zum ersten Mal bei der Konferenz Meet Magento New York 2018 („MM18NYC“) auf bzw. auf Twitter lebhaft diskutiert. Konkret stellt sich die Frage: was bedeutet PWA Studio als neuer Standard für HändlerInnen und IntegratorInnen, die bereits Shops und Themes mit Magento <= 2.3.x gebaut haben?

Einige Aussagen aus dieser Zeit dazu:

  • Wenn PWA Studio vollständig einsetzbar ist, wird das JavaScript-Framework Knockout.js in Magento „deprecated“, also als „nicht mehr Best Practice“ markiert und für die zukünftige Entfernung vorgesehen (Ben Marks, Magento Evangelist, 2.11.2018).
  • Das betrifft aber nur das Frontend, nicht das Backend – dort werden Knockout.js, UI components wohl noch weiter eine Rolle spielen (Vinai Kopp, 3.11.2018).
  • Die aktuelle Art Frontend-Themes zu entwickeln, wie zum Beispiel das Luma-Theme, wird aber nicht gleich mit PWA Studio deprecated. Das passiert frühestens in einem Jahr, und es wird für zumindest drei Jahre unterstützt, bevor es entfernt wird (Anton Kril, Director of Architecture bei Magento, 3.11.2018).
  • Deprecation bedeutet in dem Fall: die entsprechenden APIs werden als „@deprecated“ markiert und mit Links zu den PWA-APIs versehen (Anton Kril, 3.11.2018).
  • Die Reihenfolge der Schritte wird wie folgt sein (Anton Kril, 3.11.2018):
    • Verfügbarkeit von PWA Studio
    • Vollständiges PWA Storefront möglich/verfügbar
    • Deprecation des Luma/Blank-Themes
    • Entfernung des Luma/Blank-Themes
  • Die existierende Lösung (also wie Luma/Blank-Theme) wird zumindest zwei Jahre per Magento 2.3 unterstützt. Magento 2.4 ist noch nicht einmal geplant, deswegen ist es verfrüht, über die Entfernung der aktuellen Lösung zu sprechen (Matthew Zimmerman, Senior Director Engineering bei Magento, 3.11.2018).
  • Es macht außerdem Sinn, auf das Release von des Venia-Themes zu warten, weil der Implementierungspfad für eine PWA dann wesentlich einfacher wird (Matthew Zimmerman, 3.11.2018).
  • Wenn das Blank- oder Luma-Theme vollständig aus der Code-Basis entfernt werden, könnte das zu einem Problem für Shops werden, deren Theme auf ebendiesen Standard-Themes aufbaut (anstatt vollkommen eigenständig zu sein (Joost van Veen, 3.11.2018).
  • Kompatibilität wird bis zumindest 2021 beibehalten (Jason Woosley, Vice President Commerce Product & Platform bei Adobe, auf der MageConf, 3.11.2018).

Für HändlerInnen und IntegratorInnen im Juni 2019 bedeutet das: wenn Sie jetzt einen neuen Shop bauen, entscheiden Sie sich aufgrund des verfügbaren Budgets und der geplanten Lebenszeit des Shops, ob Sie auf eine der PWA-Lösungen setzen möchten (siehe auch unten) oder auf ein traditionelles Frontend.

Mit einer PWA-Lösung sind sind Sie im Shop-Bereich „Early Adopter“. Das kann zukünftig einen Vorsprung an Technologie und Erfahrung bedeuten, aktuell aber auch Mehrkosten. Das traditionelle Frontend lässt sich inzwischen etwas flotter implementieren, da die Dienstleister inzwischen einige Jahre Erfahrung sammeln konnten. Zugleich kann es sein, dass Sie ab 2021/2022 Pläne beginnen müssen, auf ein neues Frontend umzustellen (außer es gibt dann die Möglichkeit, ein „veraltetes“ Frontend betreiben).

Alternativen zu Magento PWA Studio

Neben der offiziellen Implementierung von Magento, „PWA Studio“, gibt es einige weitere PWA- bzw. Headless-Lösungen, die mit Magento 2 kompatibel sind.

Dazu zählen:

Im Web gibt es ein sehr informatives Google Docs Sheet, das die Eckdaten dieser Systeme gegenüberstellt.