Was ist eine Progressive Web App (PWA)?
Merkmale einer PWA
Eine sogenannte Progressive Web App ist eine Webseite, die einer nativen Applikation sehr ähnelt aber dennoch eine auf HTML/CSS und JavaScript basierende Applikation ist. Die PWA nutzt viele Eigenschaften, die vorher nur nativen Apps vorbehalten waren. Das macht eine PWA natürlich unwahrscheinlich interessant gerade in Bezug auf die neuen Google Web Vitals, da die Performance einer PWA extrem hoch ist.
Durch das Verhalten und z.B. das Nutzen unterschiedlicher Funktionen eines mobilen Endgeräts, so z.B. die Kamera, Kontakte, Push-Benachrichtigungen oder auch einfach das Ablegen der Applikation auf dem Home-Screen des Devices, fühlt sich eine PWA an wie eine native App. Ein ganz entscheidendes Kriterium ist aber die Benutzbarkeit ohne eine Internetverbindung zu haben.
Eine PWA kann man sich so vorstellen, dass das Headless-CMS, z.B. Magento oder auch WordPress und das Frontend voneinander getrennt sind und nur über eine Schnittstelle (API) kommunizieren. Durch das Anwenden von Service-Workern und die Optimierung von Caching bietet die PWA sogar Offline-Funktionalitäten, sprich ohne Verbindung zum Internet kann der Nutzer mit dem Onlineshop interagieren.
Was ist ein Headless-CMS?
Ein CMS ist das "Content-Management-System" über das die Inhalte der Webseite oder des Onlineshops gepflegt werden. "Headless" bedeutet in diesem Fall, dass das Backend kopflos agiert und das CMS hauptsächlich als Content-Repository fungiert. Inhalte werden über eine Schnittstelle dem Frontend zugänglich gemacht.
Interessante Technologien
Vue Storefront für Headless-Commerce
Vue Storefront ist eine PWA für Onlineshops und bietet viele Funktionalitäten, die ein Onlineshop benötigt. Vue Storefront ist mit allen Onlineshop-Systemen verknüpfbar, die eine entsprechende API für ein Frontend zum Datenaustausch bereitstellen. Für einige Onlineshop-Systeme wie z.B. Magento 2 oder Shopware 6 besteht bereits eine API für die meisten vorhandenen Funktionen. So kann man mit einem erfahrenem Entwickler-Team einen professionellen PWA Onlineshop erstellen lassen, ohne die Verbindung mit dem CMS individuell zu entwickeln.
Vue Storefront für Shopware
Für Shopware 6 haben Vue Storefront und die Shopware AG gemeinsam eine modifizierte Applikation entwickelt, die auf Shopware 6 angepasst ist.
Javascript
Service Worker
Ein Service Worker ist ein JavaScript, das ein Web-Browser im Hintergrund ausführt. Eine Progressive Web App benötigt Service Worker, da diese essenzielle Funktionen wie z.B. das Caching für die Offline-Verfügbarkeit oder Push-Benachrichtigungen der Applikation möglich machen.
Vorteile einer PWA
Kostenreduktion
Durch die Implementation einer PWA muss nicht mehr, wie früher, für Android, IOS, Windows und das Web eine Applikation entwickelt werden. Denn eine PWA funktioniert auf allen Plattformen.
User-Experience
Die PWA kann anhand von nativen Applikationen nachgebaut werden, wodurch sie dieselbe Nutzererfahrung wie native Apps bieten kann.
Hardwarezugriff
Die PWA bietet der Applikation die Möglichkeit auch auf die Hardware des Geräts zuzugreifen. So z.B. Push Notifications und die Kamera auf mobilen Endgeräten.
Einfachere Veröffentlichung in den Mobile-Stores von Google, Apple und Co.
Der langwierige Veröffentlichungsprozess wie bei nativen Apps im Google Play, Windows Phone Apps oder Apple App Store muss nicht durchlaufen werden.
Offline-Modus
Durch die sogenannten Service Workers kann der Nutzer mit der PWA auch ohne Verbindung zum Internet interagieren, wodurch eine höhere Kundenbindung und Konversion entstehen können.
Höhere Performance
Durch diese Technik haben Progressive Web Apps eine höhere Performance (Geschwindigkeit) als herkömmliche Web-Applikationen. Dadurch profitiert nicht nur die Konversionsrate, sondern auch die gesamte Nutzererfahrung (User-Experience) und die Retention-Rate.
Fakten zur PWA von alibaba.com und flipkart.com
Wer ist Alibaba und Flipkart
alibaba.com ist die größte E-Commerce-Plattform in China und wurde 1999 von Jack Ma gegründet und ist mittlerweile eine der größten IT-Firmen in China. Mit rund 94,6 Mrd. US-Dollar Nettoumsatz in 2020 gehört Alibaba zu den ganz Großen in China. Flipkart ist zwar nicht wie Alibaba so groß, allerdings einer der größten Onlinehändler in Indien. Flipkart wurde 2007 von Sachin Bansal und Binny Bansal gegründet. Mit einem Nettojahresumsatz von 2,3 Mrd US-Dollar kann sich Flipkart dennoch sehen lassen.
Zudem sind beide Unternehmen Vorreiter in Sachen Technik und beide haben schon vor langem erkannt, dass die Zukunft im Internet wohl PWA's dominieren werden.
Beide Plattformen nutzen bereits diese Technologie und haben extreme Vorteile bzw. Steigerungen dadurch erreicht.
Was hat die PWA gebracht?
Alibaba
Die Progressive Web App von Alibaba verzeichnet unter iOS 14 % mehr Nutzer und konnte die iOS Conversion um 76 % steigern. Unter Android werden sogar mehr als das Doppelte so viele Nutzer (30 %) vermerkt.
Quelle: https://pwa.bar/alibaba/
Flipkart
Die wichtigen Erkenntnisse:
- Zeit der Benutzer auf der Webseite im Vergleich zur vorherigen mobilen Erfahrung mit der Mobile-App: 3,5 Minuten vs. 70 Sekunden.
- 3x höhere Verweildauer auf der Webseite
- 40 % höhere Nutzung von wiederkehrenden Nutzern
- 70 % höhere Konversionsrate bei den Nutzern, die über die "Add to Homescreen" auf die Webseite gekommen sind
- 3x geringerer Datenverbrauch
