Von Halil Uzun publiziert am 6. August 2018

Progressive Web Apps (PWA): Die E-Commerce-Revolution

Mobile First ist mittlerweile kein Denkansatz mehr, sondern viel mehr ein Leitspruch. Während sich weltweit die Nutzung von Smartphones immer weiter verbreitet, sind responsive Webseiten und Online-Shops kaum wegzudenken. Auch Apps spielen dabei eine essentielle Rolle, denn sie genießen oft den Vorteil einer besseren Nutzung, höheren Geschwindigkeit, Push-Benachrichtigungen etc. Eine Studie des Marktforschungsinstituts eMarketer bestätigt den mobilen Boom: der mobile Anteil des gesamten E-Commerce-Marktes soll im Jahre 2020 auf über 70% steigen (in Summe über 2,9 Billionen USD). Eine weitere Studie zeigt, dass responsive allein nicht ausreicht: 100 Millisekunden Verzögerung reichen aus, um die Conversion Rate einer Seite um 7% zu senken. Verzögerungen beim Laden auf mobilen Endgeräten wirken sich zusätzlich negativ auf das Google-Ranking aus. Wie können Online-Händler das gewaltige Wachstum zu ihrem Vorteil nutzen und gleichzeitig den Herausforderungen standhalten? Die Antwort lautet Progressive Web Apps.

e-commerce-umsatz-mobile

Das Wichtigste zuerst: Was ist eine Progressive Web App?

Bei einer Progressive Web App handelt es sich um eine Website, die eine nahezu identische Nutzererfahrung einer nativen App bietet, jedoch im Standardbrowser wiedergegeben wird. Daher kann eine PWA als eine Verschmelzung zwischen einer responsiven Website sowie einer App verstanden werden. Diese Technologie kann für eine Vielzahl an Geräten (Smartphone, Tablet, Desktop etc.) eingesetzt werden. Für den Zugriff auf eine PWA-Seite ist kein App Store erforderlich. Der wesentliche Vorteil von PWAs gegenüber nativen mobilen Anwendungen besteht darin, dass sie keine unterschiedlichen Technologien und kein tiefgehendes Verständnis für die Anpassung des Codes benötigen, um entweder auf iOS (Apple) oder Android-Handys ausgeführt werden zu können. Entwickler benötigen für das Development von PWAs lediglich HTML5, CSS und JavaScript. Eine „doppelte Entwicklung“ ist somit nicht mehr erforderlich. Ähnlich wie native Apps bieten PWAs außerdem Push-Benachrichtigungen direkt an den Nutzer, die Möglichkeit eines Home-Screen-Icons für einen schnellen Zugriff und einen Full-Screen-Modus ohne Link-Leiste o. Ä. Untermauert wird all das von hoher Geschwindigkeit beim Laden der Seiten.

Die Zukunft gehört den Progressive Web Apps

Es wird schnell deutlich, dass die Vorteile von Progressive Web Apps weitreichend sind. Wie eingangs erwähnt, ist die mobile Ladegeschwindigkeit ein wichtiger Faktor für das Google-Ranking. So sehr, dass die Suchmaschine schnell ladenden Seiten einen zusätzlichen Ranking-Boost – sowohl in mobilen wie auch in Desktop-SERPs – bietet. Das Ziel von Webseiten ist es, ein schnelles, integriertes, zuverlässiges und ansprechendes Nutzererlebnis zu bieten. PWAs können diese Faktoren in vielerlei Hinsicht abdecken. Dank des Frameworks und des Cachings wird der PWA-Code effizient gespeichert und Push-Benachrichtigungen sowie „Add-to-Home-Screen“-Funktionalitäten sorgen für wiederkehrende Benutzer. Hier verbirgt sich der Schlüsselbereich, in dem Progressive Web Apps Ihrem Online-Shop einen immensen Vorteil schaffen können.

Im Folgenden beschreiben wir die erwähnten Vorteile im Detail und erklären danach anhand von Praxisbeispielen, wie die ersten PWA-Adaptoren dank der Technologie Quantensprünge in ihren KPIs erzielen konnten.

Vorteil #1: Geschwindigkeit

Die Ladezeit von Webseiten wurde im Jahre 2010 besonders wichtig, als Google diese als Rankingfaktor eingeführt hat. Die Relevanz der Schnelligkeit wird nochmals in einer Google-Studie verdeutlicht, die zeigt, dass Absprungraten auf langsamen Webseiten um bis zu 132% steigen. Dank des Service Workers, eine moderne Browsertechnologie, die bestimmte Seiten offline verfügbar macht und die Grundlage für Push-Benachrichtigungen bietet, werden in PWAs schnelle Ladezeiten ermöglicht. Das Caching erlaubt es dem Browser, sich wiederholende Elemente des Layouts, die sich im Template befinden, zu speichern und bei Bedarf in den Browser einzuspeisen, was die Downloadzeiten erheblich senkt. So können wichtige Sekunden gespart werden, die jeden Online-Shop benutzerfreundlicher machen.

Absprungrate

Vorteil #2: Responsiveness & Fullscreen

Die Benutzerfreundlichkeit steht im Mittelpunkt von Progressive Web Apps, weshalb diese responsiv sind, sich also der Bildschirmgröße des Endgeräts anpassen und gleichzeitig im Fullscreen angezeigt werden, sodass bei der Nutzung der PWA optisch kein Unterschied zu einer nativen App ausgemacht werden kann.

Daher ist es egal, welches Endgerät betrachtet wird, die User Experience in PWAs ist stets maßgeschneidert. Das PWA app manifest file erlaubt es Entwicklern die Vollbild-Ansicht zu bearbeiten, um das Nutzererlebnis zusätzlich zu verbessern.


pwa-fullscreen

Eine PWA im Full-Screen-Modus

Vorteil #3: Offline-Funktionalitäten

Der Service Worker und die Cache API sind essentiell für PWAs, wenn es um die Offline-Nutzung geht. Wie zuvor erklärt, ist der Service Worker ein Programm, das insbesondere im Hintergrund arbeitet und Website-Daten im Browser-Cache abruft und sichert.

Wenn Sie also z. B. in der U-Bahn unterwegs sind, kann es sein, dass Sie kein Internet haben. PWAs kommen mit diesen Situationen bestens klar und schaffen Brücken zwischen der Online- und Offline-Welt, indem sie in der Zwischenzeit Cache-Daten abrufen und eine Basisnavigation ermöglichen.

Vorteil #4: Push-Benachrichtigungen & Add-to-Homescreen

Push-Benachrichtigungen sind in nahezu allen Fällen Bestandteil nativer Apps. Diese erinnern den User über eine Leiste am oberen Bildschirmrand über Neuigkeiten oder weitere relevante Informationen.

Push-Benachrichtigungen werden auch von Progressive Web Apps unterstützt und sind somit ein immenser Mehrwert für E-Commerce-Seiten, da Benutzer über Updates im Online-Shop informiert werden, wenn z. B. neue Produkte auf Lager sind, wenn es aktualisierte Versandinformationen gibt oder wenn der neue Summer-Sale live geht.

Zusätzlich können PWAs über die "Add-to-Homescreen"-Funktionalität zum Startbildschirm hinzugefügt werden, sodass das bekannte App-Icon sich auf dem Startbildschirm nicht von nativen Apps unterscheidet.

pwa-addtohomescreenDie Funktion Add-to-Homescreen im Browser pwa-app-iconDie PWA als App-Icon

Vorteil #5: Bereit für Suchmaschinen

Um Inhalte nativer Apps für Suchmaschinen wie Google oder Bing sichtbar zu machen, ist eine tiefe Verlinkung im Quellcode der App notwendig. An dieser Stelle profitieren PWAs von den Vorteilen einer normalen Website, da die URLs einfach von Suchmaschinen indexiert und Inhalte schnell gefunden werden können.

Vorteil #6: Privatsphäre

Eines der größten Probleme nativer Apps waren ihre vergleichsweise schwachen Sicherheitsmerkmale. Vermehrt wurde die übermäßige Verwendung von Cookies, falsch gecachte Daten und schlecht geschützte Zugriffe auf Telefondaten und -funktionen festgestellt. PWAs können oft ohne Zugriff auf diese Daten arbeiten. Da Progressive Web Apps über HTTPS bedient werden, werden alle Daten automatisch end-to-end verschlüsselt. Dedizierte Browser-APIs stellen sicher, dass gewisse Prozesse, wie z. B. der Zahlungsverkehr oder die automatische Anmeldung, deutlich sicherer werden. Sicherheit ist insbesondere im E-Commerce, in dem der Zahlungsverkehr ein fester Bestandteil ist, besonders wichtig.

Welche Unternehmen nutzen bereits PWAs? 4 Erfolgsbeispiele

Im E-Commerce gibt es bereits erste Adaptoren, die dank ihrer Progressive Web App überdimensionale Erfolge erzielt haben. Nachfolgend zeigen wir Ihnen 4 kurze Erfolgsgeschichten aus dem Online-Handel.

1. AliExpress

AliExpress, eine Online-Einzelhandelsplattform, die, ähnlich wie eBay, Nutzern ermöglicht, bei vorrangig chinesischen Anbietern zu bestellen, ist ein Paradebeispiel für das gewaltige Potenzial von PWAs.

Folgende Kennzahlen konnten seit dem Launch der Progressive Web App erzielt werden:

  • Anstieg neuer Nutzer um 104%
  • Nutzung durch iOS-Anwender um 82% (obwohl der Service Worker zum Zeitpunkt der Messung noch nicht vom Safari Browser unterstützt wurde)
  • Anstieg der in einer Sitzung auf der Webseite verbrachten Zeit um 74%

2. Ele.me

Der Essenslieferant Ele.me aus China reduzierte dank seiner PWA die Ladezeit aller Seiten um 6,35% und die der pre-cached Seiten um 11,6%, sodass die Ladezeit einer initial besuchten Seite auf 4,93 Sekunden im 3G-Netz fiel.

3. BookMyShow

Indiens größtes Ticketing-Unternehmen BookMyShow hat monatlich +50 Millionen Shop-Besucher. Ein Relaunch ihrer mobilen Webseite mit PWA-Funktionalität führte dazu, dass die Conversion Rate um +80% stieg und somit mehr Nutzer Tickets kauften. Außerdem war die PWA 54x kleiner als die Android-App und 180x kleiner als die iOS-App. Die PWA braucht lediglich 2,94 Sekunden, um vollständig zu laden und ermöglicht einen Checkout innerhalb von 30 Sekunden.

4. George.com

Ein letztes Beispiel ist George.com, eine führende Kleidungsmarke aus UK. Nachdem auch dieses Unternehmen ein Upgrade auf PWA durchführte, konnte die Marke neben einem 31%-Anstieg der Konversionsrate folgende Erfolge verzeichnen:

  • 3,8x schnellere durchschnittliche Seitenladezeit
  • Senkung der Bounce-Rate um das 2-fache
  • Anstieg der Conversion Rate um 31%
  • 20% mehr Page Views pro Besuch
  • Durchschnittlich 28% längere verbrachte Zeit auf der Seite von Besuchern, die die Seite von der Home Screen PWA ansteuerten

Das hält die Zukunft für PWAs bereit

Progressive Web Apps werden durch Google stark gefördert. Der Suchmaschinengigant ist aktuell in Gesprächen mit vielen Partnern, darunter sind einige E-Commerce-Plattformen wie beispielsweise Magento.

Es ist realistisch zu sagen, dass die PWA-Technologie den Ansprüchen der mobilen Nutzer erfüllt und diese langfristig an Unternehmen bindet. Das liegt insbesondere daran, dass Anwender die Inhalte schnell und zeitweise offline sehen möchten, was durch PWAs ermöglicht wird.

Studien zeigen, dass die mobile Nutzung von Online-Shops immer weiter steigt. Viele Nutzer weisen außerdem die Tendenz auf, Shops über mobile Browser anzusteuern, da native Apps immer wieder durch Bugs zur Unzufriedenheit führen. Auch die Größe der Apps spielt eine wichtig Rolle, da User, die in der Bahn oder im Bus online shoppen möchten, ungern 50-100 MB Datenvolumen für den Download einer App aufbrauchen wollen. PWAs sorgen in dem Fall für Abhilfe. Nutzer müssen zur Produktrecherche nicht mehr zwischen Browser und App hin und her wechseln. Das Nutzererlebnis steigt drastisch.

Digitaler Espresso E-Commerce

Fazit: Progressive Web Apps gehört die Zukunft des E-Commerce

Es ist sehr unwahrscheinlich, dass Progressive Web Apps ein vorübergehender Trend sein werden. Sie haben das Potenzial, die mobile Landschaft grundlegend zu verändern, umso wichtiger ist es für E-Commerce-Händler, der Zeit voraus zu sein. Die Investition in eine fortschrittliche Web-App-Entwicklung bedeutet mehr Umsatz bei weniger Kosten und positioniert frühe Adaptoren als Innovatoren.