Unsere Webseite enthält Cookies. Informationen ansehen

 

Deny Allow
News

Welche PWA-Lösungen gibt es für E-Commerce?


Aleksandra Kwiecien's picture

Progressive-Web-Apps florieren und Online-Shops nutzen sie, um ihre Performance, die DaUX sowie die Konversionsraten zu verbessern. Zum Glück müssen sie nicht mehr von Grund auf neu entwickelt werden. Es gibt verschiedene gebrauchsfertige Lösungen. Wir wollen sie miteinander vergleichen!

Warum sollte sich der E-Commerce für Progressive-Web-Apps interessieren?

Progressive-Web-Apps, wie wir sie heute kennen, tauchten 2015 zum ersten Mal auf der Technologie-Bühne auf. Zunächst wurde die PWA-Technologie von Teams implementiert, die an maßgeschneiderten Lösungen arbeiteten. Auf diese Weise haben die ersten Anbieter sozialer Medien, unter anderem Twitter und Pinterest, begonnen, ihren Nutzern eine ultraschnelle Benutzererfahrung zu bieten, die auf der Progressive-Web-App-Technologie basiert. Sehr bald folgten E-Commerce-Akteure, und Unternehmen wie Trivago oder AliExpress verkürzten ihre Ladezeiten auf unter eine Sekunde und verdoppelten ihre Konversionsraten sowie die Nutzerinteraktion. 

Im Bericht über die Top 30 PWA heißt es: „Trivago konnte bei den Personen, die die PWA zu ihrem Homescreen hinzugefügt haben, einen Anstieg der Installationen um 150% verzeichnen. Die verstärkte Interaktion führte zu einer Zunahme der Click-out-Angebote um 97%. Benutzer, die während des Surfens offline sind, können weiterhin auf die Webseite zugreifen, und 67% verwenden die Webseite weiterhin, wenn sie wieder online sind.“

Ein weiterer Meilenstein waren Änderungen in der Google-Suchpolitik (siehe Mobile First Index, der 2018 angekündigt wurde) und die Einführung von PWA-Lösungen in Microsoft- und Apple-Betriebssystemen. Danach entschieden sich mehr Unternehmen für die Mobile-First-Technologie und wandten sich der PWA-Technologie zu.

Die Reife von PWA-Lösungen

Sie können noch immer Ihre eigene PWA von Grund auf neu enzwickeln. Da diese Technologie jedoch immer beliebter wird, können Unternehmen Zeitaufwand und Kosten für die Implementierung durch den Einsatz gebrauchsfertiger Lösungen reduzieren.

In eine der verfügbaren Lösungen zu investieren kann mindestens 75% günstiger sein als die eigenständige PWA-Entwicklung und hat eine Markteinführungszeit von nur 2-3 Monaten. Wir schätzen, dass mit einer vorhandenen PWA-Lösung nach 4 bis 9 Monaten ein positiver ROI erzielt werden kann.

Die Zeit seit dem ersten Erscheinen der PWA-Technologie ist nicht allzu lang. Kritiker könnten sagen, dass es zu kurz ist, um eine ausgereifte und bewährte Lösung auf dem Markt anzubieten. Und bis zu einem gewissen Punkt haben sie sogar recht. Obwohl es mehrere bewährte Lösungen für Webshops gibt, hatten wir nicht genügend Zeit, um deren Performance auf lange Sicht zu beurteilen.

Andererseits gibt es andere Aspekte dieser brandneuen Lösungen, die einen guten Eindruck ihrer Marktreife vermitteln – dazu gehören grundlegende Frameworks, Technologie-Stack, Architektur und Community.

Wir haben uns entschlossen, diese Faktoren für verschiedene E-Commerce-PWA-Lösungen zu vergleichen.

Welche PWA-Lösungen gibt es?

 

Betrachtet man nur den Bereich E-Commerce, so gibt es einige erwähnenswerte Lösungen. Diese sind unter anderem (in alphabetischer Reihenfolge):

  • Angular Storefront – herausgegeben von Flagbit, 2018. Das ist die jüngste der vorgestellten Lösungen und wartet noch auf ihre Premiere.
  • Deity Falcon – das ist eine PWA-Lösung für alle Arten von Online-Seiten – Webshops, Blogs und größere Plattformen. Die Lösung wurde 2017 vom niederländischen Startup Deity herausgegeben. https://falcon.deity.io

  • Front-Commerce – eine gebrauchsfertige Storefront-Lösung, die von einer französischen Agentur entwickelt wurde. Zuerst für Magento 2 entwickelt und jetzt kompatibel mit Magento 1. https://www.front-commerce.com/

  • PWA Studio – mehr ein Tool-Set als eine gebrauchsfertige Lösung. Erwähnenswert ist jedoch, dass es von der E-Commerce-Plattform Magento entwickelt wurde. Die Lösung befindet sich in der Alpha-Phase. https://github.com/magento-research/pwa-studio

  • Scandiweb PWA – die von der Agentur Scandiweb im Jahr 2018 entwickelte Lösung bietet eine PWA für Magento-basierte Shops. https://scandipwa.com/

  • Spartacus – das Projekt ist der SAP Commerce Cloud gewidmet und kann von jedem Unternehmen innerhalb der Plattform kostenlos verwendet werden. https://github.com/SAP/cloud-commerce-spartacus-storefront

  • Vue Storefront – eine PWA-Lösung für mehrere E-Commerce-Plattformen, die von der Entwickler-Community nachdrücklich unterstützt wird. https://www.vuestorefront.io/de/

Erwähnenswert ist, dass die meisten der oben vorgestellten PWA-Lösungen von E-Commerce-Agenturen herausgegeben wurden, die das große Potenzial von Progressive-Web-Apps für Online-Verkäufer erkannt haben. Sie waren die ersten, die spezielle Lösungen entwickelten.

Schon bald traten die Eigentümer der wichtigsten E-Commerce-Plattformen in ihre Fußstapfen. Daher sind PWA Studio von Magento und Spartacus von SAP Commerce Cloud Beispiele für Tools, die von E-Commerce-Plattformen entwickelt und exakt auf deren Besonderheiten abgestimmt wurden.

Wie vergleicht man PWA-Lösungen?

Wie bereits erwähnt, sind PWA-Lösungen auf dem Markt noch recht neu. Das bedeutet aber nicht, dass man sie nicht gegenüberstellen und vergleichen kann.

„Vergleichen Sie Software nicht nur nach Alter oder Anbieter, sondern auch nach Funktionsumfang, Code-Klarheit und vor allem danach, ob es  die Anforderungen der Nutzer erfüllt. Berücksichtigen Sie alles.“ – Bjorn Meyer, Developer bei Flagbit GmbH & Co. KG

Technologie & Integrationen

Da PWA-Lösungen noch in den Kinderschuhen stecken, müssen Developer sie häufig nach „Art der alten Schule“ entwickeln. Diese basiert auf dem Problemlösungs- und Lösungsfindungsmuster. Was hier sehr hilfreich sein kann, ist eine Technologie, mit der sie bereits vertraut sind oder die eine niedrige Einstiegshürde aufweist.

React, Angular und Vue.js, die „heilige Dreifaltigkeit“ der JavaScript-Frameworks, werden in allen oben genannten PWA-Lösungen verwendet. Obwohl derzeit diskutiert wird, welches JS-Framework das beste ist, wird Vue.js als das einfachste und bequemste angesehen.

Ein weiterer Aspekt, der untersucht werden sollte, ist die Anzahl der Integrationen mit E-Commerce-Plattformen und externen Lösungen. Je mehr zusätzliche Modullösungen sofort einsatzbereit sind, desto schneller wird der PWA-Implementierungsprozess.

 

Angular
Storefront
Deity
Falcon
Front
Commerce
PWA
Studio
Scandiweb
PWA
Spartacus
SAP
Vue
Storefront

Frontend-Basis

Angular React React React React Angular Vue.js

Version

N/A 1.0.0 1.0.0 2.1.0 1.4.1 1.0 1.9

Headless-Architektur

Yes Yes Yes Yes Yes Yes Yes

Integrierte Backends (E-Commerce-Plattformen)

Magento 2 Magento 2, Wordpress Magento 1, Magento 2, Wordpress Magento 2 Magento 2 SAP Commerce Cloud Magento 1, Magento 2, Shopware, Pimcore, CoreShop, Wordpress, EpiServer, SpreeCommerce, Odoo ERP, BigCommerce, boilerplate

Enthaltene Technologien

 

Node.js, Lizards & Pumpkins Node.js, GraphQL, React, Apollo, KOA, Webpack, Jest Node.js, Storybook, PACT, Jest webpack, React, Redux, GraphQL Redux, Webpack, React, GraphQL, ScSS Angular, Node.js, yarn, TypeScript, RxJS, NgRx, SASS, Bootstrap Vue.js, Node.js, ElasticSearch, Webpack, GraphQL
Zahlungen Paypal (Braintree), Klarna, Payone, Sofort Paypal, Adyen (in progress) Paypal, Stripe, LYRA/Payzen, Ogone Paypal (Braintree) partial support n/d Paypal, Strupe, Klarna, Mollie, Adyen

Wenn Sie nach einem noch detaillierteren technischen Vergleich mit Middleware, serverseitigem Rendering und Testtools suchen, gibt es eine hervorragende Zusammenfassung von Bjoern Meyer.

Community

Ein weiterer Aspekt, der einen guten Maßstab für den Status der aufstrebenden Lösungen darstellt, ist die Community. Je mehr Menschen eine bestimmte Lösung unterstützen, desto lebendiger und engagierter ist die Community. Nehmen Sie Kontakt zu ihnen auf, stellen Sie Fragen und sprechen Sie über Ihre Anliegen.

Sehr wahrscheinlich sind Sie nicht der erste und Sie werden dort viele Antworten finden. Oh, und vielleicht stoßen Sie auf laufende Projekte, die Ihnen wertvolle Einblicke für Ihr eigenes Projekt bieten können.

  Angular
Storefront
Deity
Falcon
Front
Commerce
PWA
Studio
Scandiweb
PWA
Spartacus
SAP
Vue
Storefront

Community-Status

Klein Klein Ausgewählte Partner Stark Klein Angular Stark

Github-Stern

- 313 - 420 35 192 4903

Mitwirkende

8 17 - 74 5 38 142

Akzeptierte Pull-Anfragen

- 242 - 572 16 1.115 1627

Anzahl der Forks auf Github

- 47 - 217 14 85 946

Github-Repositor

n/a link n/a link link link link


Implementierungen

Das Problem mit Lösung in einem frühen Stadium ist, dass man in den meisten Fällen keine Fallstudien oder Live-Shops finden. Manchmal gibt es nicht einmal eine serienreife Version. Suchen Sie in diesem Fall immer nach einer Demoversion und führen Sie Tests damit durch.

  Angular
Storefront
Deity
Falcon
Front
Commerce
PWA
Studio
Scandiweb
PWA
Spartacus
SAP
Vue
Storefront
Projekte live (1) 2 4 (2) (1) 0 15+
Demo n/a demo demo demo demo n/a demo
Case studies (Beispiele) n/a n/a n/a n/a n/a n/a

DW Shop
La Nature
Malianta

Live0Projekte (Beispiele) n/a n/a

Chaine Thermale

Compagnie Des SPAs

n/a n/a n/a

Klebefieber

Meubel Plaats

Kentaur

Es kann auch vorkommen, dass Fallstudien noch nicht veröffentlicht wurden. Es lohnt sich also immer, nachzufragen.

Welche PWA-Lösung ist die beste?

Es hängt davon ab. Jede der vorgestellten PWA-Lösungen hat das Potenzial, Online-Shops zu verbessern und alle Vorteile einer Progressive-Web-App zu bieten. Ihre Wahl sollte die Besonderheiten Ihres Unternehmens und das Team berücksichtigen, das hinter dem Implementierungsprozess steht. Für welches Sie sich auch entscheiden, es kann sein, dass Sie das Gefühl überfällt, gerade Teil eines großartigen Projekts geworden zu sein und ein PWA-Pionier zu werden.

Unabhängig von der gewählten Lösung ist eines sicher: Frühzeitige Anwender von PWAs haben eine große Chance, Mobile-Nutzer für sich zu gewinnen und eine signifikante Lücke zwischen sich und ihren Konkurrenten zu schließen.