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, mit denen man Web-Applikationen mit einem ähnlichen Look & Feel wie eine native Desktop-/Mobile-App bauen kann. Es handelt sich um eine Mischung von Features in HTML, JS, CSS und Browser-APIs, die je nach Bedarf eines Online-Angebot eingesetzt werden können. Die Browser der UserInnen müssen diese Features unterstützen. Das tun nicht alle Browser. In solchen Fällen muss man Fallbacks einbauen oder damit leben, dass manche BenutzerInnen eine schlechtere User Experience haben.

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.4.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).

Zwei Jahre später, im Juli 2020, hat sich die Situation noch nicht grundlegend geändert. Magento 2.4.0 ist erschienen, aber noch ist PWA Studio nicht feature-complete.

Willem Wigman fragte deswegen auf Twitter:

Is there a rough timeline how long Luma will be supported as soon as PWA is ‘done’ later this year?

And/or, what does deprecation exactly mean at that point?
Will frontend be isolated and then marked deprecated? At what point would code be removed, and what parts?

Willem Wigman auf Twitter

Die Antwort von Eric Erway, zu dem Zeitpunkt Product Management für Magento Commerce:

We are not planning to deprecate Luma until PWA is complete and the ecosystem is ready. Part of our mission is to make that decision easier for everyone when Venia becomes the preferred choice.

Eric Erway auf Twitter

Für HändlerInnen und IntegratorInnen im August 2020 bedeutet das: wenn Sie jetzt einen neuen Shop bauen, entscheiden Sie sich aufgrund des verfügbaren Budgets, der geplanten Features 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 in etlichen Jahren 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.