PWA ist das App-Modell der Zukunft- mobile first neu gedacht!

Die PWA (Progressive Web App) ist aus unserer Sicht für viele Website- und oder Online-Shop Betreiber das neue mobile first. Liest du diesen Artikel auf deinem Smartphone? Mit hoher Wahrscheinlichkeit schon, denn Smartphones sind mittlerweile bei immer mehr Menschen egal welchen Alters fester Bestandteil des Lebens und nicht mehr wegzudenken. Oder wie willst du sonst in der fremden Stadt den Weg zum nächsten Restaurant finden?

Logischerweise müssen Websites oder Online Shops also vor allem auch für den mobilen Betrieb optimiert sein. Als Google vor kurzem das Ende des Desktop-Crawlers bis März 2021 verkündet hat, wurde auch dem Letzten klar, dass die Parole “mobile first” heißt!

Dabei verbringen Smartphone Nutzer weniger als 20% der Nutzungsdauer im Browser, sondern stattdessen nutzen sie lieber Apps.

FUN-FACT: Durchschnittsuser: 80 Apps auf Smartphone, nutzt 30 regelmäßig und 85% der Zeit davon in nur 5 Apps

Heißt das jetzt es reicht nicht, deine Website nur mobil zu optimieren, sondern du musst im Idealfall dazu noch eine App entwickeln?

Nein, das trifft meistens, v.a. im E-Commerce Bereich nicht zu. Denn Nutzer verwenden verstärkt Webanwendungen, wenn die User Experience besser wird und sie das identische Verhalten wie eine native App bieten.

Möglich werden könnte das mit der Progressive Web App (PWA). Wir zeigen dir hier welche Eigenschaften und Vorteile diese im Vergleich zu nativen Apps, Web Apps oder Hybrid Apps hat. Gerade nicht mehr sicher, was genau die Begriffe bedeuten? Keine Sorge, erstmal ein kleiner Überblick über die aktuellen Ansätze mobiler Apps:

Welche App-Ansätze gibt es?

Native App:
Wird speziell für eine Plattform entwickelt (iOS von Apple oder Android von Google). Zudem hat man Zugriff auf native UI/UX Elemente und Vollzugriff auf Gerätehardware (z.B. Kamera und Mikro).
Cross-Plattform App:
Wird für Mehrzahl von Plattformen (iOS & Android) entwickelt. Es liegt eine Mehrzahl an Frameworks und unterschiedliche Programmiersprachen vor. Aus einem Framework stammt die Codebasis, aus der zum Schluss aus der Datei die App für die gewünschten Plattformen kompiliert wird.
Web App:
Basiert auf Webtechnologien wie HTML, CSS und javascript. Sie ist wie eine normale Website über URL erreichbar, allerdings nicht auf Gerät installiert und oftmals nicht optimiert für Smartphones.

Hybrid App:
Ist eine Kombination aus Native und Web App. Die Web App wird in einen Container verpackt. So wird die bestehende Website mit wenig Aufwand als App-Lösung in einen Container verpackt.
PWA (Progressive Web App):
Ist eine Erweiterung einer Web App, im Browser (Firefox, Chrome, Safari etc.) aufrufbar und verwendbar, sowie darüber installierbar. Es gibt native Schnittstellen und offline Elemente.

Was ist eine PWA?

Eine Progressive Web App ist ähnlich wie die Hybrid App eine Erweiterung einer Web App, die mit nativen App Funktionalitäten und Inhalten erweitert wurde. Man könnte auch sagen es ist eine Verschmelzung einer responsive Website und einer Smartphone App. So hat man Zugriff auf Web und App Funktionen. Im Vergleich zur Hybrid App liegt der Fokus mehr auf den Web-Funktionalitäten, als auf dem Verpacken für die App Stores. Die PWA zeichnet sich durch folgende Eigenschaften aus:

Was sind die Vorteile einer PWA?

Erhöhung der Kundenbindung:
Wenn Kunden die App über die Google Suche ”entdecken” stoßen sie auf spannende und neue Inhalte, die sie nicht von einer gewöhnlichen Website erwarten würden. Bietet man ihnen weitere, fesselnde Inhalte, so nutzen sie die PWA gerne und wiederkehrend. Auf Inhalte oder Aktionen, wie z.B. Rabatte im E-Commerce Bereich, können Kunden direkt via Push-Benachrichtigung aufmerksam gemacht werden.
Hohe Performance:
Dank u.a. der kleinen Paketgröße kann mit einer PWA eine deutlich bessere Performance erzeugt werden, als mit einer traditionellen Website oder einer Web-App.
Offline Funktionalitäten:
Auch wenn Kunden z.B. unterwegs sind und die mobilen Daten nicht zur Verfügung stehen oder die Verbindung schlecht ist, können sie wegen der Offline-Funktionalitäten dennoch die Anwendung nutzen und engaged bleiben, egal ob via Browser oder App.
Verbesserung des Nutzererfahrung:
Nutzen die Kunden verstärkt die PWA, so wird diese basierend auf Nutzungsdaten immer besser, denn eine PWA kann so kontinuierlich optimiert werden. Die Umsetzung von einem echten Fluiddesign und den damit erreichbaren Benefits für die Usability ist mit einer PWA viel leichter möglich, als mit jedem anderen Theme.

Umgehung der App Stores:
Die PWA wird über den Browser aufgerufen und wird auch darüber verwendet. Zusätzlich kann man sie, egal ob via Desktop oder Mobilgerät, darüber auch installieren, indem sich ein Pop-Up Fenster öffnet. Zwar ist die Installation einer App über den Browser evtl. eine Hürde da Nutzer es gewohnt sind über die App-Stores zu installieren, da diese tendenziell im allgemeinen sicherer sind. Im B2B besteht jedoch meistens bereits eine Kundenbeziehung und das Vertrauen in Software-Produkte deines Unternehmens ist entsprechend hoch, sodass wir davon ausgehen, dass diese Hemmschwelle im B2B nicht gelten wird. Zudem bietet das Webhosting einige Vorteile, die diesen Nachteil mindestens aufheben: Durch den Wegfall der Drittanbieter hat man mehr Freiheit und Kontrolle über die Anwendung, da man z.B. nicht deren Richtlinien befolgen muss. Zusätzlich kann man die App einfach vial URL verlinken, d.h. es wird deutlich einfacher sie z.B. für Online-Marketing Maßnahmen zu verwenden, als eine App aus dem Store, da sie direkt verwendbar ist und nicht erst installiert werden muss.
Web-Technologien & plattformübergreifend:
Die PWA basiert auf den Web-Technologien HTML, CSS und JavaScript. Viele Frameworks bieten die PWA-Funktionen ohne großen Mehraufwand, so kann man bei vue.js. diese mit einer einzelnen Code-Zeile hinzufügen und erhält eine Anwendung, die je nach Browser (wie z.B. Chrome, Firefox oder Safari) moderner & “besonderer” als die gewöhnliche Web App aussieht. Auch bzgl. Direktinstallation, Caching, etc. funktioniert die PWA besser als die reine Web App, die zudem nicht offline verfügbar ist. Nutzt man als Framework z.B. Quasar, welches auf vue.js basiert, dann ist daraus auch relativ einfach Hybrid App baubar, sodass die App bei Bedarf auch in den App-Stores vorliegt.

Noch nicht überzeugt? Hier noch ein paar PWA Fakten.

Die Starbucks PWA hat die Zahl der täglich aktiven Nutzer verdoppelt – Die Bestellrate auf dem Desktop ist fast gleich wie mobile.
Tinder reduzierte mit ihrer neuen PWA die Ladezeit von 11,91s. auf 4,69. Sie ist um 90% kleiner als die Tinders Native Android App.
Die PWA Twitter Lite sorgte für einen Anstieg von 65% bei Seiten pro Sitzung, 75% bei Tweets und eine Senkung der Bounce Rate um 20%.

Welcher ist der passende Ansatz für dich
und wann empfehlen wir sich für eine PWA zu entscheiden?

Um deinen DevApproach festzulegen, hängt das stark von den Anforderungen ab, die du an dein Digitalprojekt hast. Soll es möglichst kostengünstig sein sind z.B Hybrid, Web App oder PWA zu empfehlen. Eine erste Orientierung bietet dir folgende Tabelle.

Im Bereich E-Commerce, also z.B. für deinen Online-Shop ist es auf jeden Fall ratsam eine Website zu besitzen, da für Kunden die Google Suchmaschine oder Marktplätze Anlaufstelle Nr.1 für Produktrecherche sind. Darüber hinaus eignet sich die Entwicklung einer PWA dank der genannten Vorteile wie z.B. den Notifications allerdings auch hervorragend für E-Commerce.

Neugierig wie PWAs im E-Commerce angewendet werden? Dazu folgt bald ein weiterer Artikel. Also stay tuned!

Fazit

Nach dem Vergleich und der genaueren Betrachtung der PWA haben wir folgende Empfehlung: Wünschst du eine traditionelle App, bei der App-Funktionen wie z.B. Gamification Elemente eine wichtige Rolle spielen raten wir dir den Cross-Plattform Ansatz zu verwenden. Im Vergleich zu den nativen Apps liegt dabei ein guter Kompromiss aus Performance, Entwicklungsgeschwindigkeit und Kosten vor. Sind dir App-Funktionen nicht ganz so wichtig, du möchtest aber deine Webanwendung mobile optimieren und zumindest die Option haben, später App-Funktionen hinzuzufügen? Dann legen wir dir den PWA-Ansatz ans Herz. Übrigens: Auf pwa.bar findest du Links zu aktuellen PWAs von Starbucks, BMW bis zu NASA.

Du brauchst dabei Unterstützung?

Wir erleichtern für unsere Kunden mit Strategie-Workshops und Marktanalysen den Einstieg in ihre digitale Transformationen und entwickeln für sie erfolgreiche, skalierbare und zukunftsorientierte digitale Lösungen und Individualentwicklungen.

CONTACT US