Progressive Web Apps Die leichte Art eine App ins Netz zu stellen

Wir erklären Ihnen was Progressive Web Apps sind und warum es manchmal besser ist lieber keine App sondern eine Web App programmieren zu lassen

Progressive Web Apps (PWA) sind Websites, die spezielle Eigenschaften nativer Apps besitzen und die User Experience auf mobilen Endgeräten verbessern sollen.

Eine progressive Web App wird durch Aufruf einer URL in die Adressleiste Ihres Browsers aufgerufen. Die Seiten müssen mit SSL Zertifkaten ausgestattet sein und steuern die Kommunikation zwischen dem Browser und dem Server mit sogenannten Service Workers. Insbesondere das Caching wird dadurch optimiert, sodass auch Offline-Funktionen bereitgestellt werden können. Nutzer können PWAs wie Websites verwenden, sie können sie jedoch auch zu ihrem Homescreens des mobilen Endgerätes hinzufügen.

Progressive Web Apps bieten als eine Kombination aus App und responsiver Website den Vorteile einer schnellen und einfachen Art Ihre Informationen an den Besucher weiter zu geben.

Grundlegende Informationen

Progressive Web Apps basieren auf dem von Google empfohlenen Entwicklungsansatz des Progressive Enhancement.

Die Idee besteht darin, dass die grundlegenden Websitefunktionen auf jedem Endgerät und bei jeglicher Art von Internetverbindung nutzbar sind. Auch wenn mobile Endgeräte nicht mit dem Internet verbunden sind und JavaScript, CSS oder Flash gegebenenfalls nicht unterstützen, sollen Websites, die auf Progressive Enhancement aufbauen, die verschiedenen Informationsbedürfnisse von Nutzern befriediegen können.

 

Aufbau von PWA

Die zentralen Eigenschaften von Progressive Web App sind laut Google:

  • Zuverlässigkeit: PWAs laden die angeforderten Inhalte auch, wenn die Internetverbindung schlecht oder nicht vorhanden ist.
  • Schnelligkeit: PWAs reagieren unmittelbar auf Nutzerinteraktionen, integrieren mitunter Animationen und vermeiden hackeliges Scrolling.
  • User Experience: Die Nutzung von PWAs fühlt sich an wie eine native App, die für das jeweilige Endgerät konzipiert wurde.
  • Günstigere Erstellung vs Nativer App

Das wichtigste Element, um Progressive Web Apps umzusetzen und ihre Vorteile zu nutzen, sind die sogenannten Service Worker: Sie arbeiten im Hintergrund der Website und ermöglichen das Laden von bestimmten Inhalten in den Cache, ohne dass eine erneute HTTP-Kommunikation stattfindet. Dies wird erreicht durch ein Script, das auf der Clientseite wie ein Proxy-Server arbeitet. Fordert ein Nutzer bestimmte Inhalte an, hat der Service Worker diese Inhalte bereits in den Cache geladen, weil der Entwickler diese vorab definiert hat. Methoden wie Prerendering, Preloading und Prefetching kommen hier zur Anwendung.

Während der Entwicklung einer Progressive Web App werden diese Schlüsselresourcen identifiziert und mithilfe des Scriptes referenziert und vorgeladen. Je nach Nutzerinteraktion weiß die App also schon, welche Inhalte angefordert werden und muss diese nicht extra über die Internetverbindung nachladen. Somit wird die Abhängigkeit des Internets oder mobilen Internets effektiv reduziert – bei erhöhter User Experience und gewohnter Nutzung. Die Kontrolle des Caching schließt noch einen weiteren Aspekt mit ein: Das Laden der Inhalte erfolgt wesentlich schneller und die Nutzer müssen keine hohen Ladezeiten in Kauf nehmen. Der Flow der Nutzung wird dadurch auf einem hohen Niveau gehalten – bei schonender Nutzung der Netzwerkressourcen.

Progressive Web Apps können auch ohne Zugriff auf einen App Store genutzt werden. Es ist keine Installation notwendig. Dank der Anlehnung an das Web App Manifest stellen sie spezielle Funktionen bereit, die sonst nur in nativen Apps vorhanden sind. Nutzer können zum Beispiel eine PWA mit einem Klick zu ihrem Homescreen hinzufügen und die Website wie eine App auf ihrem Endgerät verwenden – auch im Vollbildmodus. Mit der Integration von Push-Mitteilungen können Progressive Web Apps zudem die Engagementraten erhöhen und beispielsweise personalisierte Angebote unterbreiten oder zusätzliche Informationen anbieten. Ermöglicht wird dies durch eine JSON-Datei (Web App Manifest), die mit der Website mittels Script verbunden wird. In diesem Script kann das Aussehen der Website definiert werden, wenn Nutzer die Website über den Homescreen aufrufen. Per Scriptbefehl sind zahlreiche Einstellungsmöglichkeiten verfügbar, um die PWA zu personalisieren.

Wie wird es angewendet

Zur Entwicklung von Progressive Web Apps können HTML5, CSS3 und JavaScript zum Einsatz kommen. Hinzu kommen Frameworks wie Angular oder Polymer, mit denen das Web App Manifest und somit das Erscheinungsbild als App umgesetzt wird.

Eine sogenannte Application Shell Architecture sorgt für minimale Ressourcen in HTML5, CSS3 und JavaScript: Nur das Nötigste steht im Quellcode, sodass die Benutzeroberfläche gebildet werden kann.

Die Inhalte in der Web App werden dynamisch über eine API geladen. Die richtige Integration der API oder des Frameworks kann mit Lighthouse überprüft werden, um Fehler, Bugs und Regresse aufzuspüren.

Zwar unterstützen die meisten mobilen Endgeräte diese Technologien, aber wenn JavaScript oder Flash im Browser abgestellt sind, bietet der progressive Entwicklungsansatz ein gewisses Maß an Abwärtskompatibilität. Denn PWAs sind letztendlich Websites, die auf den Funktionen eines Browsers basieren. In der Praxis verfügen jedoch nicht alle Browser über die Unterstützung der Service Worker, was zum Beispiel bei iOS einen Nachteil darstellt: In iOS funktionieren die Apps nicht in der Offlineversion, lediglich Android bietet eine volle Integration der Servicve Worker.