Progressive Web App

Progressive Web App

Basisdaten

Erscheinungsjahrca. 2015
AusführungsumgebungWebbrowser
ProgrammierspracheJavaScript, JSON

Eine Progressive Web App (PWA) ist eine Website, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren.[1] Sie kann daher auch als Symbiose aus einer responsiven Webseite und einer App beschrieben werden. Progressive Web Apps können wie eine Webseite mit HTML5, CSS3 und JavaScript erstellt werden. Zusätzlich dienen sogenannte Service Worker durch optimiertes Caching den Offline-Funktionalitäten. Zur Kommunikation zwischen Webclient und Webserver ist das HTTPS-Protokoll vorgeschrieben.

Mehr und mehr Menschen nutzen das Smartphone, um auf das Internet zuzugreifen. In Deutschland betraf der Anteil der Internetnutzer via Smartphone schon im Jahr 2014 etwa 69 % aller Internetnutzer.[2] Bisher bestand das Problem für Webseitenbetreiber darin, dass sowohl eine responsive oder mobile Webseite als auch zusätzlich eine native App entwickelt werden musste, wollte man sich am Markt behaupten. Eine PWA soll die doppelte Entwicklung überflüssig machen, da sie wie eine Webseite mittels URL aufgerufen werden kann und gleichzeitig Offline-Funktionalitäten bereitstellt.

Begriff / Definition

Der Begriff „Progressive Web App“ setzt sich zu einem Teil aus den Web Apps (dt. Webanwendungen) zusammen, die mit Hilfe der Webtechniken HTML, CSS und JavaScript entwickelt werden. Der andere Teil ergibt sich aus dem Begriff des Progressive Enhancement, der im Jahre 2003 von Steven Champeon vorgestellt wurde.[3] Dabei handelt es sich um eine Methode zur Entwicklung von Webseiten, die verlangt, dass die grundlegenden Funktionen einer Webanwendung in jedem Browser lauffähig sind. Neuartige Funktionen sollen nur dann zur Verbesserung der Nutzererfahrung verwendet werden, wenn sie vom Browser unterstützt werden. Dieses Vorgehen ist nötig, weil Progressive Web Apps u. a. Service-Worker-Techniken verwenden, die nur in modernen Browsern funktionsfähig sind.

Die folgende Definition fasst alle relevanten Eigenschaften von Progressive Web Apps zusammen:[4]

„Progressive Web Apps sind responsive und per HTTPS übertragene Webanwendungen, die nach dem Grundsatz des Progressive Enhancement die Fähigkeiten der Browser für eine fortschreitende Verbesserung nutzen, wodurch mittels Offlinefunktionalität über Service Worker, eine Installation anhand eines Web App Manifests und Push Notifications eine zuverlässige, motivierende und native Nutzererfahrung gewährleistet wird.“

Funktionsweise

Eine Progressive Web App wird gestartet, indem man z. B. im Browser den URL des Webservers eingibt und damit die erste Anfrage sendet. Der Webserver nimmt die Anfrage entgegen und übergibt sie an die PWA, die hier als eine Webanwendung fungiert. Diese erzeugt oder lädt den HTML-Quellcode einer Webseite, der vom Webserver zurück zum Browser des Benutzers geschickt wird (HTTPS-Response).

Der Nutzer sieht eine Webseite, die aufgrund des responsiven Designs an sein Endgerät angepasst ist. Obwohl die Progressive Web App über einen URL abgerufen wurde, kann der Benutzer ein Icon auf den Bildschirm des Smartphones ziehen oder Push Notifications erhalten und die Seite auch offline verwenden. Die auf Progressive enhancement beruhende Technik soll Nutzern je nach verwendetem Gerät die bestmögliche User Experience bieten.

Technisch wird dies mit HTML5, CSS3, JavaScript, Service Worker und optional einem Framework wie Angular bzw. einer Bibliothek wie Polymer umgesetzt. Zugriffe auf das native Dateisystem oder das Adressbuch sind mit Progressive Web Apps erst in Testversionen wie Google Chromium möglich.[5]

Service Worker

Ein Service Worker ist ein JavaScript, das ein Web-Browser im Hintergrund ausführt. Es stellt für Progressive Web Apps essentielle Funktionen wie das Caching für die Offline-Verwendbarkeit bereit.[6] Einmal online abgerufen, können Inhalte beim nächsten Besuch der Seite auch ohne Internetverbindung angezeigt werden (Offline-Betrieb). Auch von nativen Apps bekannte Push-Benachrichtigungen sind mit Service Workern möglich. Service Worker werden eigens programmiert, im JavaScript der Seite registriert und installiert. Service Worker bedingen HTTPS, weshalb jede Progressive Web App mit HTTPS läuft. Zahlreiche Frameworks, wie z. B. Angular mit dem Mobile Toolkit, stellen Service Worker bereit, so dass man diese nicht selbst entwickeln muss.

App Shell

App Shell (oder Anwendungs-Shell) ist das minimale HTML, CSS und Java Script, das für das korrekte Laufen des User Interfaces der progressiven App benötigt wird. Das erste Laden der Shell sollte sehr schnell sein und sofort gecached werden. Das bedeutet, dass die Shell Dateien einmal über das Netzwerk lädt und sodann in einem lokalen Repository (Cache) speichert. Für jedes weitere Öffnen der App sind dann nur noch die lokal vorliegenden Daten notwendig.

Die Architektur der Anwendungs-Shell trennt das Core der Anwendungsinfrastruktur und das User Interface von den Daten. User Interface und Infrastruktur werden durch Benutzen des Service Worker lokal gecached, jedes andere Laden der App lädt nur die benötigten anstelle von allen Daten.

Der Zweck von Anwendungs-Shell ist vergleichbar mit dem Hochladen eines App Packages im App Store, wenn man eine native App entwickelt.[7]

Charakteristik

Zusätzlich zu ihren Eigenschaften als Webseiten stellen Progressive Web Apps viele Sonderfunktionen zur Verfügung, die zuvor nur von nativen Apps bekannt waren.

Add-To-Homescreen/Installierbarkeit

Eine Progressive Web App kann über „Add-To-Homescreen“ installiert werden. Die Manifest-Datei wird dabei verwendet um z. B. einen Splash Screen mit Icon zu erzeugen.

Im Browser erscheint entweder eine Benachrichtigung zur Installationsbereitschaft (auf mobilen Geräten) oder im Browser-Menü oder der URL-Zeile eine Funktion zum Installieren.

Push Notifications

Push Notifications sind ebenfalls von nativen Apps bekannt. Betreiber der Progressive Web App können Nutzer damit beispielsweise auf Aktionen, Rabatte oder Events aufmerksam machen und so die Interaktionsrate steigern.

Offline-Funktionalität

Mittels der Caching-Funktion der Service Worker stehen einmal abgerufene Inhalte auch offline zur Verfügung. Auch dieses Merkmal erinnert an native Apps, die keine Internetverbindung voraussetzen. Progressive Web Apps verfolgen konsequent einen Offline-first-Ansatz.

Vorteile von Progressive Web Apps

  • Kostenreduktion: Statt für Android, iOS und das Web zu implementieren, muss nur die PWA entwickelt werden. An In-App-Käufen verdienen im Gegensatz zu Apps Google und Apple nicht mit.[8]
  • App-like Design: Die User Experience und die Interaktionsmuster einer PWA können anhand von nativen Apps nachgebaut werden und bieten so eine gleiche User Experience.[8]
  • Hardwarezugriff: PWAs bieten die Möglichkeit, verschiedene native Funktionen zu implementieren, beispielsweise können Push-Notifications, Sensordaten und die Kameras genutzt werden.[8]
  • Vereinfachte Veröffentlichung: PWAs können zwar in den Google Play Store, müssen aber nicht den langwierigen Veröffentlichungsprozess von Google Play oder Apples App Store durchlaufen.[8]
  • Offline-Modus: Mithilfe von Service Workers funktioniert eine PWA offline, was zu einer Erhöhung der Kundenbindung führen kann.[8]
  • Verbesserte Performance: PWAs sind schneller als übliche Web-Apps. Davon profitieren Konversionen, User Experience und Retention Rates.[8]
  • Web-Traffic kann genutzt werden: PWAs sind verlinkbar und können von Suchmaschinenoptimierungen profitieren.[8]

Unterstützung

Ein vollständiger Support von Progressive Web Apps ist derzeit nur mit Vorabversionen gegeben. Chrome und Firefox sind voll kompatibel, von Safari gibt es positive Signale und Microsoft Edge nutzt künftig ebenfalls Googles Chrome-Module.[9] Auf iOS ist die Offline-Funktionalität verfügbar, seit mit Version 11.3 Service Worker und das Web-App-Manifest in Safari 11.1 implementiert wurden.[10]

Da PWAs auf Progressive Enhancement setzen, können sie auch in Browsern verwendet werden, die die Service-Worker-Technik nicht unterstützen; nur ist dann eine Internetverbindung nötig.

Beispiele

Erfolgreiche Progressive Web Apps wurden von Washington Post,[11] Flipkart[12] und Booking.com veröffentlicht.[13] Flipkart wird häufig als Vorzeigebeispiel verwendet, da der indische Online-Shop eine Steigerung der Conversion Rate von 70 % und eine dreifache Verweildauer auf den Seiten erzielen konnte.[14] Die Zahl bezieht sich auf die Nutzer, die die Add-To-Homescreen-Funktion nutzten. Zu den bereits angebotenen Progressive Web Apps zählen auch die von Twitter und Trivago.

Online-Verzeichnisse

Da es für die PWAs keine offiziellen Stores wie den App Store oder Google Play gibt, gibt es einige Online-Verzeichnisse, die diese Apps listen.

Das größte Verzeichnis von Progressive Web Apps, das ausnahmslos installierbare PWAs listet, ist findPWA (400+ Apps, 01.2020).[15] Andere Verzeichnisse wie Appscope listen auch Apps, die nur Web Apps sind.

Literatur

  • Christian Liebel: Progressive Web Apps: Das Praxisbuch. 1. Auflage. Rheinwerk Verlag, Bonn 2019, ISBN 978-3-8362-6494-5.
  • Tal Ater: Building Progressive Web Apps: Bringing the power of native to the browser. O’Reilly, Sebastopol 2017, ISBN 978-1-4919-6165-0.

Weblinks

Einzelnachweise

  1. ↑ Christian Liebel: Progressive Web Apps, Teil 1: Das Web wird nativ(er). Abgerufen am 30. Oktober 2017.
  2. ↑ Mobile Internetnutzer – Anteil in Deutschland 2014. In: Statista. Abgerufen am 23. Juni 2016.
  3. ↑ Steven Champeon: Progressive Enhancement and the Future of Web Design. 2003.
  4. ↑ Kevin Frank: Erstellung und Evaluation eines Leitfadens zur Nutzung von Progressive Web Apps. 20. Dezember 2018, S. 16, urn:nbn:de:kobv:522-opus4-21937 (kobv.de).
  5. ↑ Christian Liebel: Google-Projekt Fugu: Die Macht des Kugelfisches. In: heise.de. Abgerufen am 19. Dezember 2018.
  6. ↑ Introduction to Service Worker: How to use Service Worker. In: HTML5 Rocks. 1. Dezember 2014, archiviert vom Original am 26. Juni 2016; abgerufen am 26. Juni 2016 (englisch).  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/www.html5rocks.com
  7. ↑ Warum du progressive Web Applikationen entwickeln solltest. In: Ackee Blog. 8. Januar 2020, abgerufen am 11. Mai 2020 (deutsch).
  8. ↑ a b c d e f g Progressive Web App. In: GoingMeta.io. Abgerufen am 14. April 2020 (deutsch).
  9. ↑ Is ServiceWorker ready? In: jakearchibald.github.io. Abgerufen am 24. Juni 2016.
  10. ↑ Christian Liebel: iOS 11.3: Willkommen, Progressive Web Apps! Abgerufen am 15. Februar 2018 (deutsch).
  11. ↑ The Washington Post introduces new Progressive Web App experience (washingtonpost.com vom 19. Mai 2016, abgerufen am 25. Juni 2016)
  12. ↑ Progressive Web App: A New Way to Experience Mobile (Memento vom 23. Juni 2016 im Internet Archive) (tech-blog.flipkart.net vom 9. November 2015, abgerufen am 25. Juni 2016)
  13. ↑ Progressive Web Apps with Service Workers (booking.com vom 21. April 2016, abgerufen am 25. Juni 2016)
  14. ↑ developers.google.com
  15. ↑ Farin Heinje: About - findPWA - Directory for Progressive Web Apps. Abgerufen am 12. Januar 2020 (englisch).

Auf dieser Seite verwendete Medien

Progressive Web Apps Logo.svg
Autor/Urheber: Diego González-Zúñiga, Lizenz: CC0
PWA letters with an emphasis on the "W" with different colors, textures or graphics. The cuts between the letters remind of the // in the URL.