
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 | |
Live0Projekte (Beispiele) | n/a | n/a | n/a | n/a | n/a |
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.