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.

downasaur bild
“Reliability means never showing the Downasaur.” – Chris Wilson, Google

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

14.02.2023

Recruiting

In Zeiten, in denen es schwierig ist, qualifizierte Mitarbeiter zu finden, ist Performance Recruiting zu einer beliebten Personalbeschaffungsstrategie geworden. Aber was ist Performance Recruiting überhaupt und wie funktioniert es?

14.04.2021

E-Commerce

Kaum eine Branche hat in den letzten Jahren ein solches Wachstum hinlegen können wie der Online-Handel. Doch welche Trends werden die nächsten Jahre dominieren und ist damit der stationäre Handel überhaupt noch zukunftsfähig?

10.09.2020

Webentwicklung

Früher oder später wird jeder Webseitenbetreiber mit dem Thema "Relaunch" konfrontiert.
Wir verraten Ihnen unseren Workflow, mit dem auch Ihr Relaunch ein voller Erfolg wird.