Angemeldet bleiben
Passwort vergessen?
Jetzt registrieren!
logo
  • OMT 2023
  • Events
    • OMT-Toolkonferenz
      Die kostenfreie Toolkonferenz für Toolanbieter
    • Agency Day
      Der Treffpunkt für Agenturinhaber
    • OMT-Clubtreffen
      OMT-Clubtreffen in ganz Deutschland
    • Eventrezensionen
      Die wichtigsten Konferenzen 2023 mit Rezensionen
  • Lernen
    • Seminare
      Lerne von den Besten mit unseren Hybrid-Seminaren
      • Online Marketing Seminar
      • SEO Seminar
      • SEO Seminar für Fortgeschrittene
      • Local SEO Seminar
      • Linkbuilding Seminar
      • Social Media Seminar
      • LinkedIn Seminar
      • Facebook und Instagram Ads Seminar
      • Leadgenerierung im digitalen Zeitalter
      • Google Ads Seminar
      • LinkedIn Ads Seminar
      • LinkedIn Advertising (Ads) Seminar für Fortgeschrittene
      • Advanced Content Marketing Seminar
      • Copywriting Seminar
      • Google Analytics Seminar
      • KNIME Seminar
      • Onpage SEO Seminar
      • Google Search Console Seminar
      • Matomo Seminar (Google Analytics Alternative)
      • WordPress Seminar
      • Amazon Seminar
      • Gendergerechte Sprache Seminar
      • Amazon Marketing Basics Seminar
      • Amazon SEO Seminar
      • Amazon PPC Seminar
      • Amazon DSP Seminar
    • Magazin
      Online Marketing Artikel von Experten
    • Webinare
      Kostenlose Online Marketing Webinare: Termine & Mediathek
      • Affiliate Marketing Webinare
      • Content Marketing Webinare
      • Facebook Ads Webinare
      • Google Ads Webinare
      • Google Analytics Webinare
      • SEO Webinare
      • Social Media Webinare
    • Podcast
      Geballtes Online Marketing Wissen für die Ohren
      • E-Mail Marketing Podcasts
      • Google Ads Podcasts
      • Inbound Marketing Podcasts
      • Influencer Marketing Podcasts
      • Marketing Podcasts
      • Performance Marketing Podcasts
      • Suchmaschinenmarketing Podcasts
      • Social Media Podcasts
      • SEO Podcasts
    • Speaker Academy
      Der Speaker Workshop mit Bane Katic
  • Downloads
    • Templates
      Kostenlose Templates & Vorlagen
      • YouTube Templates
      • LinkedIn Templates
      • Instagram Templates
      • E-Mail Templates
    • eBooks
      Große Auswahl an kostenfreien Ebooks
    • (Print-)Magazin
      Alle OMT-Magazinausgaben zum Download
    • Leadmagneten
      Auswahl aller OMT-Leadmagnenten
    • Studentenarbeiten
      Studentenarbeiten zum Thema Online Marketing
    • Toolvergleiche
      Kostenfreie Tool- und Softwarevergleiche
  • Services
    • Freelancervermittlung
      Finde die passenden Freelancer für Dein Projekt
    • SEO Check
      Kostenlose Quick-Analyse Deiner Website
  • Tools
    • Agentursoftware
    • Backlink Checker
    • Chatbot-Anbieter
    • CRM-Systeme
    • Event-Management-Software
    • Fulfillment Dienstleister
    • Keyword Recherche Tools
  • Talentpool
  • Agenturfinder
    • SEO Agentur
    • SEA Agentur
    • Google Ads Agentur
    • Social Media Agentur
    • Content Agentur
    • Webdesign Agentur
    • Online Marketing Agentur
    • E-Commerce Agentur
    • Webanalyse Agentur
    • Performance Marketing Agentur
    • Affiliate Marketing Agentur
Club-Login

    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:

Virtuelle Schätze, Reale Bindungen: NFT Community Management OMT Magazin

Virtuelle Schätze, Reale Bindungen: NFT Community Management Online Marketing

Dennis Eichler 11 Min

Kennst Du die berühmteste Community der Welt? Der Bored Ape Yacht Club (BAYC) ist ein Community Club voller Promis aus allen Branchen. Einzutreten ist denkbar einfach. Um Teil des exklusiven Zirke...
Neue Anforderungen: Barrierefreiheitsstärkungsgesetz verunsichert Online-Händler:innen OMT Magazin

Neue Anforderungen: Barrierefreiheitsstärkungsgesetz verunsichert Onl...

Online Marketing

Gabriele Horcher 9 Min

Die Aussagekraft der Store-Visit-Metrik OMT Magazin

Die Aussagekraft der Store-Visit-Metrik

Online Marketing

Nicole Bucher 11 Min

Das Schaufenster für Deine Landingpage: Der Above the Fold OMT Magazin

Das Schaufenster für Deine Landingpage: Der Above the Fold

Online Marketing

Sebastian Wolf 13 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/ https://de.depositphotos.com/
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
  • Podcast Marketing
  • Public Relations (PR)
  • Social Media Marketing
  • Suchmaschinenmarketing (SEM)
  • Suchmaschinenoptimierung
  • TikTok Marketing
  • Video-Marketing
  • Webanalyse
  • Webdesign
  • WordPress

Sonstiges

  • OMT Konferenz 2023
  • Toolkonferenz 2024
  • Agency Day 2024
  • OMT-Clubtreffen
  • Speaker Academy
  • SEO Check
  • Download-Center
  • kostenfreie Online Marketing-Ebooks
  • Studentenarbeiten
  • Templates
  • Online Marketing Trends 2023
  • Alle Experten des OMT
  • OMT-Club
  • OMT-Lexikon
  • Das OMT-Team
  • Jobs-Portal
  • Karriere beim OMT
  • Online Marketing Jobs
  • OMT-Botschafter
  • 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