Eine Progressive Web-App (PWA) ist eine Webseite, die auf einem Touch-Gerät wie eine mobile Anwendung aussieht und sich verhält.
So erhalten Sie „zwei in einem“ und mehrere zusätzliche Vorteile. Ist es eine geeignete Lösung für Ihr Projekt?
PWA ist ein Satz moderner Technologien, den Sie in Betracht ziehen sollten, wenn Sie viele Besucher von mobilen Geräten haben. Es handelt sich immer noch um einen relativ neuen Ansatz zum Erstellen von mobilen Anwendungen und Websites. PWA ist eine Kombination aus den besten mobilen Anwendungen und Webtechnologien. Die Benutzererfahrung entspricht nativen Anwendungen oder übertrifft sie in einigen Fällen sogar. Auf der ganzen Welt wird es sehr erfolgreich von Unternehmen wie Forbes, Twitter, Alibaba, Lancome, Uber und Starbucks eingesetzt.
Was sind die Vor- und Nachteile der Verwendung von PWA-Technologie?
Vorteile von PWA
Offline-Modus
- PWA kann auch ohne Internetverbindung funktionieren, im Gegensatz zu einer traditionellen Website (die überhaupt nicht geladen wird, wenn die Verbindung verloren geht).
- Bessere Benutzererfahrung mit nahezu allen Vorteilen einer Anwendung. PWA bietet auf mobilen Geräten ein überlegenes Erlebnis im Vergleich zu einer Website, das nahezu nicht von einer mobilen App zu unterscheiden ist. Zum Beispiel bietet es die Verwendung von für mobile Apps typischen Navigationselementen und mehr.
- Im Gegensatz zu einer mobilen App ist es jedoch möglich, Links zu Unterseiten/Artikeln in sozialen Medien zu teilen.
- Darüber hinaus erscheint PWA im Gegensatz zu einer mobilen App in den Google-Suchergebnissen.
Ein-Klick-Installationsmöglichkeit
- Da sich die Website wie eine mobile Anwendung verhält, ist es möglich, sie auf dem Startbildschirm zu installieren, wo sie als App-Symbol erscheint (somit ist die Website mit nur einem Klick vom mobilen Gerät aus zugänglich, ohne dass die Domain in den Browser eingegeben werden muss).
Schnellere Ladezeiten
- Dank der verwendeten Technologien laden diese Websites viel schneller, was äußerst wichtig ist, da etwa 50 % der Besuche von mobilen Geräten stammen (Probleme mit der Verbindungsgeschwindigkeit sind auf Mobilgeräten üblich – nicht jeder hat das neueste Telefon und 4G-Abdeckung).
Push-Benachrichtigungen und Hardwarezugriff
- Dies ermöglicht es uns, Benutzer über Ereignisse und Rabatte zu informieren (sie erscheinen für sie als native Benachrichtigung auf ihrem Mobilgerät). Diese Art von Benachrichtigung hat oft höhere Konversionsraten als beispielsweise Newsletter. Sie kommen den Menschen noch näher.
- Darüber hinaus ist es möglich, Funktionen wie Geolokalisierung und den Zugriff auf Hardware (z. B. Zugriff auf Mikrofon, Kamera, Gyroskop usw.) zu nutzen, was in Zukunft viele potenzielle Anwendungen bietet.
- Beispiel für die Verwendung: Bei der Registrierung ist es notwendig, ein Foto eines Ausweisdokuments zur Genehmigung hochzuladen. Wenn das Formular auf einem Touch-Gerät ausgefüllt wird, können wir dem Benutzer die Möglichkeit anbieten, ein Bild direkt über die Kamera seines Telefons aufzunehmen und hochzuladen, ohne die Website zu verlassen oder Dateien aus ihren Ordnern hinzufügen zu müssen. Dies verbessert insgesamt die Benutzererfahrung.
Es ist nicht erforderlich, separate mobile Anwendungen zu entwickeln und zu verwalten und sie an eine vorhandene
- Datenbank anzuschließen.
Die meisten großen Treueprogramme (wie Orange) bieten auch eine mobile Anwendung an. Dies spart Tausende von Euro für die Entwicklung einer separaten mobilen Anwendung, bei der unter anderem grafisches Design, Programmierung, Integration in die Datenbank der Website usw. berücksichtigt werden müssten.
- Im Falle einer Änderung (wie einer Änderung der Anmelde-Logik) muss eine Funktion nicht mehrfach programmiert werden, einmal für die Website und dann für die App.
- PWA funktioniert mit jeder Art von Eingabe, es ist gleichermaßen mit Maus, Tastatur, Stift oder Touch-Eingabe verwendbar.
Es ist kein Download über den App-Store erforderlich (z. B. Google Play).
Einer der größten Nachteile klassischer mobiler Apps ist ihre niedrige Konversionsrate. In der Übersetzung:
- Wir müssen den Benutzer darüber informieren, dass die App existiert (durch bezahlte Werbung, Promotion auf sozialen Netzwerken, auf der Website, in E-Mail-Kampagnen usw.).
- Der Benutzer muss dann auf seinem Telefon zum App-Store gehen.
- Sie müssen nach der Anwendung suchen.
- Installieren Sie sie.
- Und dann müssen sie es auf ihrem Telefon öffnen und anfangs Einstellungen vornehmen, sich anmelden, usw.
- Dies ist ein relativ langer Prozess und viele Menschen vollenden ihn nicht.
- Unternehmen geben oft Tausende von Euro für die Entwicklung einer mobilen Anwendung aus (getrennt für Android und getrennt für iOS) und dann noch mehr Geld für Werbekampagnen aus, um die gewünschte Anzahl von Downloads zu erreichen.
- Mit PWA ist dies vollständig beseitigt, da alles, was erforderlich ist, ein Besuch auf der Website ist, bei dem der Benutzer über eine Benachrichtigung aufgefordert wird, die Anwendung auf seinem „Startbildschirm“ zu installieren. 1 Klick und fertig.
- Die Konversionsrate bei der Verwendung dieser Anwendung ist um 100-200 % höher als bei regulären mobilen Anwendungen.
Die Neugestaltung Ihrer mobilen Anwendung/Ihres Online-Portals usw. ist eine einzigartige Gelegenheit, wenn Sie auf die PWA-Technologie umsteigen können.
Die Entscheidung zur Verwendung von PWA zielt hauptsächlich darauf ab, die von Apple und Google in ihren Stores auferlegten Einschränkungen zu umgehen sowie eine bessere Benutzererfahrung zu gewährleisten.
Nachteile von PWA
- Vor einigen Jahren war der Nachteil, dass die meisten der beschriebenen Funktionalitäten für iOS-Gerätebenutzer nicht verfügbar waren. Apple hat jedoch inzwischen vollständige Unterstützung hinzugefügt.
- Wenn Sie aufgrund von Werbemöglichkeiten und damit verbundener Publicity Teil des Google Play Store oder des App Store sein möchten, sind PWAs kein Vorteil für Sie.
Welche Technologien werden am häufigsten für PWA verwendet?
Es gibt mehrere Technologien zur Erstellung einer progressiven Webanwendung, die hauptsächlich auf JavaScript basieren und verschiedene Eigenschaften aufweisen.
Für weitere Informationen finden Sie diese im Artikel von Google unter https://web.dev/progressive-web-apps/.
Wie wählt man zwischen PWA oder nativer Lösung aus?
Es ist besser, die Entwicklung einer PWA in Betracht zu ziehen, wenn:
- die Anwendung muss leicht an einen noch größeren Nutzerkreis verteilt werden können,
- das verfügbare Budget ist nicht hoch,
- es bleibt wenig Zeit für die Inbetriebnahme,
- eine gute Indizierung in Suchmaschinen ist wichtig,
- eine plattformübergreifende Kompatibilität erforderlich ist,
- mehrere Aktualisierungen sind in kurzer Zeit erforderlich.
Auf der anderen Seite ist es besser, eine native Anwendung zu entwickeln, wenn:
- Sichtbarkeit im Google Play Store und im App Store erforderlich ist,
- Geschwindigkeit und Reaktionsfähigkeit sind wichtige Erfolgsfaktoren für die Anwendung sind,
- die Anwendung erfordert eine wichtige Nutzung der Hardwarefunktionen des Geräts erfordert,
- das Geschäftsmodell beispielsweise auf dem Preis für Downloads (im Fall des App-Kaufs) und/oder In-App-Käufen (IAP) basiert,
- die Anwendung mit anderen Anwendungen von Drittanbietern integriert werden muss.
Unterschiede im Installationsprozess – PWA gegenüber nativer Anwendung.
Der allgemeine Prozess der Installation von nativen Anwendungen folgt diesen Schritten:
- Zugriff auf den jeweiligen App-Store (App Store oder Google Play).
- Suche nach der Anwendung.
- Klicken Sie auf „Installieren“.
- Akzeptieren Sie verschiedene Berechtigungen.
- Öffnen und starten Sie die Anwendung.
Im Vergleich dazu umfasst die Installation einer PWA:
- Besuch der Website.
- Hinzufügen zum Startbildschirm des Geräts (optional).
- Öffnen der Anwendung.
- Verwendung der Anwendung.
Erfolgreiche Verwendung von Progressive Web Apps
Es gibt bereits viele Beispiele für „sophistizierte“ PWAs, die von Benutzern auf ihren Geräten verwendet werden.
Starbucks
Um allen Kunden einen zugänglichen und benutzerfreundlichen Online-Bestellvorgang zu ermöglichen, hat Starbucks ein Online-Bestellsystem auf PWA-Basis entwickelt, das ein ähnliches Erlebnis wie ihre vorhandene native Anwendung bietet.
Mit anderen Worten: Dank seiner Fähigkeit, im Offline-Modus zu arbeiten, ermöglicht Starbucks seinen Kunden das Durchsuchen des Menüs, Anpassen von Bestellungen und Hinzufügen von Artikeln zu ihren Einkaufslisten, alles ohne konstanten Internetzugang.
Uber
Da das Unternehmen in neue Märkte expandiert, wurde seine Uber-Website von Grund auf als PWA neu erstellt, um ein vergleichbares Buchungserlebnis wie seine native mobile Anwendung anzubieten. Das Uber PWA wurde entwickelt, um Fahrzeugbuchungen auch in langsamen 2G-Netzwerken zu ermöglichen.
Das PWA-Modell, das auf dem Konzept einer App-ähnlichen Erfahrung basiert, die in allen modernen Browsern zugänglich ist, ist ideal für Personen, die auf Low-End-Geräten surfen, die möglicherweise nicht mit der nativen Uber-Anwendung kompatibel sind.
Wie hat sich das PWA entwickelt? Die native Erfahrung in der sehr leichten Uber-Webanwendung ermöglichte schnelle Fahranfragen unabhängig von Standort, Netzwerkgeschwindigkeit und Gerät. Der Kern der App, mit einer Größe von nur 50 kB, ermöglicht das Laden innerhalb von 3 Sekunden in 2G-Netzwerken.
Pinterest
Mit dem Schwerpunkt auf internationalem Wachstum hat Pinterest seine Website von Grund auf als PWA neu aufgebaut, um den Schwerpunkt auf mobile Ansichten zu legen. Das soziale Netzwerk stellte fest, dass vor diesem Schritt nur 1 % seiner mobilen Benutzer aufgrund schlechter Leistung auf mobilen Geräten zu Registrierungen, Anmeldungen oder App-Installationen konvertierten.
Pinterest PWA-Statistiken
Erkenntnis des enormen Potenzials zur Verbesserung der Konversion haben sie das mobile Web mit PWA-Technologie überarbeitet, was zu mehreren positiven Ergebnissen führte:
- Die Browsing-Zeit im Vergleich zum vorherigen mobilen Web stieg um 40 %,
- Die durch Anzeigen generierten Einnahmen stiegen um 44 %,
- Und das Nutzerengagement stieg um 60 %.
Spotify
Ihr bevorzugter Musikplayer basiert nun auf PWA-Technologie. Aufgrund bestimmter Meinungsverschiedenheiten zwischen Spotify und Apple bezüglich Provisionen fand das Unternehmen Spotify die aktuelle Gelegenheit, eine Version seiner Anwendung als PWA zu entwickeln – genau wie viele andere große Marken.
Im Vergleich zur nativen Spotify-Anwendung ist die PWA-Version mit ihrer eigenen einzigartigen und anpassungsfähigen Benutzeroberfläche deutlich schneller. Ähnlich wie bei vielen anderen PWAs werden Benutzer aufgefordert, das Spotify PWA-Produkt auf ihrem Startbildschirm hinzuzufügen, was das Spotify PWA-Produkt zugänglicher und vergleichbar mit seinen anderen Versionen macht.
Forbes
Für Forbes, ein globales Medienunternehmen mit Schwerpunkt auf Wirtschaft, Technologie, Unternehmertum, Führung und Lifestyle, ist die Kundenbindung von entscheidender Bedeutung.
Mit der zunehmenden Anzahl von Mobiltelefonbenutzern sah Forbes ein enormes Potenzial darin, 2017 seine eigene PWA einzuführen. Dank sehr schneller Ladezeiten, Push-Benachrichtigungen, sofortigen Übergängen und leichtem Design konnte Forbes das Nutzerengagement steigern und Konversionen steigern.
- Die Zunahme der Seitenaufrufe pro Browsing-Sitzung verdreifachte sich,
- die Anzahl der Sitzungen pro Benutzer stieg um 43 %,
- eine Versechsfachung der Leser,
- die Artikel bis zum Ende abschließen, eine verdoppelte Interaktionsrate.
Alibaba
Alibaba.com, die weltweit größte Business-to-Business (B2B)-Plattform mit über 200 Ländern und Regionen, sah sich Herausforderungen beim Aufbau eines überzeugenden Erlebnisses für mobile Webbenutzer gegenüber. Diese Form des Webs war ihre Hauptplattform für das Durchsuchen von Angeboten auf Mobilgeräten. Alibaba.com sah das mobile Web als Plattform, um Benutzer, die die App nicht verwenden, in die App zu bringen.
Viele bevorzugten es jedoch, im Browser zu bleiben. Sie erkannten, dass der Aufbau einer effektiven Präsenz im mobilen Web entscheidend sein würde. Sie wollten sowohl Erstbesuchern des Internets (in der Hoffnung, sie erneut zu engagieren) als auch Stammkunden (die der Website treu sind) ein ausgezeichnetes Benutzererlebnis bieten.
Als Ergebnis entwickelte Alibaba.com eine PWA, die zu einer schnellen, effizienten und zuverlässigen Nutzung des mobilen Webs führte.
- Nachdem sie ihre Websites in Progressive Webanwendungen (PWAs) umgewandelt hatten, sahen sie einen Anstieg der Gesamtbrowserkonversionen um 76 %.
- 14 % mehr monatlich aktive Benutzer auf iOS-Geräten; 30 % auf Android-Geräten.
- 4-fach höhere Interaktionsrate beim Hinzufügen von PWA zum Startbildschirm.
Unternehmen wie Alibaba und Flipkart haben dank PWAs deutliche Steigerungen bei der Kundenbindung und Konversionen gesehen. Dies wird höchstwahrscheinlich noch größere Vorteile für Menschen in Entwicklungsländern haben, die 2G- und 3G-Netzwerke auf Geräten mit begrenztem Speicher verwenden und ihnen so einen schnelleren und zuverlässigeren Webzugriff bieten.
Ist die Zukunft „progressiv“?
Wie immer hängt die Antwort auf Ihre Bedürfnisse ab. Die Entscheidung zur Erstellung von PWAs ergibt sich aus Analysen und Überlegungen, die von Zeit zu Zeit, von Projekt zu Projekt und von Benutzer zu Benutzer getroffen werden müssen.
Die Vereinfachung der Entwicklung ist jedoch für viele Projekte eine Anforderung, und daher sehen wir ein großes Potenzial darin, diese Technologie zu nutzen. Die Unterstützung großer Player zeigt deutlich, dass es sich nicht nur um einen vorübergehenden Trend handelt, sondern um die Zukunft für die Schaffung vieler Online-Erlebnisse auf mobilen Geräten.
Tomáš Vatrt
Business Development Manager