Progressive Web Apps: Websites und Apps rücken näher

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?

von Dragan Nikolic

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 / ChromeMöglich in PWA auf iOS / SafariInstallierbar auf Home-Screen mit eigenem IconJaJaJaDirektes Installieren aus dem BrowserNein, nur via App-StoreJaJa (via Share > zum Homescreen hinzufügen)Fullscreen-Modus nach InstallationJaJaJa

Offline- & Background-Modus

Offline-FähigkeitJaJaJaSenden von Push Notifications an die AppJaJaNein (noch nicht unterstützt)Synchronisierung, wenn die App nicht geöffnet istJaJaNeinDirekte Verlinkung in die AppJaJaNein (bzw. nur auf die Version im Browser mit Browser Controls)

Zugriff auf Hardware/Peripherie/Sensoren

Zugriff auf Sensoren (Magnetometer, Accelerometer, Gyroskop), Kamera und AudioausgangJaJaJaNutzung von Bluetooth (BLE)JaJaNein

Zugriff auf Services/APIs

GeolokalisierungJaJaJaZugriff auf Sprachsynthese z.B. zum Erstellen von Text to Speech FunktionalitätJaJaJaZugriff auf Apple Pay/Google PayJaJaJaNutzung von WebAssembly (Performance Optimierungen), Web RTC (direkte Kommunikation Browser zu Browser), Web GL (2D und 3D Grafiken)JaJaJaZugriff auf nativen Share-Dialog des GerätsJaJaNeinSpracherkennungJaJaNeinZugriff auf Touch ID und Face ID, ARKit und SiriJaNeinNein

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?»

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)
• A community-driven list of stats and news related to Progressive Web Apps