Eine Progressive Web App (PWA) ist eine Website, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. 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. 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.
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. 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:
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.
Ein Service Worker ist ein JavaScript-Programm, 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. 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.
Die App Shell (oder Anwendungs-Shell) ist die minimale HTML, CSS und Javascript Umgebung, die für die Darstellung und Ausführung 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.
Zusätzlich zu ihren Eigenschaften als Webseiten stellen Progressive Web Apps viele Sonderfunktionen zur Verfügung, die zuvor nur von nativen Apps bekannt waren.
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 sind ebenfalls von nativen Apps bekannt. Betreiber der Progressive Web Ap
