PWA, was ist das überhaupt?
Im ersten Teil dieser Blogreihe beschäftigen wir uns erstmal mit der grundlegenden Idee der Progressive Web Apps, welche Vorteile sie bieten und was es zu beachten gilt.
Wer häufig unterwegs mit dem Handy surft, kennt das Problem: Man besucht mit dem mobilen Browser eine Website und plötzlich bricht die Verbindung ab. Der "Downanasaur" erscheint und sie werden aufgefordert, es später nochmal zu versuchen. Oft schaffen in solchen Fällen Apps abhilfe, da sie auch ohne Verbindung zum Internet, in einem gewissen Rahmen versteht sich, nutzbar bleiben.
Laut einer Umfrage, weshalb Nutzer bei Firmen wie Facebook die native App der mobilen Website vorziehen, ist die einfache Erreichbarkeit dieser über den Homescreen und die für die mobile Nutzung optimierte Bedienung. Zum Vergleich: 87 % unserer Zeit am Handy verbringen wir mit nativen Apps (davon 78% in unseren drei "Lieblingsapps") und nur 13 % mit der Nutzung von mobilen Websites (Quelle: Commscore Mobile Metrix, US 2017).
Die Idee der Progressive Web App (PWA) klingt also durchaus simpel: Warum nicht beides zusammenbringen? Das Beste aus zwei Welten sozusagen, die Vielfalt und Reichweite des Webs und der mobil optimierten User Experience der Mobile Apps.
Das beste aus zwei Welten
Viele Eigenschaften der PWA lassen sich anhand des vom Google definierten Leitbilds FIRE (Fast, Itegrable, Reliable, Engaging) erklären.
Fast
Unabhängig von der Internetgeschwindigkeit läuft die Bedienung flüssig und schnell. Sie können Seiten wechseln, ohne lange Wartezeiten fürchten zu müssen und komplexere PWAs können sich sogar selbst in der Funktionalität beschränken, wenn das mobile Endgerät die technischen Voraussetzungen nicht erfüllt.
Integrable
Durch einen einfachen Klick auf das Widget auf dem Homescreen des Smartphones, lassen sich die Web Apps wie native Apps spielend leicht starten, ohne erst nach der Website im Browser suchen zu müssen. Dabei verhält sich die PWA auch optisch gänzlich wie eine App.
Reliable
Eine PWA funktioniert zu jeder Zeit, mit- oder ohne Netz. Durch die Offline-Verfügbarkeit der Anwendung, sowie durch schnelle Ladezeiten, ist es dem Anwender zu jederzeit möglich, den gewünschten Service zu nutzen.
Engaging
Um Nutzer zurück auf Ihre Website zu holen, blieb uns bisher nur die Möglichkeit, Werbung über Social Media oder Newsletter zu versenden. Eine tolle Funktion der PWA, die Push Notification, kann, sofern Sie richtig eingesetzt wird, User per "One-Click" auf die gewünschte Seite Ihrer App bringen.
Um eine bestehende Website um die Funktionen einer PWA zu ergänzen, gilt es einige Anforderungen zu erfüllen. Viele davon zählen jedoch ohnehin schon zur "Best Practice" der meisten Webentwickler und sollten deshalb keine große Hürde darstellen. Die Anforderungen, sowie die Vorteile haben wir im Folgenden aufgelistet:
Vorteile einer PWA
- Installation auf dem Homescreen
- Offline Verfügbarkeit
- Versenden von Push-Benachrichtigungen
- Zugriff auf Geo-Daten des Benutzers
- Zugriff auf Kamera und Mikrofon
Voraussetzungen
- HTTPS (SSL-Verschlüsselung)
- Responsive Darstellung aller Inhalte
- Alle URLs der App sind Offline verfügbar
- Crossbrowser Kompatibilität
- Jede Seite ist über eine URL aufrufbar
- Web App Manifest (Mehr dazu in Teil 2)
Um zu überprüfen, ob die eigene Webanwendung bereits PWA-tauglich ist, eignet sich das von Google bereitgestellte Tool Lighthouse hervorragend.
Fazit
Dies war der erste Teil unserer Reihe "Progressive Web Apps - Das Web wie es sein sollte?". Im zweiten Teil beleuchten wir zwei der wichtigsten Eigenschaften einer PWA, das Web App Manifest und den Service Worker, im Detail.
Weitere interessante Beiträge...
