Bei einer progressiven Web App (PWA) handelt es sich um eine Webseite, die mit einer Vielzahl verschiedener Charakteristika versehen ist. Bislang waren sie nur bei nativen Apps vorhanden. Eine PWA kann man daher als eine Symbiose aus einer responsiven Webseite und einer nativen App bezeichnen. Progressive Web Apps lassen sich wie gewöhnliche Websites mit den offenen Webstandards HTML, CSS und JavaScript entwickeln. Zusätzlich kommen die sogenannten „Service Workers„ zum Einsatz. Sie ermöglichen ein optimiertes Caching und Offline-Funktionalitäten. Die Kommunikation zwischen Client und Server wird über das sichere HTTPS-Protokoll realisiert. Lesen Sie hier alles über HTTPS.
Inhalt
Progressive Web Apps auf dem Vormarsch
Immer mehr Menschen nutzen das Smartphone, um auf Inhalte im World Wide Web zuzugreifen. In Deutschland
Das Smartphone ist nicht mehr wegzudenken.
lag der Smartphone-Nutzeranteil im Jahr 2014 bei etwa 70 Prozent. Webseitenbetreiber sahen sich bislang mit dem Problem konfrontiert, dass man sowohl eine responsive oder mobile Webseite zusätzlich zu einer nativen App entwickeln musste. Hinzu kommt die Tatsache, dass man die native App zweifach für beide mobilen Betriebssysteme Android und iOS entwickelt. Die verursacht zusätzliche Entwicklungskosten. Mit einer progressiven Web App ist die doppelte Entwicklung überflüssig. Sie ruft man wie eine gewöhnliche Webpräsenz über eine URL ab. Gleichzeitig stellt man sowohl Online- als auch Offline-Funktionalitäten zur Verfügung.
Der Begriff „Progressive Web App“ besteht zu einem Teil aus „Web Apps“ (Webanwendungen), die man mithilfe der offenen Webstandards HTML, CSS und JavaScript realisiert. Der andere Teil basiert auf dem Begriff „Progressive Enhancement„. Erstmals ist er im Jahr 2003 von dem US-amerikanischen Web-Pionier Steven Champeon vorgestellt worden. Bei Progressive Enhancement handelt es sich um einen Grundsatz. Er besagt, dass man die grundlegenden Funktionen einer Webanwendung in jedem Webbrowser ausführen kann. Neuartige Funktionalitäten und Features sollen man nur dann einsetzen, wenn sie vom Webbrowser auch unterstützt werden. Diese Vorgehensweise ist nötig, da PWAs u. a. auf Service-Worker-Techniken setzen, die nur in modernen Browsern zur Verfügung gestellt werden.
Wie funktioniert eine PWA?
Eine PWA wird im Webbrowser gestartet, indem der Nutzer in der Adressleiste des Browsers die URL des zuständigen Webservers eingibt und damit die erste Anfrage versendet. Der autoritäre Server nimmt die
Was funktioniert wie bei der PWA?
Anfrage an und leitet sie an die PWA weiter, die in diesem Kontext als Webanwendung fungiert. Die Progressive Web App erzeugt den Code des HTML-Dokuments, den man dann vom Webserver wieder über den HTTPS-Response-Header zurück zum Browser des Anwenders schickt. Dem Nutzer wird eine Webseite angezeigt, die aufgrund des responsiven Designs an sein Endgerät optimal angepasst ist. Obwohl sich die PWA über eine URL abgerufen lässt, kann ein Anwender die App auch über ein Icon auf dem Display des Smartphones starten oder Push-Benachrichtigungen erhalten und die Website auch offline benutzen. Technisch wird dies durch moderne Webstandards wie HTML5, CSS, JavaScript, Service Workers und optionale JS-Frameworks wie zum Beispiel React Native oder AngularJS umgesetzt.
Der essenzielle Bestandteil einer PWA sind die Service Workers. Dabei handelt es sich um eine JavaScript-Schnittstelle, die für Progressive Web Apps eine Vielzahl unterschiedlicher Funktionalitäten zur Verfügung stellt, wie beispielsweise den Offline-Modus. Einmal abgerufen, kann man Inhalte der PWA beim nächsten Besuch auch ohne eine aktive Internetverbindung anzeigen. Auch von den nativen Apps bekannte Push-Notifikationen lassen sich mit Service Workern realisieren. Moderne JS-Frameworks wie React Native oder Angular stellen bereits vorgefertigte Service Worker bereit, sodass man diese nicht selbst programmieren muss.
Eigenschaften der PWA
Zusätzlich zu ihren Charakteristika als Webpräsenzen stellen Progressive Web Apps zahlreiche Sonderfunktionen zur Verfügung, die zuvor ausschließlich nativen Apps vorbehalten gewesen sind.
- Add-To-Homescreen
Die Add-To-Homescreen-Funktion kann bei vielen aktuellen Internetbrowsern über das Hamburger-Menü-Icon abgerufen werden. Nachdem die PWA geöffnet wurde kann sie dem Homescreen auf dem Smartphone hinzugefügt werden. Dort erscheint ein für die jeweilige PWA spezifisches Icon, über das sich die App schnell und einfach starten lässt, auch wenn keine aktive Internetverbindung vorhanden ist.
2. Push-Benachrichtigungen
Durch Push-Benachrichtigungen macht man auf Rabatte aufmerksam.
Die Push-Benachrichtigungen sind ebenfalls von den nativen Smartphone-Apps bekannt. Betreiber der PWA können Nutzer über Push-Notifikationen auf aktuelle Rabatte, Aktionen oder Events aufmerksam machen.
3. Offline-Funktionalitäten
Durch die Nutzung der Caching-Funktion, die Service Worker zur Verfügung stellen, können Nutzer auf einmal abgerufene Inhalte auch offline zugreifen. Auch diese Funktionalität erinnert an native Apps, die keine aktive Internetverbindung voraussetzen, um funktionsfähig zu sein.
Vorteile und Nachteile für Nutzer und Betreiber
Die mentale Hürde, eine App auf einem Tablet-PC oder Smartphone vor der eigentlichen Nutzung installieren zu müssen, ist wesentlich höher als bei einer Webpräsenz. Hier punkten PWAs, weil man sie nicht auf dem mobilen Gerät installieren muss und sie zudem auch weniger Speicherplatz und Ressourcen benötigen als native Apps. Betreiber profitieren von der Tatsache, dass ihre App weder einen Freigabeprozess der App-Store-Betreiber durchlaufen muss, noch unter der direkten Kontrolle durch Google oder Apple untersteht.
Kunden favorisieren im Alltag responsive Websites, die auf verschiedenen Geräten gut aussehen und sich gleichermaßen gut bedienen lassen. Trotz der kontinuierlich wachsenden Nachfrage nach mobilen Websites sind mobil genutzte Websites hierzulande immer noch im hohen Maße von der flächendeckend schlechten Breitband-Verbindung abhängig. Genau hier können PWAs auf voller Linie überzeugen. Progressive Web Apps speichern Inhalte auf dem lokalen Gerät ab. Dadurch muss man diese nicht bei jedem Abruf immer wieder über das Internet laden. Der flottere Zugriff auf Daten sorgt zudem für eine verbesserte User Experience, die in der Regel eine bessere Konversionsrate mit sich bringt.
Wann wird die Website favorisiert?
Obwohl PWAs mit vielen Vorteilen punkten, bringt der Einsatz dieser Technologie auch einige Nachteile mit sich. Um PWAs nutzen zu können, muss der Webbrowser des Nutzers eine vollständige Unterstützung für diese Technologie bieten. Aktuelle Webbrowser wie Chrome, Firefox, Safari und Microsoft Edge bieten volle Unterstützung für die PWA-Technologie. Probleme gibt es jedoch mit dem Microsoft Internet Explorer, der keinerlei Unterstützung für PWAs zur Verfügung stellt, obwohl sie noch Millionen Nutzer verwenden.
Beispiel einer PWA
Janina ist Redakteurin der Web-Redaktion und außerdem für die Webagentur awantego.com tätig.
