Einkaufserlebnisse mit PWA Studio und Adobe Commerce schaffen

Wenn es so einfach ist, warum nutzen dann so wenige die Möglichkeiten von Progressive Web Apps? Was ist das überhaupt? Ein kurzer Überblick, warum PWAs unbedingt verwendet werden sollten.

PWA – Drei Buchstaben und doch so viel Bedeutung

Progressive Web App. Bis hier hin wissen wir, dass es sich um eine Art App handeln muss. Jedoch nicht im klassischen Sinn, wie wir sie aus dem App Store kennen. PWAs brauchen keine klassischen Updates und haben keine native Programmierung.

Progressive Web Apps sind hybride Anwendungen, die auf bestimmte Daten im Internet zugreifen. Ein Shop, oder eine klassische Webseite, kann damit zu einer plattformübergreifenden App umfunktioniert werden.

Das heißt, sie nutzen die Funktionalitäten nativer Apps, um Inhalte komfortabel und schnell in jedem beliebigen Netzwerk zu laden. Dadurch entsteht ein einheitliches Erlebnis auf Desktop, Tablet und Smartphone.

Starten müssen wir also dementsprechend mit einem webbasierten Angebot, einer Webseite oder einem Shop. Eine PWA bietet dem Nutzer die Möglichkeit, Webinhalte auf dem Startbildschirm als Icon zu hinterlegen und quasi ein App-Feeling zu genießen. Bei bestehender Internetverbindung wird auf die Livedaten zurückgegriffen, besteht keine, auf die lokal abgespeicherten Daten.

Was das Ganze bringen soll

In Zukunft wird es immer wichtiger werden, Käufern und Nutzern von überall aus „das perfekte Erlebnis“ zu bieten. PWAs sind die Lösung für eine neue Art und Weise, wie Nutzer ihre Mobilgeräte für schnelle, inspirierende und App-ähnliche Browsing-Erlebnisse nutzen werden.

Der Anspruch der Nutzer geht immer weiter in die Richtung, dass man nicht ständig an teilweise bugbehaftete Updates erinnert werden möchte, oder die App mit der aktuellen Version des Betriebssystems nicht zurechtkommt.

PWAs bringen den Vorteil, dass sich viele Ideen schnell und kostengünstig umsetzen lassen. Diese Art von App eignet sich bestens für Projekte, bei denen die Website auch offline nutzbar sein soll. Im Endeffekt kann man seiner Zielgruppe, egal ob interne Vertriebsmitarbeiter oder Endkunden, ein durchgängig positives Nutzergefühl vermitteln.

Und tastsächlich laufen viele unserer täglich genutzten Anwendungen und Shops bereits als PWA, wie etwa Spotify, Starbucks, Airbnb und Twitter.

Was ist der Unterschied zu responsive design?

Im Gegensatz zu einer responsive website können PWAs auch offline genutzt werden. Das verbessert die User Experience auch bei schlechtem Empfang ungemein. Außerdem laden PWAs nochmals deutlich schneller als mobil optimierte Webseiten.

Und warum nicht einfach eine App programmieren?

Es gibt diverse Gründe die dafür sprechen eine PWA zu erstellen, anstatt in die Programmierung einer App zu investieren. Zum einen werden keine individuellen Entwicklungskosten anfallen und auch Updates sind kein Problem. Immerhin können bei Problemen mit der App schnell Nutzer verloren gehen. Bis zu 90% der Nutzer haben eine App gelöscht, weil sie schlecht bedienbar war und nicht funktionierte. Bei Progressive Web Apps entfallen diese Posten. Denn die Erstellung findet über eine Art Page Builder statt. Ein weiterer großer Pluspunkt ist die geringe Speicherlast bei PWAs im Vergleich zu herkömmlichen Apps. PWAs profitieren dadurch von kürzeren Ladezeiten.

PWA Studio für Adobe Commerce

Mit PWA Studio in Adobe Commerce verändert sich das Mobilerlebnis wirklich nachhaltig. Das hilft Händlern zum Beispiel dabei, neue Kunden zu gewinnen. Es verbessert die Conversion Raten und Such-Rankings (SEO) und obendrein spart man Entwicklungskosten ein.

Das Adobe Commerce PWA Studio Projekt besteht aus einer Reihe von Entwicklertools. Diese ermöglichen die Umsetzung, Bereitstellung und Wartung eines PWA-Storefronts auf Adobe Commerce. Dabei werden moderne Tools und Bibliotheken verwendet, um ein Framework zu erstellen. Dies entspricht in weiten Teilen dem Adobe Prinzip der flexiblen Erweiterbarkeit.

Adobe Commerce PWA Studio steht seit Version 2.3 zur Verfügung. Es kann sowohl in der kostenfreien Open Source Variante als auch in Adobe Commerce genutzt werden. Neben den technischen Komponenten enthält es auch ein Demo-Theme namens Venia.

Damit können Adobe Commerce Shops mit einer Browseroberfläche versehen werden, die einige App-ähnliche Eigenschaften aufweist. Die Contentpflege ist dank des headless Ansatzes unabhängig vom backend jederzeit möglich. Die Umsetzung erfolgt problemlos mit Hilfe von Drag-and-Drop.

Warum also eine PWA erstellen?

Wie bei allem gilt, Probieren geht über Studieren. Und was kann es Besseres geben als seinen Mitbewerbern mehrere Schritte voraus zu sein und eine zukunftsweisende Technologie einzusetzen, die vor allem aus Verbrauchersicht präferiert wird.

Quellen:

Photo by Carl Heyerdahl on unsplash

Photo by Stephen Frank on unsplash

Über den Autor

Michael Rohrmüller ist ein erfahrener E-Business-Experte mit über 20 Jahren Erfahrung in der Branche. Als CEO und Gründer von PixelMechanics | The e-Business Enablers hat er zahlreichen Unternehmen dabei geholfen, sich in der digitalen Landschaft zu behaupten, wobei er sich auf E-Commerce und B2B-Lösungen spezialisiert hat. Mit Sitz in Nürnberg bietet er seinen Kunden weltweit strategische Beratung und fungiert als zuverlässiger Sparringspartner. Sein innovativer Ansatz und sein Engagement für den Erfolg machen ihn zu einer gefragten Autorität auf dem Gebiet des E-Business.