Progessive Web Apps mit Magento 2 - Das neue Magento PWA Studio im Überblick

Erst kürzlich veröffentlichte Magento mit der Version 2.3 ein umfangreiches Feature-Release. Das Magento Progressive Web App Studio ist dabei eine der wichtigsten Neuerungen. Alles was Sie dazu wissen müssen, erfahren Sie in unserem Blog-Artikel.

Was ist eine Progressive Web App?

Eine Progressive Web App (PWA) ist eine Webanwendung, die moderne Webtechnologien und Entwurfsmuster verwendet, um eine zuverlässige, hochperformante und ansprechende User Experience zu bieten.

Was sind die grundlegenden Eigenschaften einer PWA?

  • Schnell - PWA-Sites verwenden verschiedene Strategien zur Performance-Optimierung, um ein hervoragendes Frontend-Erlebnis zu bieten und Inhalte blitzschnell zu laden, selbst in langsamen mobilen Netzwerken.
  • Sicher - PWA-Sites verwenden HTTPS-Verbindungen für erhöhte Sicherheit.
  • Responsive - PWA-Sites implementieren Responsive-Design-Strategien, um eine konsistente Benutzererfahrung auf Desktops, Tablets und mobilen Geräten zu gewährleisten.
  • Browser-kompatibel - PWA-Sites funktionieren gleichermaßen mit allen modernen Browsern wie Chrome, Edge, Firefox und Safari.
  • Offline-Modus - PWA-Sites speichern Inhalte zwischen, um sicherzustellen, dass bestimmte Inhalte bereitgestellt werden können, wenn ein Benutzer offline ist.
  • Mobile „Installation" - Mobile Benutzer können ihren Startbildschirmen PWA-Sites hinzufügen und sogar Push-Benachrichtigungen von der Site erhalten. Eine Installation per App-Store ist nicht notwendig!
  • Sharable Content - Jede Seite einer PWA-Site hat eine eindeutige URL, die mit anderen Apps oder sozialen Medien geteilt werden kann.

 

    • Mehr zum Thema Progressive Web App erfahren Sie hier.

 

Was steckt hinter dem Magento PWA Studio Projekt?

Das Magento PWA Studio Projekt besteht aus einer Reihe von Entwicklertools, die die Umsetzung, Bereitstellung und Wartung eines PWA-Storefronts auf Magento 2 ermöglichen. Es verwendet moderne Tools und Bibliotheken, um ein Build-System und ein Framework zu erstellen, das dem Magento-Prinzip der flexiblen Erweiterbarkeit entspricht. Das Magento PWA Studio steht seit dem Release der Version Magento 2.3 zur Verfügung und kann sowohl in der kostenfreien Open Source Version, als auch in Magento Commerce genutzt werden.

Das Magento PWA Studio-Projekt bietet die folgenden Tools:

  • pwa-buildpack - Enthält die wichtigsten Build- und Entwicklungstools für eine Magento-PWA
  • peregrine - Enthält eine Sammlung von UI-Komponenten für eine Magento-PWA
  • Venia Storefront - Ein Proof of Concept Magento 2 Theme, das mit den PWA Studio-Tools erstellt wurde

 

Das Venia Storefront im Überblick

Das mit dem Magento PWA Studio ausgelieferte PWA Theme wurde unter Berücksichtigung aktuellster Usability-Prinzipien als Proof of Concept erstellt. Ein modularer Pattern Lab Ansatz, eine Art Online Style Guide mit allen wiederkehrenden Basis UI-Komponenten, sorgt für eine effiziente und flexible Erweiterbarkeit. Außerdem bringt das Magento Venia Storefront zahlreiche Frontend-Widgets mit, die sich auf unterschiedlichen Seitentypen, wie der Startseite, Kategorieseiten oder CMS Seiten nutzen lassen. Dazu zählen unter anderem Kategorie-Teaser, Produkt-Karussells und verschiedene Banner-Widgets.

Magento PWA Venia Storefront

Der Globale Style Guide, sowie die zur Verfügung stehenden Frontend-Komponenten können in der Magento Online Dokumentation eingesehen werden. Außerdem lässt sich das Venia Theme in einem interaktiver Click-Dummy erkunden.