Progressive Web Apps (PWA) - der neue Standard des modernen Web-Erlebnisses

Progressive Web Apps (PWA) - der neue Standard des modernen Web-Erlebnisses
Nina Stocklöw
February 13, 2018
Progressive Web Apps (PWA) - der neue Standard des modernen Web-Erlebnisses

Progressive Web Apps - ein Begriff, der aktuell in aller Munde ist und die mobile User Experience im anstehenden Jahr revolutionieren könnte. Kein Wunder also, dass auch Magento seine Bemühungen dahingehend ausgeweitet hat. Wie bereits auf der Magento Live UK 2017 in London angekündigt, entwickelt der Shopsoftware-Anbieter in enger Zusammenarbeit mit Google PWAs für Magento-Händler.

Doch was genau bedeutet der Begriff PWAs eigentlich?

Grundsätzlich lassen sich PWAs als mobil nutzbare Webangebote beschreiben, die progressiv geladen, in einem Webbrowser ausgeführt werden und den Charakteristika einer nativen App gleichkommen. PWAs kombinieren also die positiven Eigenschaften von Webseite und mobiler Anwendung, um dem Nutzer am Ende eine bestmögliche mobile User Experience anzubieten.

Progressive Web Apps vs. Responsive Web Design Sites

Und worin liegt nun der Unterschied zwischen PWAs und Responsive Web Design (RWD) Seiten, die das mobile Web derzeit dominieren? Die zusätzlichen Möglichkeiten der PWAs ergeben sich aus zahlreichen neuen Programmierschnittstellen (APIs), den sogenannten "Service Workers", die den Webbrowsern kürzlich hinzugefügt wurden. Mit diesen Service Workers gelingt es, dass JavaScript im Hintergrund der Progressiven Web App ausgeführt wird und wichtige Features wie beispielsweise das vorausschauende Laden von Inhalten, das Senden von Push-Notifications und das Synchronisieren und Empfangen von Daten ermöglicht.

Die Vorzüge von Progressive Web Apps für den E-Commerce

Für Sie als Online-Händler bringen PWAs etliche Vorteile mit sich:

  • Schnelleres Browsing
  • Kein Download über einen zentralen AppStore notwendig
  • Senden von Push-Benachrichtigungen
  • Möglichkeit der Offline-Nutzung
  • Speichern der App auf dem Home-Bildschirm für engere Kundenbindung

Mit PWAs können Sie Kunden eine schnellere und anwendungsbezogene Experience, einen nahtlosen Checkout-Prozess und mehr Engagement durch Opt-in-Push-Benachrichtigungen ermöglichen. Das wiederum führt zu mehr Traffic, höheren Conversion Rates und folglich auch zu mehr Umsatz! Und auch budgettechnisch punkten PWAs auf ganzer Linie: Denn die Gesamtbetriebskosten fallen im Vergleich zur Entwicklung von separaten mobilen Websites oder nativen Apps deutlich geringer aus.

Wenn es um eine deckende Browser- und Desktop-Unterstützung oder das SEO-Ranking geht, kommen vermeintliche Schwachstellen ans Tageslicht. Doch auch an dieser Stelle können PWAs trumpfen. So können alle relevanten Suchmaschinen das JavaScript einer PWA-Site crawlen - so wie das auch bei einer herkömmlichen Responsive Website der Fall ist. Entscheidend ist an dieser Stelle der Einsatz bewährter SEO Best Practices wie beispielsweise die Pflege einer crawlbaren Sitemap. PWAs sind außerdem nicht ausschließlich für das mobile Web geeignet. Vielmehr unterstützen auch Desktop-Browser die Service Workers. Ein wichtiger Punkt, da PWAs immer unter dem Aspekt der Responsiveness entwickelt werden müssen, um verschiedene Bildschirmgrößen auf den unterschiedlichen Devices unterstützen zu können.

PWA-Roadmap von Magento

+++Update, 26.04.2018+++

Magento ist der festen Überzeugung, dass PWAs die Zukunft des Internets sind und künftig sinnbildlich für eine gute Webseite stehen werden - so, wie es das Responsive Web Design seinerzeit vorgemacht hat. CEO Mark Lavelle unterstreicht dies mit der Aussage, dass „Progressive Web Apps die nächste natürliche Entwicklungsstufe des mobilen Internets sind.“ Und genau aus diesem Grund arbeitet Magento eng zusammen mit Google und der Developer Community am sogenannten Magento PWA Studio, einer Suite von Tools zum Aufbau von Online-Stores als Progressive Web-Anwendung. Mit diesen Tools sollen Developer PWA-Techniken erlernen, PWA-Frontends konzipieren und PWA-Komponenten und -Erweiterungen für die Nutzung oder den Verkauf auf dem Magento Marketplace im Handumdrehen erstellen können.

Magento hat bewusst auf Google als starken Partner gesetzt. Das Unternehmen ist auf diesem Gebiet Vorreiter und treibt die technologische Entwicklung von PWAs schon seit Jahren immens voran. Schon mit der Einführung des sogenannten Material Designs, welches das User Interface von Webseiten und den Nativen Apps vereinheitlichen soll, hat Google 2014 gezeigt, dass die Grenze zwischen Web und nativer App in Zukunft verschwimmen wird. Der Chrome Browser wurde in den vergangenen Jahren in Bezug auf Progressiv Web Apps stetig optimiert. So können die genannten Vorteile inzwischen auf allen Android Geräten in Anspruch genommen werden, die über eine aktuelle Browserversion verfügen. In naher Zukunft werden PWAs dann auch auf iOS-Geräten funktionieren. Denn auch Apple unterstützt die Service Workers auf der Safari-basierten Webkit Engine ab iOS Version 11.3. Mit PWA-relevanten Technologien wie REST APIs und GraphQL unternimmt Magento große Bemühungen, die Trennung von Backend und Frontend weiter voranzutreiben, sodass sich Frontends noch schneller und einfacher entwickeln lassen. Dadurch schließt Magento eine Lücke, in der sich Wettstreiter wie Spryker oder CommerceTools in den letzten Jahren hervorgetan hatten.

Die hohe Relevanz von Progressive Web Apps wird zudem von zahlreich stattfindenden Konferenzen und Events zum Thema sowie der enormen Beteiligung seitens der Entwicklergemeinschaft unterstrichen. So kamen beispielsweise auf der Reacticon Konferenz in Holland dieses Jahr Innovationstreiber und Entwickler zusammen, um über die verschiedenen Ansätze von PWA und Magento zu diskutieren. Unter anderem wurde beleuchtet, was getan werden kann, um die Leistung bestehender Magento 2 Shops zu optimieren, indem moderne Frontendtechniken in Koexistenz mit dem bestehenden Layout-System verwendet werden.

Auf der vom 23. – 25. April stattgefundenen Magento IMAGINE wurde das Magento PWA Studio nun offiziell dem E-Commerce Publikum vorgestellt und auch die Roadmap weiter konkretisiert. Mit dem Studio werden folgende Core Features geliefert:

  • Tools, um Inhalte zu personalisieren und lokale Präferenzen hinzuzufügen
  • Erstellung und Verwaltung aller Kanäle über eine zentrale Codebasis
  • Intuitive User Experience mit einem innovativen Commerce und CMS-Theming
  • Modularisierte Komponentenarchitektur
  • Spezielle Entwicklungstools für schnelles Prototyping, hilfreiches Debugging, relevantes Feedback und erhöhte Produktivität

Das Magento PWA Studio soll über ein „Early Adopter Program“ bereits in diesem Sommer verfügbar sein.

Und wie sieht es bei Ihnen aus? Stehen PWAs auch schon auf Ihrer Magento-Roadmap für 2018/2019?

Bei Fragen rund um Progressive Web Apps und das Magento PWA Studio können Sie sich jederzeit gerne mit uns in Verbindung setzen. Kontaktieren Sie uns einfach per E-Mail an info@phoenix-media.eu oder telefonisch unter 0711/1289500.