Progressive Web Apps


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, wie eine Website, durch die Eingabe einer URL in die Adressleiste des Browsers aufgerufen. Unter Zuhilfenahme des HTTPS-Protokolls und sogenannten Service Workers wird die Kommunikation zwischen Client und Server und insbesondere das Caching 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 werden deshalb häufig als eine Kombination aus App und responsiver Website betrachtet: PWAs vereinen die Vorteile beider Entwicklungsansätze, indem Appfunktionen bereitgestellt werden und die Verwendung durch die Nutzer bekannt ist.

Allgemeine Informationen zum Thema

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.[1] Im Gegensatz zur Graceful Degradation, die verschiedene Versionen von Websites für bestimmte Endgeräte optimiert, setzt Progressive Enhancement auf eine Website-Version, die in den rudimentären Funktionen auf allen Endgeräten reibungslos arbeitet.

Funktionsweise

Die zentralen Eigenschaften von Progressive Web App sind laut Google:[2]

  • 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.

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.[3]

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.[4]

Praxisbezug

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.[5]

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.[6]

Bedeutung für die Suchmaschinenoptimierung

Progressive Web Apps bestehen zu einem Großteil aus JavaScript. Google ist in den letzten Jahren immer besser darin geworden, Skriptsprachen auszulesen und deren Inhalte zu verfolgen und zu referenzieren. Für die Entwicklung von PWAs bedeutet dies jedoch einige Veränderungen im Quellcode der Website. Zum einen wird empfohlen, auf eine Bibliothek oder ein Framework wie Angular, Polymer oder React zurückzugreifen und den jeweiligen SEO-Best-Practise zu folgen, um zum Beispiel das Crawling (zum Beispiel "escaped fragments") und Rendering von JavaScript-lastigen Websites zu steuern. Falls kein Framework verwendet wird, sollten bestimmte Ressourcen unter Umständen vorgerendert werden.[7]

Zum anderen ist es empfehlenswert, CSS und JS mit dem HTML – inline – auszuliefern. Und zwar so, dass die grundlegenden Funktionen und Designelemente beim Client nutzbar und vorhanden sind. Das erhöht zwar die Netzwerkauslastung, sorgt aber auch dafür, dass die wichtigsten Elemente der Website unmitelbar geladen werden. Ohnehin zielt die Umsetzung von Progressive Web Apps darauf ab, dass die grundlegenden Websitefunktionen genutzt werden können (Progressive Enhancement). Dies kann vor der Entwicklung als "offline-first-experience" Berücksichtigung finden, indem davon ausgegangen wird, dass das Design der Website, ihr Content und ihre Interaktionselemente schon beim Nutzer sind und clientseitig mittels API geladen werden sollten.[8]

Einzelnachweise

  1. ↑ Zukunft der Webentwicklung: Webkomponenten und Progressive Web Apps, Teil 2 heise.de. Abgerufen am 29.12.2016
  2. ↑ Progressive Web Apps developers.google.com. Abgerufen am 29.12.2016
  3. ↑ Progressive Web Apps: Escaping Tabs Without Losing Our Soul infrequently.org. Abgerufen am 29.12.2016
  4. ↑ The Web App Manifest developers.google.com. Abgerufen am 29.12.2016
  5. ↑ Audit Web Apps With Lighthouse developers.google.com. Abgerufen am 29.12.2016
  6. ↑ Service Worker and Browser jakearchibald.github.io. Abgerufen am 29.12.2016
  7. ↑ The Basics of JavaScript Framework SEO in AngularJS builtvisible.com. Abgerufen am 29.12.2016
  8. ↑ Introducing Progressive Web Apps: What They Might Mean for Your Website and SEO moz.com. Abgerufen am 29.12.2016

Weblinks



Abgerufen von „https://de.ryte.com/wiki/index.php?title=Progressive_Web_Apps&oldid=19048“

Kategorie