Progressive-Web-Apps

Häufige Fragen zu Progressive-Web-Apps

Was ist eine PWA?

PWA steht für Progressive-Web-App. Web-Apps sind Software-Anwendungen, die über das Internet erreichbar sind und im Browser ausgeführt werden. Üblicherweise beschränkt sich der Funktionsumfang von Web-Apps auf das Anzeigen, Erfassen und Editieren von Daten. Progressive-Web-Apps erweitern diesen eingeschränkten Umfang: Beispielsweise können PWAs auf die Gerätehardware zugreifen oder Code im Hintergrund ausführen.

Wie sieht der User-Flow mit einer PWA aus?

1. Auffinden: PWAs werden nicht im App-Store angezeigt. Sie können Ihre App direkt verlinken (z.B. in einem Newsletter), in der Google-Suche platzieren oder über einen QR-Code verbreiten.
2. Erste Verwendung: Während eine durchschnittliche Android-App 15MB groß ist und eine iOS-App im Schnitt sogar 38MB beansprucht, beläuft sich die Größe von PWAs meist nur auf einige Kilobyte. Daher können sie auch problemlos unterwegs über das mobile Datennetz geladen werden. Einmal aufgerufen verbleibt die App im Speicher, sodass der Download bei weiteren Aufrufen sogar ganz wegfällt und die App auch offline genutzt werden kann.
3. Installation: Falls dem Nutzer die App gefällt und er sie zukünftig wieder verwenden will, kann er sie mit einem Fingertippen zum Homescreen hinzufügen. Manche Browser schlagen die Installation automatisch vor, bei anderen muss der Nutzer selbst aktiv werden.
4. Regelmäßige Nutzung: Nach der erfolgreichen Installation ist die App über ein normales App-Icon auf dem Homescreen verknüpft. Wird sie darüber aufgerufen, öffnet sich nicht mehr der Browser, sondern ein eigenständiges App-Fenster. Dieses Fenster beinhaltet weder eine URL-Leiste, noch andere Menü-Elemente des Browsers, sodass die PWA kaum mehr von 'normalen' Apps zu unterscheiden ist.
5. Deinstallation: Wie native Apps auch, lassen sich PWAs auch über das App-Icon wieder vom Smartphone entfernen.

Für welche Use-Cases eignen sich PWAs?

Der größte Vorteil von PWAs ist die geringe Nutzungshürde. Nur wenige Nutzer downloaden sich eine App um beispielsweise einen Tisch in einem Restaurant zu reservieren. Da eine PWA nicht installiert werden muss, sondern sofort Einsatzbereit ist, eignet sie sich besonders, wenn Schnelligkeit, Erreichbarkeit und Leichtgewichtigkeit wichtiger sind, als Funktionsreichtum.

Warum ist es ein Vorteil, dass PWAs nicht über den App-Store vertrieben werden?

Der App-Store ist sowohl für App-Entwickler als auch für Nutzer mit Aufwand verbunden. Nutzer müssen den App-Store öffnen, die gewünschte App finden, den Download, die Installation und den ersten App-Start abwarten. Nicht jeder Nutzer nimmt diese Arbeit auf sich, um eine neue App auszuprobieren.

App-Entwickler sparen mit dem Verzicht auf den App-Store Kosten: Um überhaupt eine App in den App-Store stellen zu können, fallen bei Apple 99€ und bei Google 20€ pro Jahr an. Darüber hinaus verlangen die beiden Unternehmen bis zu 30% der in der App erzielten Umsätze. Diese Gebühren fallen bei einer PWA nicht an.

Welche Einschränkungen haben PWAs?

PWAs sind eine noch junge Technologie. Nicht alle Browser unterstützen alle Funktionen in gleichem Maße. Während Chrome für Android eine weitestgehend vollständige Unterstüzung des PWA-Standards bietet, hinkt Apple mit Safari für iOS noch deutlich hinterher. Auf iOS sind aktuell folgende Funktionen nicht unterstützt:

• Push-Notifications, wenn die App geschlossen ist
• Kein Installation-Banner (manuelles Add-to-Homescreen ist aber möglich)
• Probleme bei der Hintergrundsynchronisierung
• Kein Support für andere Browser als Safari

In der Vergangenheit hat sich hier aber bereits einiges getan, sodass davon auszugehen ist, dass der Support auf iOS zukünftig noch besser wird.

Welche technischen Konzepte stecken hinter PWAs?

Service Worker

Der Service Worker ist ein Proxy zwischen Web-Browser und Server. Er wird in JavaScript programmiert, wobei der Code unabhängig vom Hauptthread läuft. Sein Haupteinsatzgebiet ist die Implementierung der Offline-Verfügbarkeit und der Empfang von Push-Notifications.

Web App Manifest

Das Web App Manifest ist eine JSON-Datei, die Informationen über die App beinhaltet, z.B. Name, Icon und diverse Meta- und Konfigurationsdaten. Die Daten werden insbesondere – aber nicht ausschließlich – für die Add-to-Homescreen-Funktion benötigt.

Was bedeutet 'Progressive'?

Der Begriff leitet sich vom Konzept des Progressive Enhancement ab. Dabei handelt es sich um eine Methode im Webdesign, eine Seite so zu entwickeln, dass sie für ältere Browser und Nutzer mit geringe Bandbreite zugänglich ist. In moderneren Browsern und bei besserer Internetverbindung werden dann erweiterte Funktionen freigeschaltet.

Progressive-Web-Apps funktionieren nach dem selben Prinzip. Die App sollte in ihren Grundfunktionen für alle nutzbar sein. Nutzer mit modernen Browserns (z.B. Chrome für Android) kommen darüber hinaus in den den Genuss der PWA-Features wie Offline-Verfügbarkeit, Push-Notifications und Add-to-Homescreen.

Mit welchen Frameworks lassen sich PWAs programmieren?

PWAs basieren auf offenen Web-Standards, d.h. es sind keine besonderen Frameworks für die Entwicklung notwendig. Wer möchte, kann eine PWA ausschließlich mit HTML, CSS und (Vanilla-)Javascript programmieren. Es empfiehlt sich jedoch ein Frontend-Framework wie Angular, Vue oder React einzubeziehen.