PWA-Shops: Die nächste Stufe deines Online-Stores

PWA-Shops verbinden die Zugänglichkeit von Webseiten mit der Funktionalität von nativen Apps. Was das für dich und deinen Onlineshop bedeuten kann, erfährst du hier.

Willst du mit deinem Onlineshop möglichst viele Kundinnen und Kunden erreichen, musst du sicherstellen, dass dieser von vielen Geräten erreichbar ist. Der PC wurde als Zugriffsmedium Nummer #1 längst vom Smartphone und dem Mobile Commerce abgelöst. Es soll aber auch Nutzende geben, die z. B. mithilfe eines Smart-TVs im Web surfen. Um auf möglichst vielen Plattformen ein zufriedenstellendes Einkaufserlebnis sicherzustellen, haben sich sog. Progressive Web Apps, kurz PWA, entwickelt. 

Was es damit auf sich hat, welche Vor- und Nachteile ein PWA-Shop bietet und wie du eine solche App für deinen Shopify-Store kreierst, zeigen wir dir in diesem Beitrag. 

Was ist eine PWA?

Eine Progressive Web App ist eine Hybridvariante zwischen einer Webseite und einer nativen App. PWAs funktionieren ähnlich wie herkömmliche Smartphone Apps, werden jedoch im Browser ausgeführt. Das führt u.a. dazu, dass sie nicht erst von Nutzer:innen heruntergeladen und installiert werden müssen. 

Progressive Web Apps als Ergänzung zum klassischen Onlineshop

Du solltest eine PWA nicht als Ersatz für deinen Onlineshop betrachten, sondern eher als Ergänzung bzw. Erweiterung. Auch wenn moderne Webbrowser responsive Webseiten heutzutage sehr gut wiedergeben, gibt es noch immer Funktionen, die nur dedizierten Smartphone Apps vorbehalten sind - oder eben Progressive Web Apps. Wenn du also schon immer das Gefühl hattest, dass es lohnenswert wäre, deiner Kundschaft mithilfe einer App einen zusätzlichen Funktionsumfang anzubieten, könnte eine PWA eine gute Alternative sein.

Funktionsweise von PWA-Shops

PWAs bedienen sich sogenannter Service Worker. Das sind JavaScript-Programme, die im Hintergrund vom Browser ausgeführt werden und verschiedenste Funktionen für PWAs bereitstellen. Dazu gehört zum Beispiel ein Caching, das es ermöglicht, die Inhalte der App auch offline anzuzeigen, nachdem sie einmal geladen wurden. Darüber hinaus benötigt jede PWA eine sog. App Shell. Dabei handelt es sich um die HTML-, CSS und JavaScript-Umgebung, in der die App geladen und ausgeführt wird.

Vorteile von PWA-Shops

Offlinefähigkeit

Einen wesentlichen Vorteil von PWA-Shops haben wir bereits angedeutet. Sind die Inhalte einmal geladen, ist die App auch offline einsatzfähig. Dadurch wäre es zum Beispiel möglich, dass deine Kundschaft Produkte in ihren Warenkorb legt und die Bestellung bei dir eingeht, sobald wieder eine Verbindung zum Internet besteht.

Keine Installation

Wenn du über treue Stammkundinnen und -kunden verfügst, die regelmäßig bei dir einkaufen, kann es vergleichsweise einfach sein, diese zum Download einer nativen Smartphone App zu bewegen. Anders sieht der Fall aus, wenn dein Kundenkreis keine hohe Wiederkaufrate hat - dann würde sich die Installation für deine Zielgruppe nicht lohnen. Mit einem PWA-Shop musst du dir um dieses Problem keine Gedanken machen, da die PWA im Browser ausgeführt wird und keine Initiative seitens deiner Kundschaft voraussetzt. 

Kurze Ladezeiten

Ladezeiten sind für die Nutzererfahrung von essenzieller Bedeutung. Verschiedene Quellen belegen, dass eine Ladezeit von 10 Sekunden zu einer 123 Prozent höheren Absprungrate gegenüber einer Ladezeit von nur einer Sekunde führt. Da ist es doch beruhigend zu wissen, dass PWA-Shops im App Shell blitzschnell geladen werden und für Nutzerinnen und Nutzer kaum wahrnehmbare Verzögerungen bieten (eine schnelle Internetverbindung vorausgesetzt). 

Hardwarezugriff

Mit PWAs besteht die Möglichkeit, auf die Hardware deiner Nutzer:innen zuzugreifen, was es dir erlaubt, ein vollkommen neues Einkaufserlebnis zu kreieren. Wenn du z. B. Deko oder Möbel verkaufst, könnte deine PWA die Smartphone-Kamera für Augmented-Reality-Funktionen nutzen, sodass deine Kund:innen das Produkt ihrer Wahl direkt in ihrer unmittelbaren Umgebung betrachten können. 

Pushnachrichten

Ähnlich wie mit nativen Apps kannst du mithilfe einer Progressive Web App auch Pushnachrichten an deine Kundschaft versenden, und sie beispielsweise über kommende Sales, Produktneuheiten oder exklusive Rabatte informieren. 

Nachteile von PWA-Shops

Kompatibilitätsprobleme: Vor allem ältere Browser-Versionen unterstützen PWAs nicht oder nicht vollständig. Mit Apples Safari-Browser war es lange Zeit nicht möglich, Progressive Web Apps zu nutzen. Kund:innen mit älteren Geräten  sind deshalb womöglich von deinem PWA-Shop ausgeschlossen.

Zusatzkosten: Für die Entwicklung einer PWA kann ein vier- bis fünfstelliger Betrag anfallen. Neben einer einmaligen Investition sind aber auch geringere, monatliche Beträge möglich. So oder so verursacht eine PWA Kosten, die dir durch den Betrieb eines konventionellen Onlineshops nicht entstehen.

Keine App-Store-Präsenz: Da sie nicht wie konventionelle Apps installiert werden, sind PWAs nicht in App Stores auffindbar, was zu Verwirrung bei deinen Kund:innen führen kann, die es gewohnt sind, Apps über diese Plattformen zu installieren.  

Beispiele für PWA-Shops

Verilux

"Brighten Up Your Life" lautet das Motto von Verilux. Der Hersteller gesunder Beleuchtungslösungen hat sich der Aufgabe verschrieben, das Wohlbefinden seiner Kundschaft durch Licht zu steigern. Um auch auf mobilen Endgeräten ein perfektes Einkaufserlebnis bieten zu können, hat Verilux seinen Shopify-Store mithilfe der Ampify-App in eine PWA umfunktioniert.

burgerme

Ein prominentes Beispiel für die Nutzung einer PWA ist die Fastfood-Kette burgerme. Sobald Nutzende auf das "Jetzt Bestellen"-Symbol (auf mobilen Geräten ein Einkaufstaschen-Symbol) klicken, lädt eine Progessive Web App, die durch die Online-Bestellung führt.

Lesetipp: Du willst wissen, warum bereits eine Million Unternehmen auf Shopify setzt? Was ist Shopify und welche Vorteile hat das System? Erfahre es hier.

Wie kann ich PWAs in meinem eigenen Shop umsetzen?

Je nach Komplexität deines Vorhabens gibt es verschiedene Wege, deinen Onlineshop um eine PWA zu ergänzen.

Shopify-Apps

Die Implementierung einer Progessive Web App ist mit Shopify besonders einfach. Es gibt zahlreiche Apps, die die Standardfunktionen deines Shops in eine PWA überführen.

Hier sind einige von ihnen:

• Ampify
• PWA - iOS & Android App
• Shopney

In diesem Video-Guide (auf Englisch) erfährst du, wie du deinen Shopify-Store optimieren kannst:

Engagiere Shopify-Expert:innen

Wenn du mit deiner PWA komplexe Features wie z. B. Augmented-Reality-Funktionen realisieren möchtest, solltest du die Beauftragung eines Experten oder einer Expertin in Betracht ziehen. Im Shopify-Partner-Verzeichnis findest du Freelancer und Agenturen, die verschiedenste Aufgaben für dich und dein Business übernehmen können - darunter auch die Programmierung eines PWA-Shops.

Fazit

Progressive Web Apps sind eine sinnvolle Ergänzung für deinen konventionellen Onlineshop. Sie überzeugen vor allem durch schnelle Ladezeiten auf mobilen Endgeräten und sind in der Lage, durch die Nutzung der Smartphone-Hardware ein vollkommen neues Einkaufserlebnis zu bieten. Shopify ist für die Implementierung einer PWA bestens geeignet.

Häufig gestellte Fragen zu PWA-Shops

Wie unterscheiden sich PWAs von herkömmlichen Web-Apps?

Im Gegensatz zu herkömmlichen Web-Apps können PWAs offline funktionieren, Push-Benachrichtigungen senden und auf dem Startbildschirm eines Geräts installiert werden, ähnlich wie eine native App. Außerdem sind PWAs schneller und reaktionsschneller.

Können PWAs auf iOS-Geräten verwendet werden?

Ja, PWAs können auf iOS-Geräten verwendet werden, aber die Unterstützung ist eingeschränkter als bei Android und anderen Plattformen. PWAs auf iOS können zum Beispiel keine Push-Benachrichtigungen senden, und der Zugriff auf bestimmte Hardwarefunktionen ist eingeschränkt.

Wie sicher sind PWAs?

PWAs müssen über HTTPS bereitgestellt werden, was ein hohes Maß an Sicherheit bietet. Der Einsatz von Service Workern und anderer Webtechnologien erfordert zusätzliche Sicherheitsmaßnahmen, aber grundsätzlich sind PWAs so sicher wie die Websites, auf denen sie basieren.