Hauptmenü öffnen

Eine Progressive Web App (PWA) ist eine Webseite, 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.

Inhaltsverzeichnis

Begriff / DefinitionBearbeiten

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. mit 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.“

FunktionsweiseBearbeiten

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 Progressiven Web Apps erst in Testversionen wie Google Chromium möglich[5].

Service WorkerBearbeiten

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.

CharakteristikBearbeiten

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-HomescreenBearbeiten

Die Add-To-Homescreen-Funktionalität kann mit den meisten Webbrowsern über das Hamburger-Menü-Icon abgerufen werden. Wurde eine Progressive Web App geöffnet und dem Homescreen auf dem Handy hinzugefügt, erscheint ein für die PWA spezifisches Symbol. Mit einem Klick auf das Symbol wird die PWA geöffnet, auch wenn keine Online-Verbindung besteht. Durch die Add-To-Homescreen-Funktion muss keine App installiert werden, die zusätzlich Speicherplatz belegen würde.

Push NotificationsBearbeiten

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ätBearbeiten

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.

Keine InstallationBearbeiten

Dieser Artikel oder nachfolgende Abschnitt ist nicht hinreichend mit Belegen (beispielsweise Einzelnachweisen) ausgestattet. Angaben ohne ausreichenden Beleg könnten demnächst entfernt werden. Bitte hilf Wikipedia, indem du die Angaben recherchierst und gute Belege einfügst.

PWAs werden auf dem Smartphone oder Tabletcomputer nicht „installiert“. Die mentale Hürde eine App zu installieren ist höher, als nur eine Webseite aufzurufen und einen Homescreen-Icon hinzuzufügen. Betreiber einer PWA benötigen weniger Überzeugungskraft als mit einer klassischen App, gewinnen aber eine ähnlich hohe Conversion Rate und Kundenbindung. Da Progressive Web Apps nicht installiert werden müssen, sind Betreiber unabhängig von App Stores und deren Gebühren.

UnterstützungBearbeiten

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 Google Chrome-Module.[7] 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.[8]

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.

BeispieleBearbeiten

Erfolgreiche Progressive Web Apps veröffentlichten die Washington Post,[9] Flipkart[10] und Booking.com.[11] 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.[12] Die Zahl bezieht sich auf die Nutzer, die die Add-To-Homescreen-Funktion nutzten. Zu den bereits vorhandenen Progressive Web Apps zählen unter anderem auch Twitter und Trivago.[13]

LiteraturBearbeiten

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

WeblinksBearbeiten

EinzelnachweiseBearbeiten

  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. Abgerufen am 23. Juni 2016.
  7. Is ServiceWorker ready? In: jakearchibald.github.io. Abgerufen am 24. Juni 2016.
  8. Christian Liebel: iOS 11.3: Willkommen, Progressive Web Apps! Abgerufen am 15. Februar 2018 (deutsch).
  9. The Washington Post introduces new Progressive Web App experience (washingtonpost.com vom 19. Mai 2016, abgerufen am 25. Juni 2016)
  10. 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)
  11. Progressive Web Apps with Service Workers (booking.com vom 21. April 2016, abgerufen am 25. Juni 2016)
  12. developers.google.com
  13. Das Online Verzeichnis von Progressive Web Apps. In: pwa.bar. Abgerufen am 7. Mai 2018.