Progressive Web Apps (PWA) im E-Commerce mit Magento

Bereits seit einger Zeit ist viel von Progressive Web Apps (PWA) zu hören und zu lesen. Von mancher Seite heißt es, schon bald werde das mittlerweile seit Jahren fest etablierte Responsive Webdesign (RWD) durch Progressive Web Apps als aktueller Standard abgelöst. Zu den einflussreichen Wortführern in der Debatte zählt nicht zuletzt Magento. Aber worum genau geht es? Was bedeutet das alles für den E-Commerce? Wo liegen die Vor- und Nachteile und für wen ist die neue Technologie interessant? Wir liefern einen konzentrierten Überblick zu diesem wichtigen Thema.

Was genau sind Progressive Web Apps?

Progressive Web Apps sind aus HTML/CSS und JavaScript bestehende Websites – und insofern auf den ersten Blick nichts Besonderes. Sie werden wie üblich im Browser aufgerufen und funktionieren prinzipiell auf Endgeräten jeder Größenordnung. Auch das ist im Zeichen des Responsive Webdesign nichts Neues. Progressive Web Apps aber sind durch eine Reihe von technischen Kniffen und Besonderheiten gerade im mobilen Bereich deutlich performanter und daher flüssiger bedienbar als herkömmliche Websites. Aus diesem Grund werden sie oftmals in die Nähe nativer Apps gerückt, von denen sie sich technisch gesehen aber grundlegend unterscheiden. Progressive Web Apps müssen (und können) nicht auf dem Gerät installiert werden, weshalb sie auch nicht in App-Stores auftauchen und niemals eine lange Liste von Berechtigungen für undurchsichtige Aktivitäten im Hintergrund verlangen.

Trotzdem ermöglicht eine PWA drei sehr praktische Funktionen, die bislang nur von klassischen Apps bekannt sind: Eine als Progressive Web App umgesetzte Website (beziehungsweise ein Onlineshop) lässt sich erstens als Icon zum Home-Screen hinzufügen, kann zweitens in Form von Push-Nachrichten mit dem Nutzer interagieren und ist drittens sogar in der Lage, Offline-Funktionalitäten zur Verfügung zu stellen. Wer sich einen Eindruck davon verschaffen möchte, wie das Look-and-feel einer PWA auf unterschiedlichen Geräten ausfällt, findet etwa hier eine Reihe von aktuellen Beispielen.

Wo liegen die Stärken von Progressive Web Apps im E-Commerce?

Wenn beschrieben wird, inwiefern sich Progressive Web Apps von nativen Apps und gewöhnlichen Websites beziehungsweise Shopoberflächen unterscheiden, fallen die Aufzählungen der jeweiligen Ähnlichkeiten und Unterschiede sowie Vor- und Nachteile oftmals etwas verwirrend aus. Daher trennen wir die beiden Ebenen des Vergleichs mit bereits etablierten Technologien voneinander.

PWA vs. native App

Im Vergleich zu nativen Apps sind Progressive Web Apps haushoch überlegen. Für Nutzer fällt die Hürde der Installation weg – und trotzdem können Push-Nachrichten genutzt werden. Während die browserbasierte Nutzererfahrung in einer PWA in Sachen Performance und Usability der einer klassischen App sehr nahe kommt, haben die Apps neuer Art noch einen weiteren ganz entscheidenden Vorteil: Da es sich bei einer PWA – wie bereits erwähnt – technisch gesehen um eine Website handelt, können ihre einzelnen Seiten ganz normal von Suchmaschinen indexiert werden, ranken in den Suchergebnissen und ermöglichen bei Bedarf intensive Suchmaschinenoptimierung. All das ist in nativen Apps unmöglich, was nicht zuletzt für die Betreiber für Onlineshops ein ausgesprochen wichtiger Punkt ist.

PWA vs. gewöhnliches Shop-Frontend

Im Vergleich zu gewöhnlichen Shop-Frontends lässt sich eine einfache Formel festhalten: Mit Progressive Web Apps kann der Mobile-First-Ansatz nun endlich konsequent umgesetzt werden. Denn während responsive Templates und Themes für Onlineshops zumeist noch immer klar erkennbar auch und nicht zuletzt für Desktop-Geräte optimiert sind, richtet sich eine PWA eindeutig in erster Linie an mobile Nutzer. Unter der Haube einer PWA laufen komplex ineinandergreifende Technologien, die – zumeist JavaScript-basiert – dafür sorgen, dass das Frontend nicht nur auf allen Mobilgeräten gut aussieht und intuitiv bedienbar ist, sondern dabei auch extrem schnell geladen wird und daher auch bei schwacher Internetverbindung (zum Beispiel in weiten Teilen Deutschlands) flüssige Navigation durch Websites und Shops ermöglicht. Sogar Offline-Funktionalitäten sind durch intelligentes Caching auf dem Gerät möglich, so dass Nutzer sich auch in Funklöchern ungestört weiter informieren und einkaufen können. Google mag, fördert und fordert Websites und Shops, die in jeder Lebenslage schnell und einfach zu bedienen sind. Daher werden auch Usability und Performance auf Mobilgeräten ein immer wichtigerer Faktor für die Google-Rankings. Vor diesem Hintergrund dürfte eine Progressive Web App der Königsweg in Richtung einer ganzheitlichen und ambitionierten SEO-Strategie sein.

Das neue PWA Studio in Magento

Google ist die ganz große treibende Kraft hinter der PWA-Technologie. Der Internetgigant ist federführend an der Entwicklung entsprechender Tools und Frameworks beteiligt und hat bereits vor mehreren Jahren begonnen, der Online-Szene Progressive Web-Apps schmackhaft zu machen.

Magento, Hersteller des weltweit am weitesten verbreiteten Shopsystems, hat in enger Zusammenarbeit mit Google ein ambitioniertes Projekt auf die Beine gestellt, um seinen Nutzern komfortable Möglichkeiten für die Entwicklung eigener Progressive Web Apps bereitzustellen. Mit dem Release von Magento 2.3 ist es nun so weit: Das Magento PWA Studio ist verfügbar und hat zum Einstand gleich einen eigenen Blog-Beitrag bekommen. Inhaltlich widmet Peter Sheldon, Senior Director in den Bereichen Strategie und Digital Experience bei Magento, sich darin allerdings weniger um die technische Seite des PWA Studios, sondern legt noch einmal dar, worin Magentos Beweggründe für das starke Engagement in Richtung Progressive Web Apps im E-Commerce bestehen. Im Rückgriff auf eine Studie, die unter dem Dach von Magentos neuer Konzernmutter Adobe angefertigt wurde, moniert Sheldon, dass über mobile Endgeräte zwar mehr als die Hälfte des Traffics, dabei aber weniger als ein Drittel der Umsätze laufen. Nach einem kurzen Überblick zum Thema PWA kommt er abschließend zur Einschätzung, die Technologie berge neben großem Potenzial für die Mobilisierung von Kunden und höheren Konversionsraten auch hervorragende Möglichkeiten, um Entwicklungskosten zu senken. Das klingt sehr gut, dürfte sich beim Blick auf die Kosten allerdings auf den Vergleich mit herkömmlichen mobilen Apps beziehen. Im Vergleich zu einem klassischen Shop-Frontend wird eine PWA-Lösung vorerst der aufwendigere und damit teurere Weg sein.

Wo liegen mögliche Schwächen der PWA-Technologie?

In technischer Hinsicht sind Progressive Web Apps ohne Zweifel ausgesprochen leistungsfähig und passen sehr genau zu den aktuellen Entwicklungen im mobilen Internet im Allgemeinen und im Mobile Commerce im Besonderen. Potenziell problematisch ist an dieser ambitionierten Technologie, dass sie für die Entwicklung völlig neue und recht hohe Anforderungen stellt. Nachdem erst vor wenigen Jahren die Schockwelle des Responsive Webdesign durch die Web-Entwicklung gerollt ist und kein Layout-Element auf dem anderen gelassen hat, wird nun bereits die nächste technische Revolution der Web-Oberflächen ausgerufen. Aber eines muss dabei allen klar sein: Diesmal wird es mit Media Queries, zusätzlichem CSS und etwas JavaScript nicht getan sein.

Für Entwickler ist das Kürzel PWA mit einer ganzen Reihe neuer Herausforderungen verbunden. Allein eine kurze Aufzählung der für das Magento PWA Studio zentralen Tools verdeutlicht diesen Umstand. Denn hier übernimmt ReactJS das Rendering und Event-Handling, während Redux für das State-Management zuständig ist, Apollo sich um die effiziente API-Interaktion kümmert, Jest und Storybook das Component-Testing bestreiten, Webpack für optimierte Builds sorgt und Google Workbox für Benachrichtigungen sowie Offline-Funktionalitäten verantwortlich ist. Zudem wurde mit der neuen GraphQL API eine zusätzliche Schnittstelle eingeführt. Zwar hält Magento umfangreiches Material zur Dokumentation des PWA Studios bereit, und auch Google geizt nicht mit hilfreichen Angeboten zur Einführung in die PWA Welt für interessierte Entwickler. Aber bis die Community sich dieser komplexen Materie bemächtigt hat, sie beherrscht und mit vereinten Kräften weiterentwickelt, so dass mit immer geringeren Aufwänden immer bessere Lösungen realisiert werden können, wird es noch dauern. Bis dahin wird die Entwicklung von maßgeschneiderten PWA-Projekten für Händler noch recht kostspielig ausfallen.

Für wen lohnt sich die Entwicklung einer PWA mit Magento?

Längst sind die ersten Händler auf den anfahrenden Zug aufgesprungen und haben sich Shops auf der Grundlage von modernen PWA-Lösungen entwickeln lassen. Aber dabei handelt es sich vornehmlich um die ganz Großen im Enterprise-Bereich. Und auch in der näheren Zukunft wird es dabei bleiben, dass mittelgroße und kleinere Shops vorerst nicht auf Progressive Web Apps umsatteln. Allmählich wird sich das jedoch ändern. Und gerade Händler, die besonderen Wert auf maximale Performance ihres Shops auf mobilen Endgeräten legen, werden eher früher als später ohnehin diesen Weg gehen. Es lohnt sich also allemal, sich schon jetzt intensiv mit diesem Thema zu beschäftigen.