PWA-E-Commerce-Entwicklung: Die Dos und Don'ts des Investierens

Haben Sie Schwierigkeiten, Ihre Kunden auf Mobilgeräten zum Konvertieren zu bewegen? Oder wünschen Sie sich vielleicht, dass Ihre Kunden Ihre Website wie eine App nutzen könnten? E-Commerce-PWA könnte die benötigte Lösung sein, die Ihnen hilft, die Lücke zwischen Web und Mobilgeräten zu schließen, den Umsatz anzukurbeln und die CX deutlich zu verbessern. 

Moderne PWAs ermöglichen es E-Commerce-Unternehmen, zeitgemäße Entwicklungsmethoden zu nutzen, indem sie die vorteilhaftesten Eigenschaften des herkömmlichen Webdesigns mit denen plattformspezifischer Anwendungen verbinden.

Inhaltsübersicht:
E-Commerce-PWA: Warum lohnt sich der Start?
Wie erstellt man eine gute E-Commerce-PWA?
PWA für E-Commerce: Mögliche Gefahren und Fallstricke
PWA-Funktionen
E-Commerce-Plattform-basierte PWA-Lösungen
Erfolgsgeschichten von E-Commerce-PWAs
Entwicklungskosten für E-Commerce-PWA

E-Commerce-PWA: Warum lohnt sich der Start? 

Da immer mehr Computeraufgaben über Webbrowser erledigt werden, ist die Grenze zwischen Online-Apps und Desktop-Programmen weniger klar. Und PWAs zielen darauf ab, diese Grenze weiter zu verwischen.

Grundsätzlich handelt es sich bei PWAs um eine spezielle Art von Web-App, die so erstellt werden kann, dass sie als eigenständige Desktop-Programme funktioniert. 

Das Starten einer PWA bedeutet nicht, dass all die schönen Dinge wie Skalierbarkeit und Durchsuchbarkeit standardmäßig automatisch zur Verfügung stehen. Sie sollten also sicherstellen, dass Ihr Entwicklungsteam dies richtig macht. Wenn Sie bereit sind, eine PWA zu starten, sollten Sie sich an den unten beschriebenen Kriterien orientieren.    

Was ist also das Besondere an PWA, an dessen Implementierung Entwickler so hart arbeiten müssen?

Wie erstellt man eine gute E-Commerce-PWA?

Schnelligkeit

Überragende Online-Leistung, die sich sowohl durch Geschwindigkeit als auch durch Qualität auszeichnet, fesselt und hält die Benutzereinbindung stärker aufrecht als mittelmäßige Leistung (stellen Sie sich das vor). Die Priorisierung benutzerzentrierter Kennzahlen sollte von größter Bedeutung sein, da Geschwindigkeit eine entscheidende Rolle bei der Förderung des Benutzerengagements spielt. Warum interessiert es? Natürlich führen die langsamen Seitenladezeiten zu einem Anstieg der Absprungraten um 123 %.   

Arbeiten Sie in jedem Browser

PWA muss in allen Webbrowsern funktionieren. Dadurch wird die Zugänglichkeit sichergestellt und UX verfeinert. Auf diese Weise beginnt der Entwicklungsprozess normalerweise mit HTML für die Grundfunktionalität, gefolgt von CSS und JavaScript für UX. HTML-Formulare können Daten mithilfe von POST-Anfragen übertragen, mit JavaScript zur Validierung und AJAX-Übermittlung. 

Jede Bildschirmgröße

Aufgrund ihrer Fähigkeit, sich an verschiedene Anzeigefenstergrößen anzupassen, ermöglichen PWAs Ihren Kunden, Inhalte nahtlos auf verschiedenen Geräten zu konsumieren, unabhängig vom verwendeten Gerät. Die Bedeutung liegt darin, dass Ihre Kunden möglicherweise die gleiche Anwendung auf Geräten mit unterschiedlichen Abmessungen nutzen. Der Inhalt sollte unabhängig von den Abmessungen des Ansichtsfensters konsistent bleiben, obwohl seine Anordnung möglicherweise geändert werden muss.

Kann installiert werden 

Wenn eine PWA auf einem Gerät installiert ist, zeigt sie ein vergleichbares Verhalten wie andere installierte Anwendungen, da sie in einem separaten Fenster geöffnet und im Task-Manager des Geräts angezeigt wird. Es wurde beobachtet, dass das Herunterladen einer Unternehmensanwendung als solche die Wahrscheinlichkeit ihrer Rückkehr erhöht, verglichen mit gelegentlichem Surfen. Dies umfasst eine Steigerung der Konversionsraten, der durchschnittlichen Sitzungsdauer und der Wiederholungsbesuche. 

Offline verfügbar

PWAs sollten so konzipiert sein, dass sie ohne Internetverbindung funktionieren. Ihre Kunden müssen Zugriff auf verschiedene Inhalte haben, z. B. Reiserouten, Bordkarten, Mediendateien, Social-Media-Beiträge und Nachrichtenartikel. Während die Offline-Authentifizierung für die Sicherheit von entscheidender Bedeutung ist, sind die Zugänglichkeit und Modifizierbarkeit von Inhalten für die Benutzerfreundlichkeit in Offline-Umgebungen von entscheidender Bedeutung. IndexedDB, eine NoSQL-Datenbank, kann Daten browserbasiert speichern und synchronisieren und unterstützt asynchrone Vorgänge. Servicemitarbeiter können Medienelemente in einem Cache speichern und so den Abruf auch bei ausgeschaltetem Internet ermöglichen. 

Durchsuchbar 

Da die Mehrheit der Besucher einer Website, nämlich mehr als 50 %, aus der organischen Suche stammen, kann die Auffindbarkeit Ihrer PWA erheblich verbessert werden. Die Einrichtung kanonischer URLs für Inhalte und die Indexierung von Websites durch Suchmaschinen sind entscheidend, um deren Auffindbarkeit zu verbessern. 

Jede Eingabe

PWA sollte verschiedene Eingabemethoden wie eine Maus oder einen Stift unterstützen und so reibungslose Übergänge für Benutzer unabhängig von der Bildschirmgröße gewährleisten. Beispielsweise sollte die Touch-Funktionalität in großen Ansichtsfenstern unterstützt werden, während in kleineren Ansichtsfenstern Tastatur- und Mauseingaben Vorrang haben sollten. Die progressive Webanwendung sollte verschiedene Eingabemethoden unterstützen und die Benutzerinteraktionen mit eingabespezifischen Funktionen wie Pull-to-Refresh verbessern. 

PWA für E-Commerce: Mögliche Gefahren und Fallstricke

Welche Bedenken gibt es bei der Entscheidung, eine E-Commerce-PWA einzuführen? Was sind die Nachteile und wie können Sie sie vermeiden?

Wahrnehmung und Vertrauen

Die mit PWAs verbundene Wahrnehmung und das damit verbundene Vertrauen werden weiterhin durch die vorherrschende Vorstellung getrübt, es handele sich um minderwertige Anwendungen oder sie würden gar nicht erst als Anwendungen anerkannt. Benutzer haben sich daran gewöhnt, Anwendungen auf digitalen Plattformen wie Google Play oder dem App Store zu suchen, und sind möglicherweise nicht mit der Idee vertraut, Anwendungen direkt von Websites zu installieren. Vertrauen ist ein wichtiger Aspekt, da Verbraucher sich daran gewöhnt haben, sich auf App-Stores zu verlassen, um die Sicherheit heruntergeladener Anwendungen zu überprüfen.

Installation

Für die Installation einer PWA unter iOS müssen Benutzer auf das Freigabefenster zugreifen und dann die Option „Zum Startbildschirm hinzufügen“ auswählen. Der Vorgang ist aufwändiger als die Installation einer nativen iOS-Anwendung. Das Benutzererlebnis könnte verbessert werden, wenn Safari Unterstützung für das bieten würde beforeInstallPrompt Ereignis oder ändern Sie die Sprache der Aufforderung auf „App installieren“.

Manifeste Änderung

Die wesentlichen Elemente eines PWA-Manifests, einschließlich Symbol, Name und Begrüßungsbildschirme, können nach der Installation der PWA nicht ohne weiteres geändert werden. Obwohl es in der Desktop-Version von Chrome kürzlich Fortschritte gegeben hat, die die Änderung von Anwendungsnamen ermöglichen, wird die Verbesserung der Flexibilität bei der Änderung von Manifestattributen die Wettbewerbsfähigkeit von PWAs steigern.

Bereichsverwaltung

Das Scope-Management in PWAs kann aufgrund seiner kontraintuitiven Natur manchmal eine Herausforderung darstellen. Das Problem abschließender Schrägstriche kann zu Inkonsistenzen bei der Definition von Bereichen und damit zu Fehlern führen. Darüber hinaus besteht im Kontext von iOS das Standardverhalten beim Versuch, von einer externen Anwendung aus auf einen Hyperlink innerhalb der Grenzen einer PWA zuzugreifen, darin, den Safari-Browser anstelle der vorgesehenen PWA zu starten.

Zugriff auf Gerät

Dabei geht es um die Frage, ob PWAs trotz ihrer inhärenten Sicherheitsvorteile, die sich aus ihrem eingeschränkten Umfang ergeben, Zugriff auf native Dienste wie Kontakte, Kalender, SMS/MMS und Alarme gewährt werden sollte. Wenn PWAs der Zugriff auf diese Funktionalitäten ermöglicht wird, kann dies möglicherweise Sicherheitsmaßnahmen untergraben und die Unterscheidung zwischen PWAs und nativen Anwendungen verwischen.

Push-Benachrichtigungen auf iOS 

Push-Benachrichtigungen auf iOS waren für PWAs bis vor Kurzem nicht zugänglich. Infolgedessen konnten sich Entwickler nicht auf Push-Benachrichtigungen als Mittel zur Übermittlung wichtiger Informationen an iOS-Benutzer verlassen. Apple hat kürzlich seine Absicht erklärt, ab 2023 Push-Benachrichtigungen auf iOS-Geräten zu unterstützen. Viele Verbraucher haben jedoch ihre Unzufriedenheit mit Push-Benachrichtigungsaufforderungen aufgrund deren Ausnutzung durch Websites zum Ausdruck gebracht. Aus diesem Grund verfügen Webbrowser über automatische Blockierungsmechanismen für diese Eingabeaufforderungen.

PWA-Funktionen

PWAs bieten ein mobiles, natives Benutzererlebnis, obwohl sie viel kleiner sind – z. B. ist die Größe der BookMyShow-PWA 54-mal kleiner als die Android-App und 180-mal kleiner als die iOS-App – als native Apps. Diese Apps nutzen responsives Webdesign und progressive Verbesserungen, um ihren visuellen Stil und ihre Funktionalität an die Fähigkeiten des Geräts und des Webbrowsers des Benutzers anzupassen. 

Wie native Apps können PWAs über den Webbrowser installiert und auf dem mobilen Startbildschirm angezeigt werden. Push-Benachrichtigungen, automatische Inhaltsaktualisierung sowie App-ähnliche Navigation und Interaktion sind mit PWAs verfügbar.

Für den E-Commerce bedeutet dies, dass PWAs die Schaffung nahtloser digitaler Einkaufserlebnisse über verschiedene Geräte und Browser hinweg ermöglichen und dabei die Benutzerfreundlichkeit und Leistung nativer mobiler Apps ohne die Einschränkungen einer separaten Entwicklung und Verteilung bieten. 

PWAs ermöglichen es E-Commerce-Unternehmen, ansprechendere Online-Shops aufzubauen, die sich für Kunden auf jedem Gerät wie echte Apps anfühlen.

Worauf eine PWA basiert

1. Servicemitarbeiter Technologie ist für die PWA-Einführung von entscheidender Bedeutung. Mit Push-Benachrichtigungen, Caching und Offline-Funktionalität ähnelt die Benutzeroberfläche der einer mobilen App.
2. Das Web-App-Manifest ist eine JSON-Datei, die den Namen, die Symbole und das Farbschema der App angibt. Mit dieser Funktion können Benutzer die PWA mit einem Lesezeichen versehen.
3. Aus Datenschutz- und Sicherheitsgründen ist HTTPS obligatorisch.
4. Das erforderliche HTML, CSS und JavaScript sind in der Shell der App enthalten. Hier werden das Framework und die Benutzeroberfläche der App eingerichtet.
5. Es versteht sich von selbst, dass responsive Websites aufgrund ihrer Vielseitigkeit bei der Reaktion auf verschiedene Displaygrößen eine perfekte Grundlage für PWAs sein können.

PWA: Wie es sich von einer nativen mobilen App unterscheidet

Google Play und der App Store bieten Zugriff auf native Apps, die speziell für ihre Plattformen entwickelt wurden. Diese Anwendungen benötigen keine Zwischensoftware, um auf die Funktionen und APIs des Geräts zuzugreifen.

Aus diesem Grund funktionieren native Anwendungen reibungsloser und interagieren besser mit dem Betriebssystem.

PWAs werden für ihre Fähigkeit gelobt, plattformunabhängig zu sein, auf mehreren Plattformen und Webbrowsern zu funktionieren und automatisch Updates zu erhalten. 

E-Commerce-PWA: Wie es sich von einer responsiven Website unterscheidet

Während das Hauptziel sowohl von PWAs als auch von responsiven Websites darin besteht, das Benutzererlebnis zu verbessern, ahmen PWAs die Funktionen nativer mobiler Apps nach, wie z. B. Benutzeroberfläche und Push-Benachrichtigungen. Und reaktionsfähige Websites zielen darauf ab, ein nahtloses Seherlebnis auf mehreren Geräten zu bieten, ohne dass zusätzliche Software erforderlich ist.

PWA vs. native Apps vs. responsive Websites 

Entwickeln Sie eine E-Commerce-PWA von Grund auf oder konvertieren Sie alte Lösungen?

Wenn Sie derzeit über eine E-Commerce-Website oder eine native App verfügen und über die Einführung einer E-Commerce-PWA nachdenken, fragen Sie sich möglicherweise, ob es besser ist, bei Null anzufangen oder Ihre alten Assets umzuwandeln.

Im Allgemeinen ist die Konvertierung einer responsiven Website der einfachste Ansatz. Der Code ist bereits webbasiert und für verschiedene Bildschirmgrößen optimiert. Das Konvertieren einer nativen App erfordert die Aktualisierung des vorhandenen Codes, damit er im Web funktioniert. Die Entwicklung einer E-Commerce-PWA von Grund auf bietet das beste Erlebnis, erfordert jedoch den meisten Aufwand.

Konvertieren von einer responsiven Website

Vorteile: Vorhandene Webinhalte/-designs wiederverwenden, mit Webstandards vertraut sein

Nachteile: Nicht für PWA-Funktionen optimiert, erfordert möglicherweise zusätzlichen Aufwand für die Implementierung

Konvertierung von der nativen App

Vorteile: App-Logik wiederverwenden, Frontend

Nachteile: Benötigt Aktualisierungen, um den PWA-Standards zu entsprechen, zusätzlicher Aufwand für die Webunterstützung

PWA von Grund auf entwickeln

Vorteile: Von Anfang an vollständig an PWA-Standards angepasst

Nachteile: Mehr Zeit-/Kostenaufwand 

PWA: wie es sich von anderen Hybrid-Frameworks unterscheidet 

PWA bietet im Vergleich zu anderen Hybrid-Frameworks tendenziell ein nahtloseres Benutzererlebnis. PWA ermöglicht beispielsweise Offline-Funktionalität und kann über einen Webbrowser aufgerufen werden, während einige Hybrid-Apps heruntergeladen und installiert werden müssen.

PWA vs. Ionic 

Ionic ist ein Framework zum Erstellen hybrider mobiler Apps. Während PWA auf jedem Gerät mit einem kompatiblen Browser ausgeführt werden kann, bietet Ionic ein nativeres Erlebnis mit Zugriff auf Gerätefunktionen.

PWA vs. Flutter

Grundsätzlich ist Flutter ein Framework zum Erstellen nativer mobiler Apps. Flutter verwendet die Programmiersprache Dart. Und während PWA eher für inhaltsorientierte Apps geeignet ist, eignet sich Flutter besser für komplexe und visuell ansprechende Anwendungen.

PWA vs. React Native

React Native ist ein Open-Source-Framework zum Erstellen mobiler Apps mit React. React kann auch zur Entwicklung des Frontends einer PWA verwendet werden und bietet eine reaktionsfähige und interaktive Benutzeroberfläche.

E-Commerce-Plattform-basierte PWA-Lösungen

Magento PWA-Studio

PWAs können mit Hilfe von Magento PWA Studio erstellt werden, einer Suite von Tools und Bibliotheken, die für diesen Zweck erstellt wurden. Die Plattform nutzt modernste Tools wie React, Redux und GraphQL, um reaktionsfähige und leistungsstarke Online-Shops aufzubauen.

Salesforce Commerce Cloud PWA-Kit

Wenn Sie eine E-Commerce-PWA auf der Salesforce Commerce Cloud-Plattform erstellen möchten, bietet Ihnen das Commerce Cloud PWA Kit alles, was Sie für den Einstieg benötigen. Um ihr Ziel zu erreichen, ein reaktionsschnelles und ansprechendes Einkaufserlebnis zu bieten, nutzt diese Lösung JavaScript-Frameworks wie React und Vue.js.

Salesforce Commerce Cloud Storefront-Referenzarchitektur (SFRA)

Die Storefront Reference Architecture (SFRA) von Commerce Cloud ist ein weiteres hilfreiches Framework für die Erstellung von PWAs. Beim Aufbau von PWAs für die Commerce Cloud kann das SFRA-Framework eine solide Grundlage bieten. Erhöhte Anpassungsfähigkeit und eine Fülle von Personalisierungsmöglichkeiten sind nur zwei der vielen Vorteile, die es bietet.

SAP Commerce Spartacus

Auf der SAP Commerce Cloud können PWAs mit Hilfe des robusten SAP Commerce Spartacus Frameworks entwickelt werden. Das Frontend der Anwendung basiert auf Angular und kommuniziert ohne nennenswerte Störungen mit den Backend-Diensten der SAP Commerce Cloud.

Vue-Schaufenster

Vue Storefront ist ein fortschrittliches Open-Source-Framework zum Aufbau skalierbarer und zuverlässiger Online-Shops. Das Vue.js-Framework wird verwendet, um schnell PWAs zu erstellen, die sich an die Bedürfnisse ihrer Benutzer anpassen und ein flüssiges und reaktionsfähiges Erlebnis bieten. Push-Benachrichtigungen und die Möglichkeit, im Internet zu surfen, auch wenn keine Verbindung besteht, sind zwei bemerkenswerte Funktionen.

Weitere E-Commerce-PWA-Tools, die Sie in Betracht ziehen sollten

• ScandiPWA: Open-Source-PWA-Lösung, die speziell für die Magento 2-Plattform entwickelt wurde.
• Gatsby: Statischer Site-Generator, der zum Erstellen von PWAs mit React verwendet werden kann.Es gibt einen Teil der ...
• GoPWA: PWA-Entwicklungsframework zum Erstellen skalierbarer und leistungsstarker PWAs.

Erfolgsgeschichten von E-Commerce-PWAs

Viele Unternehmen, darunter einige der größten im E-Commerce-Bereich, haben bereits festgestellt, dass PWA recht effektiv ist. 

Die beiden wichtigsten Kennzahlen, Conversion-Raten (mehrere Beispiele zeigten einen Anstieg der Conversion-Rate von 27 % auf über 80 %) und Engagement-Raten (z. B. dreimal mehr Verweildauer auf der Website, höhere Seitenaufrufe, mehr angesehene Produkte), zeigen durchweg eine bemerkenswerte Verbesserung.

Dies ist jedoch nicht das Ende der Vorteile von PWA:

• Verbesserte Leistung – Viele berichteten von viel schnelleren Ladezeiten, geringerer Datennutzung und weniger Bounces.
• Erhöhter Traffic/Neukunden – Einige verzeichneten 2x tägliche Nutzer, 50 % Neukunden von PWA.
• Höhere Einnahmen – Fälle mit höherem Umsatz pro Besuch, Umsatzsteigerung durch Traffic um 79 %.
• Geringere Kosten – Geringere Kosten für die Kundenakquise, viel kleinere App-Größen als native.
• Offline-Zugriff – Ermöglicht das Weitereinkaufen ohne Internetverbindung.
• Push-Benachrichtigungen – Steigern Sie die erneute Interaktion, die Klickraten und die Anzahl der wiederhergestellten Warenkörbe.
• Plattformübergreifender Zugriff – Einheitliches Erlebnis auf jedem Gerät über Webtechnologien.
• Native-ähnliche Funktionen – Nutzung von Hardware-/Betriebssystemfunktionen, normalerweise nur in nativen Apps.

Entwicklungskosten für E-Commerce-PWA

Für die E-Commerce-PWA-Entwicklung fallen vergleichbare Entwicklungs- und Wartungskosten an wie für die Entwicklung von E-Commerce-Websites. Dennoch können PWAs auf einer größeren Vielfalt von Geräten ausgeführt werden als native Anwendungen, und es fallen keine zusätzlichen Kosten für den Zugriff auf Hardware oder die Platzierung in App Stores an. 

Quelle aus Grinteq

Haftungsausschluss: Die oben dargelegten Informationen werden von grinteq.com unabhängig von Alibaba.com bereitgestellt. Alibaba.com gibt keine Zusicherungen und Gewährleistungen hinsichtlich der Qualität und Zuverlässigkeit des Verkäufers und der Produkte.