Progressive Web Apps

Inhaltsverzeichnis

1 Definition
2 Charakteristische Merkmale von Progressive Web Apps
3 Für welche Anwendungen sind PWAs geeignet?
4 Funktionsweise von Progressive Web Apps
5 Bedeutung der PWA für SEO
6 Weiterführende Links
7 Ähnliche Artikel

Definition

Progressive Web Apps (PWAs) sind Webanwendungen, die wie normale Webseiten geladen werden, aber dem Benutzer Funktionen bieten, die sonst nur für native mobile Anwendungen verfügbar sind. Sie sind kein neues Framework oder eine neue Technologie, sondern eine Kombination einer Reihe von Best Practices, um eine Webanwendung ähnlich wie eine Desktop- oder mobile Anwendung zu gestalten. Progressive Webanwendungen bieten unabhängig vom verwendeten Browser optimale Benutzererfahrungen, da sie auf Progressive Enhancement beruhen. Wie bereits bestehende Web-Apps werden sie direkt auf der zugehörigen Website gehostet. Entwickler können sie direkt auf ihrem Webserver aktualisieren, ohne diese Aktualisierungen an verschiedene App Stores zu senden.

Beispiel einer Progressive Web App von trivago.de

Charakteristische Merkmale von Progressive Web Apps

Discoverable

Da PWAs so wie Websites eine URL besitzen, sind sie indexierbar und verknüpfbar. Dies bedeutet, dass Suchmaschinen Zugriff auf die Daten im Zusammenhang mit dem Benutzerverhalten auf der PWA haben - anders als in einer nativen App, wo das Nutzerverhalten nicht mehr verfolgt und für die Analyse gemessen werden kann, sobald der Benutzer in der Anwendung ist. Google führt einige Best Practices für die Indexierung von PWAs auf.

Ohne Installierung

PWAs können über den "Add-To-Homescreen" Button ohne Installation oder großen Speicherplatzverbrauch auf einem Smartphone abgelegt werden. Ein wichtiger Teil des App-Erlebnisses besteht darin, dass Benutzer App Symbole auf ihrem Startbildschirm haben und auf Apps tippen können, um sie auf ihrem Smartphone zu öffnen. Web-Apps können dieses native App Feeling über die im Web App Manifest festgelegten Eigenschaften und über die "Add-To-Homescreen" Funktion bieten.

Verlinkbar

Eine der leistungsstärksten Funktionen ist die Möglichkeit, unter einer bestimmten URL eine Verknüpfung zu einer App herzustellen. PWAs sind verlinkbar und können einfach geteilt werden. Es wird kein App-Store benötigt.

Netzwerkunabhängig

PWAs funktionieren auch, wenn das Netzwerk unzuverlässig arbeitet oder gar nicht erreicht werden kann. Die grundlegende Idee hinter der Netzwerkunabhängigkeit ist, dass eine Webseite erneut aufgerufen und deren Inhalt angezeigt werden kann, auch wenn kein Netzwerk verfügbar ist. Zudem können Inhalte auch bei schlechter Konnektivität durchsucht werden, wenn der Benutzer sie bereits einmal aufgerufen hat. Dies wird durch eine Kombination folgender Technologien erreicht:

Service Worker (zur Steuerung von Seitenanforderungen)
Cache-API (um Antworten auf Netzwerkanforderungen offline zu speichern)
clientseitige Datenspeicher Technologien wie Web Storage und IndexedDB (um Anwendungsdaten offline zu speichern)

Progressive

PWAs werden basierend auf Progressive Enhancement entwickelt, um auf modernen und weniger fähigeren Browsern gleichermaßen eine optimale Benutzererfahrung zu bieten.

Re-engageable

Ein Hauptvorteil von nativen Plattformen ist die Leichtigkeit, mit der Benutzer durch Updates und neue Inhalte wieder "aktiviert" werden können, selbst wenn sie nicht auf die App schauen oder ihre Geräte verwenden. Moderne Web-Apps können mit dem Service Worker (zur Seitenkontrolle), Web Push API (zum Senden von Updates direkt vom Server zur App) und der Notifications API (zum Erstellen von Systembenachrichtigungen) ebenfalls die Nutzer informieren.

Responsive

PWAs verwenden Technologien wie Media Queries und Meta Viewports, um sicherzustellen, dass ihre Benutzeroberflächen wie andere mobile Webseiten auf allen Endgeräten genutzt werden können.

Safe

PWAs müssen verschlüsselte Übertragungen über HTTPS für eine maximale Datensicherheit verwenden.

Für welche Anwendungen sind PWAs geeignet?

PWAs haben im vergangenen Jahr stark an Popularität gewonnen. Google, Apple und Microsoft - die drei wichtigsten Unternehmen für die native App-Verteilung - treiben den Übergang von native Apps zu PWA voran. Aufgrund ihrer inhärenten Flexibilität sind PWA in den Augen vieler der beste Weg, um im Bereich mobile Internetnutzung immer einen Schritt voraus zu sein. Von Twitter bis Starbucks beweisen PWA mittlerweile, dass jedes Unternehmen mit dieser Technologie signifikante Gewinne erzielen kann. Insbesondere E-Commerce Plattformen und Webseiten, die ihre Inhalte häufig und schnell aktualisieren oder auf Interaktion beruhen, profitieren von den progressiven Web Apps. Immer mehr Entwickler gehen jedoch davon aus, dass sich PWAs in Zukunft allgemein für jede Webanwendung durchsetzen werden.

Funktionsweise von Progressive Web Apps

Kern einer PWA ist der sogenannte Service Worker. Ein Service Worker ist einem Web-Worker sehr ähnlich. Im Wesentlichen handelt es sich dabei um eine JavaScript-Datei. Diese Datei wird getrennt vom Hauptthread des Browsers ausgeführt und kann Ressourcen aus dem Cache des Browser zwischenspeichern und abrufen, Netzwerkanforderungen abfragen und Push-Nachrichten bereitstellen. Da Service Worker unabhängig vom Hauptthread ausgeführt werden, sind sie unabhängig von der Anwendung, von der sie verwendet werden. Dadurch kann der Service Worker unter anderem PUSH-Nachrichten empfangen, auch wenn die PWA nicht aktiv ist.

Die Nachrichten können dem Nutzer angezeigt werden, ohne, dass die App im Browser geöffnet sein muss. Diese Funktion ist jedoch abhängig davon, wie der Browser in das Betriebssystem integriert ist. Beispielsweise können auf Desktop-Computern installierte Firefox oder Chrome Browser nur Benachrichtigungen empfangen, wenn die Browser geöffnet sind. Das Android Betriebssystem öffnet den Browser automatisch, sobald eine Push-Nachricht vom Service Worker empfangen wird.

Bedeutung der PWA für SEO

Laut Google genießen PWA zur Zeit noch keinen Vorteil beim Ranking in den SERPs. Ob sich dies in Zukunft ändern wird, ist derzeit nicht bekannt. Eher nachteilig für die SEO ist, dass PWAs clientseitiges Rendering nutzen und im Wesentlichen aus einer HTML-Seite mit JavaScript bestehen. Webseiten dieser Art können zwar grundsätzlich von Google gecrawlt und indiziert werden, der Aufwand für das Crawlen ist für die Suchmaschine jedoch höher. Hinzu kommt, dass nicht alle SEO-Tools gerenderte Seiten unterstützen. Im Übrigen sind SEO-Techniken bei PWAs genauso anwendbar wie bei einer regulären Website.

Die in den Anfängen der PWAs von vielen kritisierte mangelnde Unterstützung durch Apple ist heute nicht mehr gegeben. Apple hat seine Marke und seinen Erfolg mit der Bereitstellung von Premium-Benutzererlebnissen für seine Kunden aufgebaut. Seit 2016 haben High-End-Marken und beliebte soziale Netzwerke wie Tinder und Twitter Progressive Web Apps für ihre mobile Präsenz übernommen. Apple kann es sich nicht leisten, für diese beliebten Webseiten eine geringere Nutzererfahrung als Android zu bieten. Da immer mehr Verbraucher-Websites und Handelsmarken Progressive Web-Apps auf den Markt bringen, investiert Apple jetzt in diese Technologie, die die Nutzererfahrung auf Mobilgeräten stets auf dem neuesten Stand hält.