Progressive Web Apps – Top oder Flop?

Was eine Progressive Web App eigentlich ist

Progressive Web App (PWA) ist eine Webseite, die ähnlich wie eine native App zu bedienen ist. Sie wird mit HTML, CSS und JavaScript erstellt, sind aber bezüglich Optik und Bedienung einer native App ähnlich, z.B. können sie Offline-fähig und können auf dem Desktop/Homescreen verankert werden” so die Definition von it-visions.de zum Thema Progressive Web Apps.

Progressive Web Apps werden nicht mit einer speziellen Technologie erstellt. Sie sind kein neues Framework, und sie sind keine neue Sprache. Stattdessen sind PWAs eine Sammlung von Strategien, Techniken und APIs (engl. Application programming interface), die es Entwicklern ermöglichen, Benutzern die gewohnte native mobile Erfahrung zu bieten.

Progressive Web Apps sind [1]:

  • Schnell, oft wird etwas auf dem Gerät des Benutzers in weniger als ein paar Sekunden gerendert.
  • Zuverlässig, auch ohne solide Datenverbindung und sogar auf alten Geräten.
  • Angenehm, denn durch die Aktivierung von Benachrichtigungen, selbst im Web, können Benutzer auf das hingewiesen werden, was in Ihrer App geschieht, selbst wenn der Browser nicht geöffnet ist. Benutzer können sogar eine Progressive Web App direkt auf dem Startbildschirm ihres Telefons installieren. Entwickler können das Symbol auswählen und sogar einen Startbildschirm einrichten.

Beispiele von PWA

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-Practice 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. [1]

Einige Fakten der Flipkart Progressive Web App [1]:

  • 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 [1]:

  • 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%

Technische Bestandteile von PWA

Im Folgenden werden einige wichtige Bestandteile von PWA erläutert. Neben den Service Workern, dem Manifest und der App Shell gibt es außerdem die Push API, welche Teil des Service Workers ist und Benachrichtigungen an den Nutzer sendet.

Service Worker

Service Worker sind vom Typ Web Worker und damit als Vermittler im HTTP Schema einzustufen. Sie arbeiten dabei ausschließlich verschlüsselt per SSL und sind selbst in Javascript implementiert. Der Browser dient dabei als Art Sandbox für die Service Worker.

Die Service Worker werden im Code initialisiert und registrieren sich dabei beim Browser als solche. Dadurch werden Offline Funktionalitäten, Hintergrundaktualisierungen und Push Notifications angeboten. Der Worker entscheidet dabei, ob eine Anfrage aus dem lokalen Browser Cache, oder aus dem Internet, der Quelle für die angefragte Information, geholt werden soll. Ist ein Klient offline, so bezieht der Service Worker seine Informationen ausschließlich aus dem lokalen Browser Cache. [2]

service-worker

Darstellung der Service Worker Funktionalität, Quelle [2]

Web App Manifest

Im Web App Manifest wird die Funktionalität von „Add to Home Screen“ ermöglicht. So kann die App, wie eine herkömmliche in den App Drawer des mobilen Betriebssystems gespeichert werden, ohne dass eine richtige Installation der App erforderlich wäre.

Das Manifest definiert unter anderem die Icons, den Name, die Start-URL (welche beim Öffnen der App durch den Browser geöffnet werden soll), das generelle Farbschema, sowie den Bildschirmmodus (horizontal vs. vertikal vs. Fullscreen). [4]

App Shell

Als App Shell bezeichnet man im Rahmen von PWA lediglich die Hülle der UI. Diese Hülle wird sofort bei wiederholtem Besuch aus dem lokalen Cache geladen. Der Inhalt wird anschließend asynchron dynamisch gefüllt. So wird dem Nutzer eine besonders schnelle Ladezeit assoziiert, obwohl möglicherweise das Laden des Inhalts länger dauert.

app-shell

Darstellung einer App-Shell in einer PWA. Quelle [4]

Vor- und Nachteile von PWA

Im folgenden werden Vorteile von Progressive Web-Apps erläutert.

  • Plattformübergreifend, denn sie laufen im Browser. Sobald ein Endgerät einen unterstützen Browser enthält, ist die PWA lauffähig.
  • Einfache Veröffentlichung, denn eine PWA Bedarf keiner Veröffentlichung in einem App-Store, sondern kann direkt über eine Webseite gestartet werden.
  • Keine Installation nötig, da eine PWA in einem Browser lauffähig ist, und keiner nativen Installation bedarf.
  • Schnell, da es sich um für den Use-Case optimierte Ressourcen handelt. So ist die App-Shell bereits auf dem Mobilfon vorgeladen.
  • Sofortige Updates, ohne extra Installation von Updates, denn ein neues Release kann zentral auf dem Webserver eingespielt werden.
  • Offline Verfügbarkeit wird durch die Implementierung der Web-Worker erzielt.
  • SEO, da es sich um HTML handelt und per Suchmaschine auffindbar ist.
  • Benutzerfreundlich, da es sich ausschließlich um native nachgebaute Elemente handelt und für den User nicht ersichtlich sein soll, ob es sich um PWA oder eine native App handelt.

Neben der ganzen Reihe an Vorteilen, haben PWAs leider im aktuellen Status auch noch einige Nachteile, die im folgenden näher erläutert werden.

  • Fehlende Unterstützung, keine vollständige Unterstützung von allen Browsern, da Apple die Umsetzung von PWA in Safari nur verlangsamt implementiert.
  • Fehlende Hardwarefeatures, einige Hardwarefeatures werden (noch) nicht unterstützt (z.B. Fingerprint).
  • Fehlende Berechtigungen, einige Berechtigungen können nicht angefragt werden, da der Browser nicht auf diese Zugreifen kann.
    • Telefon, Kalender, Kontakte
  • Fehlende Präsenz, niedrigere Präsenz durch Fehlen in App-Stores. Dies ist für viele Apps, wie eine SEO Optimierung auf Suchmaschinen zu verstehen. PWA können nicht in App-Stores gelistet werden.
  • Fehlende (externe) Qualitätssicherung, da die PWA direkt über eine Webseite veröffentlicht wird und keine zentrale Institution wie Apple oder Google Qualitätsüberprüfungen durchführen können.
pwa-support

PWA Unterstützung in Browsern, Quelle [5]

Fazit – Empfehlenswert, oder nicht?

Zusammenfassend lässt sich sagen, dass das Modell der PWA ein mögliches plattformübergreifendes App-Modell der Zukunft darstellt. Dies zeigt sich vor allem dadurch, dass große Unternehmen dem Trend folgen und ihre Applikationen ebenfalls als PWA anbieten, obowohl viele bereits native Implementierungen besitzen.

Zwei größere Probleme kristallisieren sich bei den PWAs heraus. Dies ist zum einen die Unterstützung durch mobile Browser, wie im Falle von Apple. Es ist verständlich, warum Apple wenig Interesse daran hat, diese neue Technologie zu unterstützen, schließlich würden PWAs Kunden vom App Store weg zum Web locken und damit zum Konkurrenten Google. Die Abhängigkeiten der Apple Entwickler und Nutzer wäre verloren und für Apple stellt der App Store eine große Einnahmequelle und Kundenbindung dar. Dennoch folgt Apple nun schließlich dem PWA Trend und implementiert die wichtigsten Features in den aktuellen iOS 11 Versionen.

Zum anderen ist das Thema der Auffindbarkeit von PWAs ein Problem. Da es keine zentrale Anlaufstelle, wie einen App-Store gibt, wird sich in Zukunft noch zeigen, ob Nutzer den Weg zur PWA über das Browsermenü finden, oder ob hier in der Spezifikation noch nachgeholfen werden muss.

Autor: Steffen Wagner

Quellen

[1] 2018 ist das Jahr der Progressive Web Apps (, URL: https://www.techdivision.com/blog/2018-ist-das-jahr-der-progressive-web-apps-pwa.html (Abgerufen am 17.06.2018)

[2] Beginning Progressive Web App Development (Dennis Sheppard) in Apress, ISBN: 978-1-4842-3089-3, DOI

[3] What is in a Web View? An Analysis of Progressive Web App Features When the Means of Web Access is not a Web Browser (Thomas Steiner, Google) in International World Wide Web Conferences Steering Committee, ISBN: 978-1-4503-5640-4, DOI

[4] Progressive Web Apps (Google Inc.), URL: https://developers.google.com/web/progressive-web-apps (Abgerufen am 17.06.2018)

[5] This is What Google Said About PWAs at I/O 2018 (Paul Thurrott), URL: https://www.thurrott.com/dev/159129/google-said-pwas-o-2018 (Abgerufen am 17.06.2018)

Advertisements

Kommentar verfassen

Bitte logge dich mit einer dieser Methoden ein, um deinen Kommentar zu veröffentlichen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s