Progressive Web Apps

Stand: 15.08.2022

Progressive Web Apps (PWA) sind Webseiten mit speziellen Eigenschaften, welche sich besonders für die Nutzung auf mobilen Endgeräten eignen. Die besonderen Features von PWAs finden sich dabei in der Installierbarkeit, der Offlinefähigkeit und die Unterstützung von Push-Benachrichtigungen.

Progressive Web Apps stellen laut Google das App-Modell der Zukunft dar. Die neue Technologie könnte das Ende für herkömmliche App-Stores bedeuten, da sie das Herunterladen von Anwendungen über den Browser ermöglicht, welcher ohnehin auf jedem Endgerät installiert ist. Native Applikationen könnten in der Zukunft also durch plattformübergreifende und progressive Apps abgelöst werden.

Definition

Progressive Web Apps (PWA) sind Webseiten mit speziellen Eigenschaften, welche sich besonders für die Nutzung auf mobilen Endgeräten eignen. Die besonderen Features von PWAs orientieren sich an nativen Apps und finden sich dabei in der Installierbarkeit, der Offlinefähigkeit und die Unterstützung von Push-Benachrichtigungen. PWAs werden allerdings über eine URL in einem Browser aufgerufen. Mithilfe eines HTTPS-Protokolls wird neben der Kommunikation zwischen einem Server und einem Client auch die Nutzung des Cache optimiert, sodass die Funktionalitäten der Webseite auch offline zur Verfügung gestellt werden können. Anders als herkömmliche Webseiten, die über einen Browser aufgerufen werden, lassen sich PWAs als Apps auf dem Homescreen mobiler Endgeräte einbetten. Durch ihre Spezialisierung auf mobile Endgeräte berücksichtigen Progressive Web Apps auch ein Responsive Design.

Funktionsweise und Anwendung

Progressive Web Apps zeichnen sich vor allem durch ihre Zuverlässigkeit, Schnelligkeit und eine besonders gute User Experience (UX) aus. Da die Inhalte auch geladen werden können, wenn keine Verbindung zum Internet besteht, sind PWAs besonders zuverlässig. Die progressiven Anwendungen reagieren unmittelbar auf Nutzerinteraktionen, integrieren Animationen und können flüssig und ohne Einschränkungen benutzt werden. Die Nutzung orientiert sich dabei an nativen Applikationen, sodass die Interaktion mit PWAs besonders unkompliziert und intuitiv ist. Darüber hinaus lassen sich die optimierten Webseiten auf allen Endgeräten uneingeschränkt aufrufen und nutzen.

Um PWAs in vollem Umfang nutzen zu können, greift das System auf sogenannte Service Worker zurück: Diese Funktion optimiert vor allem das Zwischenspeichern der Inhalte im Cache des Browsers und ermöglicht die Offline-Nutzung der Anwendungen. Die Service Worker arbeiten dabei anhand eines spezifischen Skripts, welches clientseitig wie ein Proxy-Server funktioniert. Die Inhalte werden dabei noch vor dem eigentlichen Aufruf im Cache gespeichert, sodass progressive Webseiten besonders schnell und flüssig funktionieren. Die Service Worker bedienen sich dabei besonderer Funktionen wie dem Prerendering, Preloading und Prefetching. Auch die Abhängigkeit von leistungsstarken Internetverbindungen wird maßgeblich reduziert. Aufgrund der optimierten Ladezeiten gewährleisten PWAs eine besonders gute UX.

Die progressiven Webseiten lassen sich dabei unabhängig vom App-Store nutzen und auf dem Homescreen einbetten. Durch die Unterstützung von Push-Benachrichtigungen, auch wenn die Webseite gerade nicht aufgerufen wird, können Webseitenbetreiber die Interaktionsrate und das Engagement der Webseitenbesucher steigern. Darüber hinaus können über diese Funktion auch personalisierte Inhalte und Angebote ausgespielt werden, sodass noch weitere positive Effekte generiert werden können. Ermöglicht wird dies durch eine JSON-Datei, welche die Personalisierung der Webseite unterstützt.

Bedeutung für SEO

Zur Entwicklung von progressiven Webseiten können HTML5, CSS3 und JavaScript zum Einsatz kommen. Eine sogenannte Application Shell Architecture und das dynamische Laden von Inhalten über eine API verringert den Verbrauch von Ressourcen maßgeblich.

Durch die stetige Weiterentwicklung und Verbesserung der Suchalgorithmen sind Webcrawler heutzutage in der Lage, JavaScript-Inhalte auszulesen und die Inhalte in das Ranking mit einzubeziehen. Allerdings kann es bei Progressive Web Apps immer noch zu einem Rankingverlust kommen, da die Crawlability der Webseite oftmals nicht optimal ausgeschöpft werde können. Um die Indexierung zu unterstützen, sollten Webseitenbetreiber auf eine Bibliothek oder ein Framework wie Angular, Polymer oder React zurückzugreifen und CSS und JS zusammen mit HTML inline auszuliefern, um die grundlegenden Funktionalitäten der Webseite für den Nutzer zu gewährleisten.

Ausblick

Für Google stellen Progressive Web Apps das App-Modell der Zukunft dar und sind aufgrund ihrer innovativen plattformübergreifenden und progressiven Beschaffenheit in der Lage, native Applikationen abzulösen. Vor allem der Umstand, dass PWAs einfach offline aus dem Browser geladen werden können, der ohnehin auf jedem Endgerät installiert ist, begünstigt diese Entwicklung.

Google ermutigt Webmaster schon seit geraumer Zeit zum sogenannten Progressive Enhancement. Im Rahmen dieser Idee treibt der Konzern die Entwicklung von Webseiten an, die sowohl auf mobilen als auch auf lokalen Endgeräten und bei jeglicher Art von Internetverbindung in vollem Umfang nutzbar sind. In diesem Zusammenhang stellen vor allem mobile Endgeräte wie Smartphones und Tablets aufgrund des kleineren Bildschirms, der Touch-Bedienung und der Verwendung mobiler, weniger leistungsstarker Internetverbindungen eine Herausforderung dar. Darüber hinaus unterstützen viele mobile Endgeräte weder JavaScript, noch CSS oder Flash. Das Progressive Enhancement zielt dabei auf die umfassende Optimierung der Webseite für alle Endgeräte und weniger auf die Entwicklung gesonderter mobiler Formate ab.

Lars Tholen

Geschäftsführer
Digital Solutions

Sie interessieren sich für das Thema "Progressive Web Apps"

Löwenstark bietet als Full-Service-Marketing-Agentur umfassende Beratung und professionelle Leistungen. Lassen Sie sich von Lars Tholen kostenfrei beraten.

Jetzt Kontakt aufnehmen