| Progressive Webanwendung | |
|---|---|
 | |
| Basisdaten | |
| Erscheinungsjahr | ca. 2015 |
| Ausführungsumgebung | Webbrowser |
| Programmiersprache | JavaScript,JSON |
EineProgressive Webanwendung (kurzPWA fürenglischProgressive Web Application) ist eineWebanwendung mit Merkmalen einer nativenmobilen App.[1] Sie kann daher auch als eine Kombination aus einerresponsiven Webseite und einer mobilen App beschrieben werden. Progressive Webanwendungen können wie eine Webseite mitHTML5,CSS3 undJavaScript erstellt werden. SogenannteService Worker ermöglichen eineOffline-Funktionalität. ZurKommunikation zwischenWebclient undWebserver ist dasHTTPS-Protokoll vorgeschrieben.
In Deutschland stieg der Anteil der Internetnutzung mit demSmartphone schon im Jahr 2014 auf etwa 69 % aller Internetnutzer.[2] Websitebetreiber mussten sowohl eine responsive odermobile Webseite als auch zusätzlich eine native App entwickeln. Eine PWA soll die doppelteEntwicklung überflüssig machen, da sie wie eine Webseite mittelsURL aufgerufen werden kann und Offline-Funktionalitäten bereitstellt.
Der Begriff „Progressive Webanwendung“ setzt sich zu einem Teil aus den Webanwendungen zusammen, die mit Hilfe der modifizierten Webtechniken HTML5, CSS3 und JavaScript entwickelt werden. Der andere Teil ergibt sich aus dem Begriff desProgressive Enhancement, der im Jahr 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. U. a. Service-Worker-Techniken sind in Browsern unter HTML5 funktionsfähig.
Die folgende Definition fasst alle relevanten Eigenschaften von Progressive Web Apps zusammen:[4]
„Progressive Web Apps sindresponsive 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.“
Eine Progressive Webanwendungen wird gestartet, indem man z. B. imWebbrowser denURL des Webservers eingibt und damit die ersteAnfrage sendet.Der Webserver nimmt die Anfrage entgegen und übergibt sie an die PWA, die hier als eineWebanwendung fungiert. Diese erzeugt oder lädt denHTML-Quellcode einer Webseite, der vom Webserver zurück zum Browser des Benutzers geschickt wird (HTTPS-Response).
Der Nutzer sieht eine Webseite, die aufgrund desresponsiven Designs an seinEndgerät angepasst ist. Obwohl die Progressive Webanwendung über einen URL abgerufen wurde, kann der Benutzer einIcon auf den Bildschirm des Smartphones ziehen oderPush Notifications erhalten und die Seite auch offline verwenden.Die aufProgressive enhancement beruhende Technik soll Nutzern je nach verwendetem Gerät die bestmöglicheUser Experience bieten.
Technisch wird dies mit HTML5, CSS3, JavaScript,Service Worker und optional einemFramework wieAngular bzw. einer Bibliothek wiePolymer umgesetzt.Zugriffe auf das nativeDateisystem oder das Adressbuch sind mit Progressive Web Apps erst in Testversionen wie GoogleChromium möglich.[5]
EinService 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.[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 MobileToolkit, 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 sofortgecached werden. Das bedeutet, dass die Shell Dateien einmal über das Netzwerk lädt und sodann in einem lokalenRepository (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]
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. DieManifest-Datei wird dabei verwendet, um z. B. einenSplash 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 App können Nutzer damit beispielsweise aufAktionen,Rabatte oderEvents aufmerksam machen und so dieInteraktionsrate steigern.
Mittels derCaching-Funktion der Service Worker stehen einmal abgerufene Inhalte auchoffline zur Verfügung. Auch dieses Merkmal erinnert an native Apps, die keineInternetverbindung voraussetzen. Progressive Web Apps verfolgen konsequent einen Offline-first-Ansatz.
Ein vollständigerSupport von Progressive Web Apps ist derzeit nur mit Vorabversionen gegeben.Chrome undFirefox sind voll kompatibel, vonSafari gibt es positive Signale undMicrosoft Edge nutzt künftig ebenfalls Googles Chrome-Module.[9] Auf iOS ist die Offline-Funktionalität verfügbar, seit das Web-App-Manifest in Safari 11.1 sowie mit Safari 11.3 Service Worker implementiert wurden.[10] Apple kündigte jedoch an, die Offline-Funktionalität mit iOS 17.4 wieder entfernen zu wollen.[11] Nachdem die EU-Kommission ankündigte, die Zulässigkeit dieses Schritts unter Gesichtspunkten des Wettbewerbsrechts prüfen zu wollen,[12] kündigte Apple an, zumindest in der EU von diesen Planungen wieder Abstand zu nehmen.[13]
Da PWAs aufProgressive 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.
Erfolgreiche Progressive Webanwendungen wurden vonWashington Post,[14] Flipkart[15] und Booking.com veröffentlicht.[16] Flipkart wird häufig als Vorzeigebeispiel verwendet, da derindischeOnline-Shop eine Steigerung derConversion Rate von 70 % und eine dreifacheVerweildauer auf den Seiten erzielen konnte.[17] Die Zahl bezieht sich auf die Nutzer, die die Add-To-Homescreen-Funktion nutzten.Zu den bereits angebotenen Progressive Webanwendungen zählen auch die vonTwitter undTrivago.
Da es für die PWAs keine offiziellen Stores wie denApp Store oderGoogle Play gibt, gibt es einige Online-Verzeichnisse, die diese Apps listen.
Das größte Verzeichnis von Progressive Webanwendungen, das ausnahmslos installierbare PWAs listet, istfindPWA.com (500+ gelistete Apps, 11.2024).[18] Andere Verzeichnisse wie Appscope listen auch Apps, die nur Webanwendungen sind.
