Progressive Web App (PWA): Definition, Technik, Vorteile

Progressive Web Apps (PWA) vereinen Vorteile einer Webseite mit den Vorteilen einer nativen App. Der Begriff der PWA wurde erstmals 2015 von Google verwendet und war schon wenige Jahre später in aller Munde.

Was ist eine Progressive Web App?

PWAs kann man als eine hybride Art von Anwendung verstehen, die zwischen Webseiten und nativen Apps anzusiedeln ist. Progressive Web Apps werden üblicherweise drei Eigenschaften zugeschrieben, mit denen sie sich von herkömmlichen Webseiten auf der einen Seite und nativen Apps auf der anderen Seite unterscheiden sollen: Im Sprachgebrauch der Google-Entwickler sollen sie „capable“, „reliable“ und „installable“ sein. Jedes dieser Stichworte steht für ein Merkmal, das die User Experience von PWA im Vergleich zu Webseiten bzw. Apps verbessern soll:

„Capable“ – also „fähig“ – werden PWAs genannt, weil sie Funktionalitäten bieten, die man von herkömmlichen Webseiten früher nicht erwarten durfte. Hierzu zählen beispielsweise Push-Notifikationen, Geolocation und die Einbettung von Real-Time-Kommunikation, etwa über Sprache oder Video.
„Reliable“ – also „zuverlässig“ – sind PWAs, weil sie auch im Offline-Modus oder bei sehr geringer Bandbreite noch ohne merkliche Verzögerung funktionieren (oder klare und transparente Rückmeldung geben, falls doch einmal ein Request fehlschlagen sollte).
Und da sie „installable“ – also „installierbar“ – sind, können Progressive Web Apps nach Installation in einem Standalone-Fenster statt im Browser laufen. So werden im Browser eigentlich anderweitig reservierte Tastenkombinationen verfügbar, und die PWA kann von anderen Apps angesprochen werden, beispielsweise um Inhalte zu teilen. Sie werden vom Homescreen oder der Taskbar aus aufrufbar und können auch als Default-Anwendungen für bestimmte Arten von Dateien vorausgewählt werden.

Mit welchen Technologien arbeiten Progressive Web Apps?

Technisch gesehen ist eine PWA im Prinzip immer noch eine Web-Applikation (also über eine URL erreichbar, im Browser lauffähig und von Suchmaschinen indizierbar), die aber die immer weiter verfeinerten Funktionalitäten moderner Browser optimal ausnutzt, um ein app-ähnliches Verhalten (Offlinefähigkeit, Responsivität, Betriebssystemintegration etc.) zu erreichen

Eine notwendige Voraussetzung von PWAs ist die Nutzung von HTTPS. Dies ist auch bei herkömmlichen Webseiten schon weitgehend Standard geworden. Die beiden anderen notwendigen Komponenten von PWAs sind Service Workers und ein Web Application Manifest.

Bei Service Workers handelt es sich um einen besonderen Typ von Web Worker: Diese erlauben es, Skripte in einen Hintergrund-Thread auszulagern und unabhängig vom Haupt-Thread einer Webanwendung auszuführen. Das soll vor allem verhindern, dass aufwendige oder langwierige Operationen nicht die Benutzerinteraktion blockieren. Service Worker leisten das auch, arbeiten dabei aber als Proxy zwischen Server und Webbrowser, um die PWA offline verfügbar zu machen und wichtige Funktionalitäten wie etwa den Versand von Push-Benachrichtigungen umzusetzen.

Die Besonderheit: Ein Service Worker wird lokal installiert und kann mit mehreren Webseiten gleichzeitig zusammenarbeiten. So wird auch klar, warum keine PWA ohne HTTPS möglich ist: Service Worker haben die volle Kontrolle über die Kommunikation zwischen Server und Webbrowser und könnten ungesichert viel Schaden anrichten.

Die zweite PWA-Komponente, das Web App Manifest (oder kurz Web Manifest), definiert Details und Verhalten der UX der Progressive Web App. Es handelt sich um ein Textdokument im JSON-Format (JavaScript Object Notation) und enthält Startparameter sowie Standardwerte für die Anwendung und ihre Installation, zum Beispiel Icons für den Homescreen oder individuelle Vorgaben für den Splash Screen.

Frameworks wie das weit verbreitete Angular, React oder Vue.js sowie Bibliotheken wie Polymer unterstützen bei der Entwicklung von PWAs.

Ein Kugelfisch schließt Lücken zwischen Web und nativen Apps

Um die technologischen Grundlagen von Progressive Web Apps international zu standardisieren und sich im Look and Feel der PWAs noch weiter an native Apps anzunähern, haben Google, Microsoft und Intel das „Project Fugu“ (japanisch für „Kugelfisch“) ins Leben gerufen. Im Rahmen dieses Projekts werden Standards und Browser-APIs definiert, die als sogenannte Web Capabilitites bezeichnet werden und in Chromium umgesetzt werden.

Die wichtigsten Web Capabilities für PWAs im Project Fugu sind derzeit:

Native File System API zum Zugriff auf das lokale Dateisystem
Contact Picker API zum Zugriff auf die Kontakte
Wake Lock API zum An- und Abschalten des automatischen Bildschirm-Aus
Badging API zur Festlegung eines Notification Badge auf dem App-Icon, wenn die PWA installiert ist
Notification Triggers zur Vorausplanung von Notifications auch für Offline-Phasen
Shape Detection API zur Erkennung von Barcodes in Videos und Fotos
und weitere.

PWA: Vorteile und Nachteile

PWAs sind also gewissermaßen eine organische Weiterentwicklung von Webseiten auf der einen und nativen Apps auf der anderen Seite, die die jeweils spezifischen Mängel beider Arten von Anwendung beheben sollen – vor allem aus Sicht des Users:

User Research hat gezeigt, dass Benutzer den Zeitaufwand scheuen, eine App herunterzuladen, und aus diesem Grund beispielsweise im Online-Shopping den Besuch einer Webseite bevorzugen. Auch Speicherplatz ist ein Problem: Zu den häufigsten Gründen, die zur Deinstallation einer nativen App führen, zählt ein Mangel an Speicherplatz auf dem Gerät. PWAs benötigen deutlich weniger Speicherplatz als native Apps und lassen sich schneller installieren bzw. ohne Installation ausführen.
Native Apps punkten dagegen mit guter Integration ins Betriebssystem und vor allem mit Notifications. Diese sind aus Sicht von Marketing und Sales attraktiv, denn sie führen – etwa in Form von Kaufempfehlungen – häufig zu Conversions. Und auch User bewerten Benachrichtigungen als sinnvoll und hilfreich.
Webseiten wiederum sind von Suchmaschinen indizierbar, was für das Marketing von unschätzbarem Wert ist. Es kommt dabei aber oft zu Verzögerungen, Fehlermeldungen und somit einer schlechten User Experience, wenn die Bandbreite zu gering ist oder gar keine Internetverbindung besteht.

Viele der positiven Konsequenzen von PWAs für Unternehmen ergeben sich somit aus dem Gewinn an Usability und der vorteilhaften User Experience. Google zitiert etwa die Erfahrungen von Twitter: Nach dem Launch seiner Progressive Web App verzeichnete der Dienst einen Zuwachs von 65 Prozent an pro Session besuchten Seiten und gleichzeitig eine Abnahme der Bounce Rate um 20 Prozent.

Vorteile von Progressive Web Apps voll ausspielen

Wer diese Vorteile realisieren will, darf aber eine PWA nicht einfach als Webseite denken. Bestimmte Gewohnheiten, die Webentwickler von der Arbeit an herkömmlichen Webseiten mitbringen, müssen bewusst durch andere Vorgehensweisen ersetzt werden, damit PWAs ihre Stärken voll ausspielen können.

Um Usern auch bei langsamer Internetverbindung eine gute Führung zu geben, sollte bei der Gestaltung einer Progressive Web App vermehrt mit Skeleton Screens gearbeitet werden – also stilisierten Darstellungen der gerade ladenden Inhalte. So bleibt der User orientiert. Eine Reihe anderer Techniken sorgt ebenfalls dafür, dass Besucher nicht frustriert abspringen: Responsives Feedback kann durch zusätzlichen Code sichergestellt werden, virtualisierte Listen und geräteeigene Fonts (statt Custom Fonts) beugen Problemen bei der Ladeperformance vor. Auch geschicktes Caching oder serverseitiges Rendering verbessern das Ladeverhalten, und nicht zuletzt das von Google empfohlene PRPL-Pattern.

PRPL steht für Preload, Render, Pre-cache und Lazy Load und bezeichnet ein Pattern für die Strukturierung von PWAs, mit dem Seiten möglichst schnell geladen und bedienbar werden: Die wichtigsten Ressourcen sollen vorab geladen werden, damit so schnell wie möglich etwas dargestellt wird (First Contentful Paint). Zudem sollen die Caching-Fähigkeiten der Service Worker ausgenutzt und nicht-kritische Ressourcen erst bei Bedarf geladen werden.

Möchten Sie tiefer in die technische Umsetzung von PWAs einsteigen und Ihre eigene PWA auf den Weg bringen? Dann lesen Sie weiter in unserem Artikel Was Sie über die Entwicklung von Progressive Web Apps wissen sollten.

Titelmotiv: Photo by Christina @ wocintechchat.com on Unsplash

Über
Letzte Artikel

Host Europe

Hinter Ihrem Web-Erfolg steht höchste Leistung. Wir erfüllen auch Ihre Hosting-Wünsche – mit engagierten Experten und führenden Technologien. Host Europe - Professionelle Hosting Services für Privatkunden & Unternehmen.

Letzte Artikel von Host Europe (Alle anzeigen)