2018 ist das Jahr der Progressive Web Apps (PWA)

Zu Jahresbeginn werden gerne Prognose abgegeben. Im Webumfeld stellt sich daher auch jedes Jahr erneut die Frage: "Welcher Trend wird dieses Jahr dominieren? Von 2013, das als "Jahr des Responsive Web Design" bezeichnet werden kann, und Googles Ankündigung von Mobilegeddon im April 2015, als damit begonnen wurde, die Rankings mobiler Websites in den mobilen Suchergebnissen zu verbessern, bis 2016, als Accelerated Mobile Pages (AMP) eingeführt wurden, und 2017, als progressive Web-Apps (PWA) vom Chrome-Browser unterstützt wurden, entwickelte sich manche Web-Technologie rasant und sorgte quasi für neue Standards.

Abb.: Entwicklung der Suchhäufigkeit nach “Progressive Web Apps” über Google Trends

 

Nachdem Mobile in nahezu allen Bereich angekommen ist gehen wir auch davon aus, dass gerade die Kombination aus E-Commerce und Mobile und die damit einhergehenden (neuen) Technologien in diesem Jahr besonders im Fokus stehen werden - hierzu zählen zweifelsohne auch die sogenannten Progressive Web Applications (PWA) .

 

powered by YouTube: Beim Abspielen des Videos wird eine direkte Verbindung zu einem Server von YouTube aufgebaut. Näheres erfahren Sie in unserer Datenschutzerklärung.

 

WAS SIND PROGRESSIVE WEB APPS (PWA)?

Beim technologischen Ansatz der Progressive Web Apps (PWA) wird versucht, das Beste aus den beiden Welten Web und native Apps heraus zu holen und zu kombinieren. Native Apps haben in der Vergangenheit durch Funktionen wie Push-Benachrichtigungen, die Nutzung diverser Sensoren im Smartphone, Zugriff auf die Kamera, Offline-Bearbeitung, fließende Animationen und Übergänge, Aufruf über App-Symbole auf dem Homescreen sowie eine meist sehr flüssige Verwendung geglänzt

Bei mobilen Web Apps handelt es sich dagegen um JavaScript-Anwendungen, die im Browser funktionieren und die versucht haben, einige der nativen App-Funktionen ins Web zu bringen, jedoch nicht in der Lage waren diverse Funktionen “echter” (nativer) Apps bereit zu stellen, zum Beispiel Push-Benachrichtigungen. Mit der Einführung neuer Web-APIs schließen Progressive Web Apps jetzt genau diese Lücke und bieten ein volles, app- ähnliches Erlebnis auch bei Web App, auf die zudem direkt zugegriffen werden kann ohne Installation über einen Appstore o.ä..

Progressive Web Apps (PWA) charakterisieren sich dabei insbesondere durch die folgenden Eigenschaften:

  • Nutzung von HTTPS
  • Offline-Modus
  • Push-Benachrichtigungen
  • Möglichkeit, die App auf dem Homescreen abzulegen.

Google definiert PWA dabei wie folgt. Eine Progressive Web App ist:

  • Progressiv - Funktioniert für jeden Benutzer, unabhängig vom verwendeten Browsers und wird permanent verbessert.
  • Responsive - Passt sich jedem Device an: Desktop, Handy, Tablett oder was auch immer als nächstes kommt.
  • Unabhängig von der Konnektivität - Erweitert durch sog. Service Worker, die auch offline oder in Netzwerken mit geringer Qualität funktionieren.
  • App-like - Fühlt sich an wie eine native App, da das App Shell-Modell die Anwen- dungsfunktionalität vom Anwendungsinhalt trennt.
  • Aktuell - Immer auf dem neuesten Stand dank des Update-Prozesses der Service Worker.
  • Sicher - Wird über HTTPS bereitgestellt, um ein Ausspionieren zu verhindern und sicherzustellen, dass Inhalte nicht manipuliert wurden.
  • Erkennbar - Ist dank des W3C-Manifests und des Registrierungsumfangs für Service Worker als "Anwendung" erkennbar, so dass Suchmaschinen sie finden können.
  • Wiedereinschaltbar - Erleichtert die Wiedereinschaltbarkeit durch Funktionen wie Push-Benachrichtigungen.
  • Installierbar - Ermöglicht Benutzern das Hinzufügen von Anwendungen auf ihrem Startbildschirm, ohne den Umweg über eine Installation aus einem Appstore.
  • Verteilbar - Einfache Freigabe der Anwendung über URL, erfordert keine aufwändige Installation.

Heute werden Progressive Web Apps von Chrome und Opera vollständig unterstützt. Firefox unterstützt fast alle Funktionen. Microsoft Edge arbeitet daran. Der Internet-Browser von Samsung hat im vergangenen Jahr große Fortschritte gemacht. Und auch Apple ist endlich auf den mobilen Zug aufgesprungen: So sind sog. Service-Worker, eine Schlüsselkompo- nente zur Unterstützung progressiver Webanwendungen, in Safari 11.1 für iOS 11.3 und macOS 10.13.4 verfügbar.

Um die Dinge ins rechte Licht zu rücken: Bereits 2015, als Google die Nutzung von Mobile-Freundlichkeit als Ranking-Signal bestätigte (und damit alle Sites bestrafte, die keine Mobile-Strategie haben), hatten 40% der untersuchten Sites KEINE Mobile-Web-Strategie!

Offensichtlich ist dies kein zufriedenstellendes Ergebnis und die Hauptgründe liegen in der Tatsache, dass weniger als 2 % Service Worker oder eine Manifestdatei installiert haben. Im Wesentlichen zeigen aktuelle Analysen, dass der Mehrheit der E-Commerce-Websites immer noch eine oder mehrere der wichtigsten Progressive Web-App-Funktionen wie Offline-Modus, Push-Benachrichtigungen oder das Hinzufügen zum Homescreen fehlen.

Auf der anderen Seite ist interessant, dass die HTTPS-Nutzung aus den Vorjahren (25%) inzwischen auf 75% gestiegen ist. Der Grund hierfür ist einfach nachzuvollziehen. Was im Jahr 2014 begann, als Google HTTPS als Ranking-Signal ankündigte, wurde 2016 massiv ausgedehnt, indem das Unternehmen ankündigte, dass ab Januar 2017 (Chrome 56) HTTP-Seiten, die Passwörter oder Kreditkarten sammeln, als nicht sicher markiert werden.

 

DIE BESTEN PROGRESSIVE WEB APPS LIEFERN AUCH BESSERE ERGEBNISSE IN BEZUG AUF SEO

Jede einzelne Seite einer Progressive Web App wird von Google als Javascript-Seite betrachtet. Für eine PWA kann eine neue URL erstellt werden und der Googlebot wird sie crawlen, genau wie dies für sonstige öffentlich zugängliche Webseiten der Fall ist. Dennoch kann es Crawling-Probleme mit PWAs geben, wenn bei der Implementierung nicht auf einige grundlegende Dinge geachtet wird um eine möglichst einfache und korrekte Indizierung zu ermöglichen.

Über 90 % der untersuchten URLs haben einen durchschnittlichen SEO-Score von 85 %. Um einen solchen Wert zu erreichen sollte bei der Implementierung insbesondere auf die folgenden Punkte geachtet werden:

  • Wenn die PWA Inhalte aus verschiedenen Quellen zur Verfügung stellt, müssen Canonical-Tags verwendet werden, um Contentprobleme zu vermeiden.
  • Bei der Generierung von URLs für PWAs muss geprüft werden, ob diese frei von "#" sind. Wenn die URL ein Hash-Symbol enthält, ignoriert Google alles andere danach. Hier bleibt man auf der sicheren Seiten, wenn die “traditionellen” SEO-Regeln in Bezug auf URL-Strukturen auch für PWAs berücksichtigt werden..
  • Es ist wichtig zu testen, wie der Googlebot die Seiten “sieht” und indiziert. Dazu kann  das Google-Tool “Fetch and Render” verwendet werden, das in der Google Search Console verfügbar ist.
  • Vermeiden Sie das AJAX-Crawling-Schema auf neuen Websites
  • Stellen Sie sicher, dass die benötigten Inhalte nicht durch die robots.txt blockiert werden.
  • Verringern Sie nach Möglichkeit die Anzahl der eingebetteten Elemente in der Seite (insbesondere die Anzahl der JavaScript-Dateien, die für die Darstellung der Seite erforderlich sind), da diese möglicherweise nicht vollständig geladen werden.
  • Verwenden Sie eine genauen Sitemap-Datei, um Änderungen an Ihrer Website zu markieren.

Für große Websites mit vielfältigen Funktionen, kann der Einsatz einer Progressive Web App häufig großen Sinn machen, allerdings sollte hier berücksichtigt werden, dass die Optimierung von PWAs meist etwas mehr Aufwand als bei einer “normalen” Webseite bedeutet.

 

BEST-PRACTICE- UND ACCESSIBILITY-SCORE BEI PROGRESSIVE WEB APPS

Wenn wir einen Blick auf die erfolgreichsten Progressive Web Apps werden, haben diese häufig die folgenden Parameter gemein:

  • Verwendung von HTTP/2
  • Keine Verwendung von Front-End-JavaScript-Bibliotheken mit bekannten Sicherheitslücken (ältere Versionen)
  • Der `short_name` der App muss weniger als 12 Zeichen lang sein, um sicherzu- stellen, dass dieser nicht auf dem Homescreens abgeschnitten wird.
  • Keine Protokollierungsfehler, die durch Fehler in der Netzwerkanfrage und andere Browserprobleme verursacht werden können.
  • Vermeidung von Application Cache oder WebSQL DB, da beide veraltet sind.
  • Vermeidung einer Anfrage zur Geolokalisierung beim Laden der Seite. Nutzer reagieren hier häufig sehr misstrauisch, wenn Webseiten oder Apps ohne Kontext nach ihrem Standort fragen
  • Anzeige von Bilder mit korrektem Seitenverhältnis

Im Hinblick auf die Accessibility gibt Lighthouse mehrere Empfehlungen ab und regt neben durch Durchführung automatisierter Tests auch dazu an, manuelle Tests durch- zuführen.

 

MANIFESTDATEIEN WERDEN DREIMAL HÄUFIGER ALS SERVICE WORKER VERWENDET

Beim sog. Web-App-Manifest handelt es sich um eine einfache JSON-Datei, die Entwicklern die Möglichkeit gibt, das Erscheinungsbild von Apps für den Benutzer beim ersten Aufruf bzw. beim erneuten Starten zu bestimmen.

Web-App-Manifestdateien bieten die Möglichkeit, ein Lesezeichen einer Website auf dem Home-Bildschirm eines Geräts zu speichern. Wenn eine PWA auf diese Weise gestartet wird:

  • hat sie ein eindeutiges Symbol und einen eindeutigen Namen, so dass die Benutzer diese von anderen Websites unterscheiden können.
  • zeigt sie dem Benutzer eine Statusmeldung o.ä. an, während Inhalte herunter- geladen oder aus dem Cache wiederhergestellt werden.
  • bietet sie dem Browser standardmäßige Darstellungseigenschaften, um abrupte Übergänge zu vermeiden, wenn Website-Inhalte verfügbar werden.
  • geschieht dies alles durch den einfachen Mechanismus der Metadaten in einer Textdatei.

Sobald die Manifestdatei erstellt und in die PWAs-Domäne hochgeladen wurde, muss sie wie folgt auf allen Seiten, die die Webanwendung umfassen, enthalten sein:

Was einen Service Worker betrifft, so handelt es sich im Wesentlichen um eine JavaScript-Datei, die unabhängig vom Haupt-Thread des Browsers läuft, Netzwerkanfragen abfangen, Ressourcen aus dem Cache zwischenspeichern oder abrufen und Push-Nachrichten ausliefern kann. Der Service Worker kann Push-Mitteilungen von einem Server empfangen, auch wenn die App nicht aktiv ist. Dadurch kann die App Push-Benach- richtigungen für den Benutzer anzeigen, auch wenn sie nicht im Browser geöffnet ist.

Service Worker ermöglichen es Anwendungen, Netzwerkanfragen zu kontrollieren, diese Anfragen zwischenzuspeichern, um die Leistung zu verbessern und Offline-Zugriff auf gecachte Inhalte zu ermöglichen. Eine Sache sollte hier aber berücksichtigt werden; Service Worker funktionieren nur über HTTPS.

Aktuelle Untersuchungen zeigen jedoch, dass derzeit lediglich 1% der untersuchten URLs ein SSL-Zertifikat verwenden und demnach Service Worker richtig einsetzen.

Dies mag daran liegen, dass die Service Worker 2017 noch nicht vollständig unterstützt wurden, da Safari erst Anfang diesen Jahres dem PWA-Trend beitrat.

Die Tatsache, dass Service Worker derzeit nur sehr vereinzelt zum Einsatz kommen, wirkt sich daher auch direkt auf die Interaktion mit mobilen Nutzern aus. Dies ist äußerst ungeschickt, da Push-Benachrichtigungen das Engagement von Usern angeblich um bis das Vierfache (!!!) erhöhen und diese Nutzer doppelt so lange auf den Websites verbringen. Beispielsweise verbesserte AliExpress nach dem Rollout seiner PWA die Conversionraten für neue Benutzer in allen Browsern um 104% und erhöhte die iOS-Conversions um 82%, obwohl iOS (damals) nicht den vollen Funktionsumfang progressiver Web-Applikationen unterstützt.

 

WAS SAGEN ENTWICKLER?

Was die Entwickler betrifft, so sehen ihre Vorlieben für die Erstellung progressiver Webanwendungen aktuell wie folgt aus:

  • 40% verwenden Angular 2.X, 37% ReactJS und nur 27% VueJS
  • Bootstrap (50%), Material UI (33%) und Semantic UI (10%) sind die am häufigsten verwendeten CSS-Frameworks
  • Die wichtigsten PWA-Features: Caching/Offline (über 80%). 66% erachten "Add to HomeScreen" oder eine Installationsmöglichkeit als obligatorisch für eine PWA, während 60% Push-Benachrichtigungen als “Muss” bei einer Progressive Web App ansehen.

 

Auf die Frage nach den Unternehmen, die von der Implementierung einer progressiven Webapplikation profitieren können, antworteten 66%, dass Nachrichtenseiten & Magazine am meisten von den Vorteile der PWA profitieren können, während E-Commerce- Anwendungen mit 55 % der Stimmen auf Platz 2 landen.

 

WOHIN GEHT DIE REISE?

Während Progressive Web Apps darauf abzielen, die User Experience im Web zu verbessern, ist es trotz dem einsetzenden Hype zu dieser Technologie aus unserer Sicht wichtig zu verstehen, dass nicht jedes Unternehmen eine PWA benötigt. Unternehmen sollten die Faktoren berücksichtigen, die eine app-ähnliche Erfahrung im Web erfordern. Wenn Ihr Unternehmen eine Website mit geringerem Umfang, weniger Medieninhalt und schneller Ladezeit hat und die User leicht auf die von Ihnen bereitgestellten Informationen und Dienstleistungen zugreifen können, wird eine gewöhnliche Webseite häufig vollkommen ausreichend sein.

Ein interessantes Praxisbeispiel aus dem E-Commerce-Umfeld stammt von Flipkart, einem der größten E-Commerce-Händler in Indien. Flipkart begannen mit dem Bau von Flipkart Lite, einer Progressive Web App, die das Beste aus den beiden Welten Web und native App kombiniert. Flipkart dient hierbei auch als Best-Practise Beispiel von Google für PWAs.

Flipkart wollte mit mobilen Web Usern genauso wie mit Usern der nativen App wieder in Kontakt treten können. Das Unternehmen implementierte hierzu eine Eingabeaufforderung "Add to Homescreen". Inzwischen kommen 60% aller Besuche bei Flipkart Lite von Leuten, die die Website über das Homescreen-Symbol starten.

Einige Fakten der Flipkart Progressive Web App

  • Erhöhung der Besuchszeit im Vergleich zur mobilen Webseite von 70 Sekunden auf 3,5 Minuten (!!!)
  • 40% höhere Interaktionen
  • 70% höhere Conversionrate bei Besuchern über “Add to Homescreen”
  • 3x geringere Datenmenge

Ein weiteres beeindruckendes Beispiel einer erfolgreichen Progressive Web App stammt von Lancôme. Lancôme ist eine Kosmetikmarke des französischen Konzerns L’Oréal, die vor kurzem eine PWA eingeführt und damit die bestehende Mobile Website abgelöst hat. Mit der neuen Technologie konnten folgende Ergebnisse erzielt werden:

  • Verkürzung der Zeit für die Interaktion um 84%
  • Verringerung der Bouncerate um 15%
  • Öffnungsrate von 18% bei Push-Benachrichtigungen
  • Conversionrate von 8% bei Push-Benachrichtigungen
  • Erhöhung der Mobile-Session bei IOS um 53%

 

Für E-Commerce-Unternehmen, die ihren Kunden (und potenziellen Kunden) bestmögliche User Experience auf mobilen Endgeräten bieten und die Interaktion sowie auch die Käufe erhöhen möchten, sollte die Einführung einer Progressive Web App in jedem Fall in Betracht gezogen werden. Aktuell gehört die Technologie noch nicht zum Standard, aufgrund der zum Teil doch recht massiven Vorteile, könnte sich dies allerdings recht bald ändern.

 

MAGENTO PWA STUDIO

Auch Magento hat das Potential und die Vorteile dieser Technologie längst erkannt und arbeitet gemeinsam mit Google an einem PWA-Kit für Magento. Mit der Magento PWA Studio genannten Suite an Tools, können zukünftig Progressive Web Apps für Magento- Shops schnell und einfach implementiert werden, womit Magento-Shopbetreiber zukünftig in der Lage sind ihren Mobilkunden ein noch besseres Einkaufserlebnis bieten zu können. Wir gehen davon aus, dass Magento PWA Studio auf der diesjährigen Magento Imagine Konferenz Ende April in Las Vegas vorgestellt wird.

powered by YouTube: Beim Abspielen des Videos wird eine direkte Verbindung zu einem Server von YouTube aufgebaut. Näheres erfahren Sie in unserer Datenschutzerklärung.

 

Nachfolgend noch ein paar interessante Links und Quellen für den Einstieg:

Verwandte Artikel

Magento kooperiert mit Google für Progressive Web Apps

Auf der Magento Live Konferenz in London im Sommer diesen Jahres gab das Unternehmen bekannt, dass sie gemeinsam mit Google an sog. Progressive Web Apps (PWA) arbeiten. Dieser Technologieansatz wird von Google seit geraumer Zeit sehr stark supported, da sich der Suchmaschinen-Gigant diverse Vorteile für Endkunden durch bessere Ladezeiten sowie optimierte Online-Experience durch Nutzung von Hardware-Features moderner Mobile-Devices (z.B. Zugriff auf die Kamera sowie integrierten Sensoren) aufgrund eben dieser Technologie verspricht.
Mehr lesen

Neueste Posts

3 Anzeichen, dass Sie in einem guten Meeting waren Erste X-Conference am 28. September 2018 an der Hochschule Rosenheim Return on Time Investment – eine Metrik für dich, nicht den Meeting-Moderator Warum willst du Agilität messen?? 3 kurze Ideen dazu Marshmallow Challenge an der Hochschule der Bayerischen Wirtschaft (HDBW)

Archiv

August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juli Juni Mai April März Februar Januar
Dezember November Oktober September August Juni Mai April Februar Januar
Dezember November Oktober September August Juli Juni März Februar
Oktober September August Juli Juni Mai April März Januar
Dezember November Oktober September August Juli Mai April Februar
November Oktober September April Februar
Dezember September Juni Mai Februar Januar
Juli Mai April März Februar Januar
September August Juli März
Oktober September Juli Juni Mai März Februar
Februar

Kategorien

E-Commerce Unternehmensmeldung Online-Marketing Magento Commerce Neos TYPO3 SEO SEA Usability Digitale Transformation Agile Projektentwicklung Corporate Web Analytics Künstliche Intelligenz Mobile Marketing Social Media Veranstaltungen Research & Development
powered by YouTube: Beim Abspielen des Videos wird eine direkte Verbindung zu einem Server von YouTube aufgebaut. Näheres erfahren Sie in unserer Datenschutzerklärung.

Unser Herz schlägt online -
Deins Auch?

 

Wir stellen uns jeden Tag neuen Heraus-forderungen des Online-Business – immer auf der Suche nach spannenden Lösungs-ansätzen und sinnvollen Technologien. Eine Vielzahl namhafter Kunden vertrauen auf das Online Know-how „Made in Kolbermoor / Rosenheim und München“. 

Lust auf TechDivision? Hier geht zu unseren Stellenanzeigen

eStrategy Magazin


Erfahren Sie mehr zu den Themen E-Commerce, Online-Marketing, Mobile, Projektmanagement, Webentwicklung und E-Recht in unserem kostenlosen Online-Magazin.

Jetzt herunterladen!

Whitepaper:
Agiles Projektmanagement


In unserem kostenlosen Whitepaper versuchen wir Basiswissen und Erfahrungen aus vielen Jahren täglicher Projekt- und Unternehmenspraxis zu vermitteln, mit denen Sie die Anforderungen des Arbeitslebens von Heute besser bewältigen können.

Jetzt herunterladen!

Autor

Haben wir Ihr Interesse mit unserem Blog geweckt?

Wir sind der richtige Partner für anspruchsvolle Projekte im Bereich E-Commerce, Corporate Web, Consulting und Online-Marketing. Sprechen Sie mit uns!

Autor

Josef Willkommer Geschäftsführer / CMO