Angemeldet bleiben
Passwort vergessen?
Jetzt registrieren!
logo
  • Events
    • Agency Day
    • OMT-Konferenz
    • Toolkonferenz 2024
  • Magazin
  • Podcast
    • Affiliate Marketing Podcasts
    • Digital Marketing Podcasts
    • E-Mail Marketing Podcasts
    • Google Ads Podcasts
    • Inbound Marketing Podcasts
    • Influencer Marketing Podcasts
    • Marketing Podcasts
    • Performance Marketing Podcasts
    • SEO Podcasts
    • Suchmaschinenmarketing Podcasts
    • Social Media Podcasts
  • Webinare
    • Affiliate Marketing-Webinare
    • Facebook Ads-Webinare
    • Google Ads-Webinare
    • Google Analytics-Webinare
    • SEO-Webinare
    • Social Media-Webinare
    • Content Marketing-Webinare
  • Seminare
  • Tools
  • eBooks
  • Dienstleister finden
    • Agenturfinder
    • Freelancervermittlung
Club-Login
  • Events
    • Agency Day
    • OMT-Konferenz
    • Toolkonferenz 2024
  • Magazin
  • Podcast
    • Affiliate Marketing Podcasts
    • Digital Marketing Podcasts
    • E-Mail Marketing Podcasts
    • Google Ads Podcasts
    • Inbound Marketing Podcasts
    • Influencer Marketing Podcasts
    • Marketing Podcasts
    • Performance Marketing Podcasts
    • SEO Podcasts
    • Suchmaschinenmarketing Podcasts
    • Social Media Podcasts
  • Webinare
    • Affiliate Marketing-Webinare
    • Facebook Ads-Webinare
    • Google Ads-Webinare
    • Google Analytics-Webinare
    • SEO-Webinare
    • Social Media-Webinare
    • Content Marketing-Webinare
  • Seminare
  • Tools
  • eBooks
  • Dienstleister finden
    • Agenturfinder
    • Freelancervermittlung

    Inhaltsverzeichnis:

  • Was ist eine PWA und welche Funktionen bietet sie?
  • PWA vs. native App
  • PWA vs. mobile Website
  • Die Komponenten einer PWA
  • Fallbeispiele
  • PWA Limits
  • Fazit
PWAs (Progressive Web Apps) – die Zukunft des Mobile Web?

PWAs (Progressive Web Apps) – die Zukunft des Mobile Web?

Lesezeit: 9 Min | Autor: Daniel Scholz |

Teile den Artikel

Im Gespräch sind Progressive Web Apps (PWAs) tatsächlich schon seit mehreren Jahren. Obwohl PWAs eine Vielzahl von Vorteilen bieten, werden sie nur von wenigen Marken genutzt. Völlig unberechtigt.

Im Folgenden schauen wir uns unter anderem an, warum PWAs die Zukunft des Mobile Web sind, wie sie funktionieren, welche Vorteile sie bieten und welche große Marken bereits eine PWA im Einsatz haben.

Was ist eine PWA und welche Funktionen bietet sie?

Eine allgemein anerkannte Definition für eine Progressive Web App zu finden ist schwer. Doch gibt ein Zitat von Alex Russell (Senior Staff Software Engineer bei Google) eine gute Hilfestellung:

titlebox-logo
“Progressive Web Apps are just websites that took all the right vitamins.”

Doch was meint er damit genau? Schauen wir uns an, welche Funktionen eine PWA bieten kann. Hier einige Beispiele:

  • Push Benachrichtigungen auf dem Endgerät
  • Als App auf dem Smartphone Startbildschirm ablegbar
  • Öffnet sich nahezu ohne Ladezeit (zumindest ab dem zweiten Besuch)
  • Kein Browser-Interface, die App wird vollflächig angezeigt
  • Sogar offline bedienbar
  • Videotelefonie und Chats

Eine PWA ist also eine Webseite, die zahlreiche Funktionen bieten und nutzen kann, die bislang nativen Apps (klassische Apps aus den bekannten App-Stores) vorbehalten waren.

PWA vs. native App

Gleich vorweg: Eine PWA ist kein vollwertiger Ersatz für eine native App!

Native mobile Anwendungen sind weiterhin zu bevorzugen, wenn ein größerer Funktionsumfang benötigt wird, es sich um hochfrequente Anwendungsfälle handelt und/oder ein höherer Sicherheitsstandart benötigt wird, zum Beispiel in der Finanz- oder Gesundheitsbranche.

Man kann davon ausgehen, dass native Apps, die dieses Level der Funktionalität und/oder Sicherheit nicht benötigen, früher oder später durch eine PWA ersetzt werden.

PWA vs. mobile Website

Es macht mehr Sinn den Fokus darauf zu legen, was für ein großes Upgrade eine PWA für eine mobile Webseite sein kann. Es existiert eine Vielzahl von Fallbeispielen aus fast jeder Branche, die eine signifikante Verbesserung über eine Vielzahl von KPIs nach der PWA-Implementierung aufzeigen.

Bevor wir uns allerdings einige dieser Fallbeispiele anschauen, schauen wir doch erstmal, welche Faktoren diese Leistungsverbesserungen bewirken. Google nutzt hierfür ein hilfreiches Akronym, um zu verstehen, warum PWAs so effektiv sind: FIRE

grafik-pwa_fire

FIRE = Fast / Integrated / Reliable / Engaging

 

Fast (Schnell)

Gerade im Mobile Web ist die Ladegeschwindigkeit einer Seite ein sehr bedeutender Faktor für den Erfolg. Eine PWA punktet hier mit seiner Hintergrundverarbeitung der Daten (was hier genau gemacht wird, erklären wir weiter unten im Artikel) und beschleunigt so enorm die Seitenladezeit.

Mit Einführung einer PWA konnte zum Beispiel Tinder die Seitenladezeit von 12 auf 5 Sekunden (Quelle: https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0) und Pinterest von 23 auf 5,6 Sekunden (Quelle: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154) senken.

Integrated (Integriert)

Progressive Web Apps bieten eine sich ständig weiterentwickelnde Reihe von Web-Fähigkeiten und integrieren sich damit enger an die Hardware als normale Webseiten. Die Nutzererfahrung erinnert damit eher an native Apps und fühlt sich somit für den Nutzer noch flüssiger und nahtloser an.

Reliable (Zuverlässig)

Mobile Nutzer haben nicht immer eine gute Internetverbindung, gerade in ländlichen Regionen. Manchmal steht auch gar kein Internet zur Verfügung. In diesen Fällen sorgt das Caching der PWA dafür, dass dem Nutzer trotzdem Inhalte zur Verfügung stehen, zumindest wenn diese keine Verbindung auf Grund von Aktualität voraussetzen.

Engaging (Engagieren)

Push Notifications sorgen spürbar für höhere Nutzerinteraktion und steigern die Zahl der wiederkehrenden Besucher. Die höhere Schnelligkeit und Verfügbarkeit sorgen ebenfalls für eine bessere User Experience. Alles in allem steigen somit die Nutzerzufriedenheit und die Bereitschaft bei der eigenen Marke zu bleiben.

Auffindbarkeit

Ein weiterer Vorteil einer PWA ist die Auffindbarkeit. Dadurch, dass eine PWA keine native App ist, bleibt sie somit auch im Web auffindbar. Suchmaschinen, externe Verlinkungen und Traffic aus sozialen Netzwerken steigern weiter die Nutzerzahlen.

Nicht zuletzt sind PWAs nicht von nativen App-Stores (Google Play Store, Apples App Store etc.) abhängig, müssen nicht installiert werden und verschrecken die Nutzer nicht mit unnötigen Zugriffsanfragen auf persönliche Daten.

Die Tatsache, dass es die Barriere beseitigt und dass man vor der Nutzung der Anwendung in einen der nativen App-Stores gehen muss, um die Anwendung zu finden, zu authentifizieren und zu installieren, bedeutet, dass es letztendlich einfacher ist, sie als Teil der Online-Strategie zu integrieren. Das ist ein greifbarer Wert für jede Marke!

Die Komponenten einer PWA

Machen wir einen kleinen technischen Ausflug und schauen uns an, wie eine PWA grob funktioniert und welche vier Komponenten eine PWA erst zu einer PWA machen:

1. Service Worker

Die wohl wichtigste Komponente, um das app-ähnliche Gefühl erzeugen ist der Service Worker. Dieser ermöglicht das Downloaden und lokale Zwischenspeichern von Dateien auf dem Endgerät.

Nutzt ein Besucher das erste Mal die PWA, wird der Service Worker aktiv und speichert ein Bündel an Dateien lokal auf dem Gerät. Dies beinhaltet auch Dateien und Inhalte von Unterseiten, die der Nutzer noch nicht aufgerufen hat. Da diese Inhalte nun auf dem Gerät zwischengespeichert sind, lädt die Webseite viel schneller und kann ohne große Ladezeiten alle Inhalte der PWA dem Nutzer ausgeben. Der Vorgang ist somit dem Installieren einer nativen App sehr ähnlich und ermöglicht auch die Bedienung offline.

PWA-Arbeitsweise

Arbeitsweise einer PWA // Quelle: https://developers.google.com/web/ilt/pwa/introduction-to-service-worker-slides

 

Service Worker sind auch der Teil, der es Websites ermöglicht, Push-Benachrichtigungen zu senden.

2. HTTPS

Service Worker funktionieren nicht ohne eine sichere Verbindung via HTTPS.

Da Google die Webmaster schon seit Jahren dazu animiert, die Webseiten mit einer verschlüsselten Verbindung auszuspielen, dies einer der wenigen bestätigten Rankingfaktoren seitens Google ist und seit Mai 2018 die DSGVO gilt, die bei der Übertragung von persönlichen Daten auch eine verschlüsselte Verbindung voraussetzt, stellt diese Komponente keine Überraschung dar.

3. Web Manifest

Jede PWA kommt außerdem mit einem Web Manifest. Dabei handelt es sich um eine JSON-Datei, die Informationen über die App enthält.

4. Icon

Jede PWA hat ein App-Icon – wie man es auch von nativen Apps kennt. Dieses Icon wird benutzt, um die App auf dem Startbildschirm wiederzuerkennen.

Fallbeispiele

Genug Theorie bis hierhin. Schauen wir uns nun einige Fallbeispiele von bekannten Unternehmen an und was eine Umstellung auf eine Progressive Web App für Auswirkungen auf diverse Kennzahlen hat.

1. About You

Das bekannte Fashion-Startup der Otto Gruppe, mit monatlich 15 Millionen Besuchern, setzt auf die Vorteile einer PWA (zum Beispiel Push-Notifications für Sonderangebote) und konnte durch die Umstellung hervorragende Ergebnisse erzielen:

grafik-pwa-about_you-1

Diese Grafik zeigt nur ein paar Verbesserungen bei About You, nach Wechsel auf eine PWA // Quelle: https://www.thinkwithgoogle.com/intl/de-de/insights/markteinblicke/wie-about-you-mit-progressive-web-apps-die-mobile-performance-pusht/

 

2. Tinder

Eine der bekanntesten Flirt-Apps ist Tinder. Schon 2017 stellte Tinder auf dem Chrome Dev Summit ihre PWA vor, welche nahezu alle Funktionen der nativen App abbilden kann. Beispielsweise die Freigabe des Standortes der Nutzer, Push-Notifications oder auch das bekannte nach links und rechts wischen („swipen“), um potentielle Bekanntschaften ab- oder auszuwählen.

Etliche Verbesserungen der Kennzahlen und der Nutzererfahrung konnten damit erlangt werden. Zum Beispiel:

grafik-pwa-tinder-1

Diese Grafik zeigt nur ein paar Verbesserungen bei Tinder, nach Wechsel auf eine PWA // Quelle: https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0

 

3. Pinterest

Auch das Unternehmen Pinterest hat sich dazu entschlossen, seine mobile Webseite neu als PWA aufzusetzen. Innerhalb eines Quartals stand schon die PWA den Nutzern zur Verfügung und im Vergleich zur alten mobilen Website sprechen die Zahlen einen deutlichen Erfolg:

grafik-pwa-pinterest-1

Diese Grafik zeigt nur ein paar Verbesserungen bei Pinterest, nach Wechsel auf eine PWA // Quelle: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

 

Wer mehr Case Studies sehen möchte, besucht am besten diese Seite von Google, auf der etliche PWA Projekte, welche zwischen 2015 und 2018 umgesetzt wurden, vorgestellt werden.

PWA Limits

Natürlich hat eine Progressive Web App auch mit Einschränkungen zwischen den Browsern und den Betriebssystemen auf dem Endgerät zu kämpfen.

Beispielsweise kann eine PWA auf iOS nur bis zu 50 MB an Daten speichern, welche für die Offline-Nutzung verwendet werden können. Auch wird dieser Zwischenspeicher auf dem Gerät geleert, wenn der Nutzer die App einige Wochen lang nicht öffnet.

Wie oben schon erwähnt, bestehen auch Einschränkungen auf gewisse Funktionen, wie zum Beispiel:

  • Bluetooth
  • Touch und Face ID nicht oder nur eingeschränkt möglich
  • Keine Siri-Unterstützung

Unter iOS muss das Hinzufügen der App zum Startbildschirm noch manuell vom Nutzer über die Freigabefunktion im Browser geschehen, während es Android bereits erlaubt, dem Nutzer eine Aufforderung auf sein Gerät zu schicken.

PWA-Startbildschirm-hnzufügen

Die Grafik zeigt auf der linken Seite das recht einfache Hinzufügen der App unter Android und auf der rechten Seite der umständlichere Weg unter iOS.

 

Es herrscht hier jedoch eine enorme Dynamik und es ist davon auszugehen, dass es in den kommenden Monaten und Jahren mehr Konsistenz und weniger Einschränkungen im Bereich der PWAs geben wird.

Fazit

Auch wenn PWAs noch mit einigen Einschränkungen zu kämpfen haben, können diese in Zukunft eine Menge an nativen Apps ersetzen und somit den Entwicklungs- und Wartungsaufwand deutlich verringern. Für mobile Seiten gibt es nur wenige Gründe nicht umzusteigen, die Vorteile überwiegen deutlich. Der weitere Ausbau der Funktionen und der steigenden Kompatibilität mit den Betriebssystemen der Endgeräte mache PWAs in Zukunft noch interessanter.

Mehr zum Thema Online Marketing findest Du hier!
omt logo

Diesen Artikel jetzt als Podcast anhören

Jetzt anhören auf: Spotify | Apple Podcast | Google Podcast

Teile den Artikel
Wie ist Deine Meinung zu dem Thema? Wir freuen uns über Deinen

Diesen Artikel bewerten

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Noch keine Bewertungen)
Loading...

Willst Du im Online Marketing besser werden?

Mit unserem Newsletter schicken wir Dir regelmäßig unsere neusten Webinare und Magazinartikel zu den unterschiedlichen Online Marketing Themen. Mehr als 10.000 Abonnenten nutzen es bereits!

Daniel Scholz

Daniel Scholz

Daniel Scholz ist ausgebildeter Informatikkaufmann, leidenschaftlicher Webentwickler und Vollblut-Nerd bei der Digitalagentur DREILAUT. Seine Leidenschaft ist es, Webprojekte jeglicher Art umzusetzen und dabei den Fokus auf schlanke, effiziente und nutzerfreundliche Programmierung zu legen. Gerade die neuen Möglichkeiten wie react & co. bereiten ihm viel Freude und daher ist er auch ein großer Fan von Progressive Web Apps.

Weitere interessante Artikel zum Thema:

Bewertungsportale im Vergleich – Pro & Contra OMT Magazin

Bewertungsportale im Vergleich – Pro & Contra Online Marketing

Mario Jung 29 Min

Bewertungsportale sind für viele Kunden und Kundinnen inzwischen Gang und Gebe. Laut einer Studie von BrightLocal aus dem Jahr ...
Wie Du mit Hilfe des Kano-Modells Deine Kunden begeisterst OMT Magazin

Wie Du mit Hilfe des Kano-Modells Deine Kunden begeisterst

Online Marketing

Christoph Konitzer 12 Min

Content Management – so kannst Du Deine Inhalte effektiv verwalten OMT Magazin

Content Management – so kannst Du Deine Inhalte effektiv verwalten

Online Marketing

Eva Korz 16 Min

App Analytics – Die wichtigste Grundlage für die Optimierung Deiner Anwendung OMT Magazin

App Analytics – Die wichtigste Grundlage für die Optimierung Deiner...

Online Marketing

Lisa Figas 29 Min

Abonnieren
Benachrichtige mich bei
guest
guest
0 Comments
Inline Feedbacks
View all comments
https://www.reachx.de https://www.salesviewer.com/?utm_source=omt&utm_medium=partner&utm_campaign=omt-footer-partnerlink https://www.pure-host.de/
Du bist hier: 
  • Home
  • »
  • Online Marketing
  • »
  • PWAs (Progressive Web Apps) – die Zukunft des Mobile Web?

Alles über…

  • Affiliate Marketing
  • Amazon Marketing
  • Amazon SEO
  • Content Marketing
  • Conversion Optimierung
  • Digital Marketing
  • Direktmarketing
  • E-Commerce
  • E-Mail-Marketing
  • Facebook Ads
  • Google Analytics
  • Google Ads (SEA)
  • Google My Business
  • Growth Hacking
  • Inbound Marketing
  • Influencer Marketing
  • Internet Marketing
  • Linkbuilding
  • Local SEO
  • Marketing
  • Online Marketing
  • Performance Marketing
  • Pinterest Marketing
  • Public Relations (PR)
  • Social Media Marketing
  • Suchmaschinenmarketing (SEM)
  • Suchmaschinenoptimierung
  • TikTok Marketing
  • Video-Marketing
  • Webanalyse
  • Webdesign
  • WordPress

Sonstiges

  • Toolkonferenz 2024
  • Agency Day
  • Download-Center
  • kostenfreie Online Marketing-Ebooks
  • Studentenarbeiten
  • Templates
  • Online Marketing Trends 2022
  • SEO Check – Wir analysieren Deine Webseite
  • Alle Experten des OMT
  • OMT-Club
  • OMT-Lexikon
  • Das OMT-Team
  • Jobs
  • Karriere beim OMT
  • Newsletter

Rechtliches

  • AGB
  • Datenschutzerklärung
  • Impressum

OMT GmbH

Feldstraße 7
65719 Hofheim am Taunus
tel:06192 - 9626152
[email protected]
t

OMT-Bewertungen

https://www.omt.de/uploads/2021/01/OMT-Social-Bewertungen.png https://www.omt.de/uploads/2021/01/OMT-Google-Bewertungen.png https://www.omt.de/uploads/2021/01/OMT-Facebook-Bewertungen.png
wpDiscuz
0
0
Interessanter Artikel? Wir freuen uns über Deinen Kommentarx
()
x
| Antworten