Progressive Web Apps sind nichts mehr als «klassische» Websites, die mit gewissen modernen Features angereichert und ergänzt werden. Für die Nutzer bieten sie eine User Experience, die mit derjenigen von nativen Apps mithalten kann. Was ist mit PWAs wirklich möglich?
Progressive Web Apps (PWAs) kommen nativen Apps in vielen Hinsichten schon sehr nahe: Sie können auf dem Home Screen installiert werden, öffnen sich wie eine normale App ohne URL-Leiste und Browser-Navigation und können – auch wenn sie nicht geöffnet sind – Push-Nachrichten empfangen. Zudem laufen sie auch, wenn keine Internet-Verbindung besteht.
Die Progressive Web App der Financial Times können Sie wie eine App auf dem Smartphone installieren. Sie lädt die Inhalte der Tagesausgabe herunter und läuft auch offline. Sie ist dadurch sehr schnell und flüssig und hat auch sonst viele App-ähnliche Funktionalitäten.
Erfolgsgeschichten zu Progressive Web Apps
Einige grosse Anbieter haben bereits begonnen, ihre Websites zu Progressive Web Apps umzubauen oder zusätzlich zu nativen Apps mit PWAs zu experimentieren. Manche haben schon erste Zahlen veröffentlicht, die fast durchwegs positiv ausfallen. Einige Beispiele:
Twitter Lite ist ein Musterbeispiel in Sachen Speed Performance. Mit React und Service Workers Pre-Caching wurde eine hochperformante «Light» Version der Twitter App gebaut, die sehr schnell ist. Sie hat Erfolg: Nutzer schauen sich 65% mehr Seiten pro Besuch an und senden 75% mehr Tweets als mit der alten App. Im Vergleich mit der nativen App sank die Bounce Rate (Anzahl Nutzer, die irgendwo im Installationsprozess abbrachen) um 20%.
Forbes verzeichnete auf seiner Progressive Web App einen signifikanten Anstieg von Besuchen pro Nutzer (43%). Ausserdem scrollten die Nutzer drei Mal so weit und sahen dadurch viel mehr Inhalt. Ihre aktuelle PWA ist nicht nur schneller als die mobile Website, sondern auch schneller als ihre native App.
OLX, einer der grössten Online-Kleininserate Plattformen in Indien, profitierte ebenfalls von den Vorzügen einer PWA: 250% mehr Re-Engagement, 80% weniger Bounce Rates, 23% weniger Zeit bis eine Seite interaktiv ist, und 146% höhere CTRs auf Anzeigen (click-through-rate).
Was können PWAs?
Es soll – trotz allem Enthusiasmus – nicht verschwiegen werden, dass es noch diverse Unterschiede gibt, wie Betriebssysteme und Browser PWAs genau unterstützen. Die folgende Aufstellung zeigt die wichtigsten Funktionalitäten auf, die mit nativen Apps, PWAs auf Android und PWAs auf iOS realisiert werden können. Die Einschränkungen für PWAs resultieren daraus, dass der Browser oder das Betriebssystem Standards noch nicht unterstützt. Man darf jedoch annehmen, dass sich die Plattformen künftig annähern werden.
Installierbarkeit als App
| Was? | Möglich in nativer App? | Möglich in PWA auf Android / Chrome | Möglich in PWA auf iOS / Safari |
|---|---|---|---|
| Installierbar auf Home-Screen mit eigenem Icon | Ja | Ja | Ja |
| Direktes Installieren aus dem Browser | Nein, nur via App-Store | Ja | Ja (ohne App Store) |
| Fullscreen-Modus nach Installation | Ja | Ja | Ja |
Offline- & Background-Modus
| Offline-Fähigkeit | Ja | Ja | Ja (bis 50MB) |
| Senden von Push Notifications an die App | Ja | Ja | Nein (noch nicht unterstützt; es gibt allerdings Workarounds wie pushalert.io) |
| Synchronisierung, wenn die App nicht geöffnet ist | Ja | Ja | Nein |
| Direkte Verlinkung in die App | Ja | Ja | Nein (bzw. nur auf die Version im Browser mit Browser Controls) |
Zugriff auf Hardware/Peripherie/Sensoren
| Zugriff auf Sensoren (Magnetometer, Accelerometer, Gyroskop), Kamera und Audioausgang | Ja | Ja | Ja |
| Nutzung von Bluetooth (BLE) | Ja | Ja | Nein |
Zugriff auf Services/APIs
| Geolokalisierung | Ja | Ja | Ja |
| Zugriff auf Sprachsynthese z.B. zum Erstellen von Text to Speech Funktionalität | Ja | Ja | Ja |
| Zugriff auf Apple Pay/Google Pay | Ja | Ja | Ja |
| Nutzung von WebAssembly (Performance Optimierungen), Web RTC (direkte Kommunikation Browser zu Browser), Web GL (2D und 3D Grafiken) | Ja | Ja | Ja |
| Zugriff auf nativen Share-Dialog des Geräts | Ja | Ja | Nein |
| Spracherkennung | Ja | Ja | Nein |
| Zugriff auf Touch ID und Face ID, ARKit und Siri | Ja | Nein | Nein |
Fazit
Zusammengefasst kann man sagen, dass Apple noch ein bisschen hinterher hinkt. PWAs auf iPhones sind für bestimmte Funktionalitäten deshalb noch nicht geeignet. Aber auch Apple hat angefangen die Standards nach und nach besser zu unterstützen. Es ist nur eine Frage der Zeit, bis sie mit Android gleichziehen. Für viele Apps sind PWAs aber bereits jetzt durchaus eine Alternative zu nativen Apps. Insbesondere, weil es für die Abwägung zwischen nativen Apps und PWAs noch weitere gute Argumente für PWAs gibt. Mehr dazu im Artikel Progressive Web Apps: Eine valable Alternative zu nativen Apps?»
Wir haben den Artikel im April 2019 ergänzt mit Präzisierungen und Neuerungen, die sich v.a. auf Safari in iOS beziehen.
Weiterführende Informationen zu PWAs und Native Apps
- Why Progressive Web Apps Will Replace Native Mobile Apps (!)
- Progressive Web Apps: Bridging the gap between web and mobile apps
- 4 important points to know about Progressive Web Apps (PWA)(dieser Artikel ist leider schon veraltet punkto Kompatibilität, aber trotzdem noch lesenswert)
- Technische Resourcen für Entwickler (Google)
- Progressive Web Apps on iOS are here (sehr ausführlicher Artikel – zeigt u.a. wodurch sich Android von iOS PWAs unterscheiden)
Kommentare