Unser rasender Entwickler Daniel war im Juni zu Gast auf der Contao Konferenz und hat das Ohr an den Puls der Entwicklergemeinde gelegt. Eine großartige Neuerung, die sich auch mit Contao umsetzen lässt, sind Progressive Web Apps, kurz PWAs. Dadurch werden Webseiten zu Apps. Was das genau heißt und welche Vorteile und Möglichkeiten sich dadurch ergeben, wollen wir mal beleuchten.
Die App dominiert
Vorgestellt wurde das Thema von Joe Ray Gregory, seines Zeichens Frontend Architekt bei G+J Digital Productions und Urgestein der Contao Community. Den ganzen Vortrag gibt’s hier zu sehen:
Smartphones werden von nativen Apps dominiert, wie sich an der durchschnittlichen, monatlichen Verweildauer zeigt. Joe hatte aktuelle Daten von Comscore parat, die zeigen, dass Nutzer nur 13% Ihrer Zeit auf mobilen Websites verbringen (das sind ca. 12 Minuten) und dagegen rund 87% in nativen Apps (ca. 187 Minuten monatlich). Das mobile Web ist also definitiv kaputt! Warum aber sind native Apps so beliebt?
80% der Nutzer halten sich fast ausschließlich in ihren drei Lieblings-Apps auf, während 51% der User nach Einrichtung des Smartphones keine einzige weitere App installieren.
Vor- und Nachteile nativer Apps gegenüber mobilen Websites
Die klaren Vorteile von Apps gegenüber mobilen Websites sind der (von der Internetverbindung unabhängige) schnelle Start, der Zugriff auf Gerätefunktionen, sie sind offline verfügbar, haben einen Home Screen Button, also ein Schnellstart-Icon auf dem Home Screen des Smartphones, sie bieten eine jeweils eigene Nutzerumgebung und haben push notifications (also Systembenachrichtigungen) als zusätzlichen Kommunikationskanal.
Aber Joe nannte auch einige Nachteile: 80% der Nutzer halten sich fast ausschließlich in ihren drei Lieblings-Apps auf, während 51% der User nach Einrichtung des Smartphones keine einzige weitere App installieren. Das bedeutet: wer jetzt noch auf den App-Zug aufspringen will, findet mit großer Wahrscheinlichkeit keine relevante Nutzergruppe mehr, die die App auch tatsächlich aktiv und wiederholt nutzt.
Hochzeit statt Rosenkrieg: Websites mit den Vorteilen nativer Apps
| Feature | Native App | PWA |
|---|---|---|
| Offline Funktionen | ||
| Mobile spezifische Navigation | ||
| Push notifications | ||
| Home Screen Button | ||
| Benötigt keinen Download | ||
| Benötigt keinen App-Store | ||
| Verlinkbar und teilbar | ||
| Indiziert von Suchmaschinen | ||
| Benötigt wenig Speicher | ||
| Benötigt keine aktiven Updates |
Sieht man sich dagegen nämlich die Aufrufe pro Monat an, spielen Websites bei den wiederkehrenden Besuchen eine weitaus wichtigere Rolle, mit 15,7 Millionen monatlichen Visits gegenüber 7 Mio. Aufrufen von nativen Apps.
Es wäre doch aber eine gute Idee, die Vorteile der nativen Apps mit denen einer mobilen Website zu verbinden! Dachten sich einige Entwickler schon vor geraumer Zeit und haben Progressive Web Apps (kurz: PWAs) ins Leben gerufen.
PWAs sind im Grunde Websites mit den Eigenschaften einer nativen App. Google beschreibt ihre Grundeigenschaften (und Vorteile) mit dem Akronym FIRE:
- fast (= schnelles Ladeverhalten)
- integrated (= in die Geräteumgebung integriert mit Zugriff auf Gerätefunktionen)
- reliable (= verlässlich, weil nicht auf eine aktive, bzw. schnelle Internetverbindung angewiesen)
- engaging (= dem Nutzer das Gefühl geben, dass er/sie wiederkommt und wiedererkannt wird)
Hier eine schöne Übersicht über native Apps und PWAs im Vergleich, die Joe benutzt hat, um zu erklären, wo die großen Vorteile von PWAs gegenüber nativen Apps liegen:
PWAs am Desktop: nicht nur „mobile“ relevant
Aber Progressive Web Apps sind nicht nur für Smartphones und Tablets interessant, sondern können auch am Desktop ihr Potential entfalten. Die Deutsche Bahn etwa hat ihr „Im ICE“-Portal als PWA aufgebaut und bietet damit App-Funktionalitäten auch für Laptop-Nutzer im Zug. Auch Twitter nutzt mittlerweile eine PWA, die als Alternative zur nativen App (die immerhin auf iOS über 100 MB Systemspeicher belegt) mit schnellen Ladezeiten, einem echten Offline-Erlebnis und geringem Speicherverbrauch punkten kann. Zu finden ist sie unter https://mobile.twitter.com
Ein anderer Indikator für die Relevanz von PWAs auf dem Desktop ist, dass sich auch Microsoft App Store immer mehr PWAs finden und damit in die „klassische“ Desktop-Software-Domäne vordringen. Der Chrome Browser wird es bald ermöglichen, Desktop PWAs aus dem Browser heraus zu installieren. Denn im Grunde genommen sind solche Desktop-PWAs kleinere Browser-Instanzen (sozusagen Tabs), die in einem „Container“ geladen werden und eine Website aufrufen, die die zusätzlichen Funktionen einer PWA nutzt.
Beim Besuch einer PWA wird ein so genannter „App Install Banner“ in Form einer Browser-Benachrichtigung anzeigt, die nachfragt, ob man die Seite dem Startbildschirm hinzufügen möchte. Damit wird die PWA auf dem Gerät „installiert“ und wie eine native App (egal, ob Desktop oder mobile) angezeigt und nutzbar.
Digital offline denken: Vorteile der PWA gezielt ausspielen
Für PWAs gibt es zwei verschiedene Möglichkeiten, sie auf einem mobilen Endgerät (Smartphone oder Tablet) anzuzeigen:
- standalone (hier werden noch die Geräte-Bedienelemente und die Statusbar am oberen Bildschirmrand angezeigt)
- fullscreen (Vollbildanzeige ohne Kontroll- und Systemelemente)
PWAs können Inhalte auch offline darstellen, weil sie dank eines Service-Worker-Dienstes schon gesehene Daten im Cache ablegen und damit schneller und Netz-unabhängig bereitstellen können. Mit einer Hintergrundsynchronisation, wenn das Gerät wieder online ist, wird z. B. zeitversetztes Ausfüllen und Abschicken von Formularen möglich.
Joe war es wichtig, dass Entwicklung (und Konzepter) bei PWAs offline anfangen, zu denken. Denn die großen Vorteile einer PWA kommen hier am stärksten zu tragen. Außerdem lassen sich damit nicht nur die extremen Fälle „keine Verbindung“ und „super Verbindung“ abdecken, sondern auch die „Grau“-Bereiche dazwischen, die aber im Alltag ständig vorkommen: langsame oder immer wieder abreißende Verbindung zum Internet.
Weil bereits besuchte Inhalte aus dem Cache abgerufen werden können und bestimmte Inhalte auch automatisch bereitgehalten werden können, ist es beispielsweise möglich, bei einer getrennten Internetverbindung oder wenn die Ladezeit eine kritische Menge überschreitet, dem Nutzer bestimmte Inhalte anzuzeigen. Statt einer beliebigen „du bist leider offline“-Meldung gibt es dadurch die Option, individuell angepasst Inhalte von der Website auszuspielen, die in der Zwischenzeit bis zur nächsten aktiven Internetverbindung angeschaut werden können. Das hat nur einen gewaltigen Nachteil: niemand wird mehr mit dem niedlichen Downosaur spielen – aber auch dafür gibt es eine Lösung: https://chromedino.com/.
Mit Sinn und Verstand: behutsam mit neuen Möglichkeiten umgehen
Die neuen Möglichkeiten von PWAs bringen auch neue Risiken mit sich, wenn sie gegenüber den Seitenbesuchern nicht sinnvoll eingesetzt werden. Die Web Push Notifications etwa sollten nicht dazu genutzt werden, jedem Besucher sofort die Installation anzubieten, sondern entlang sinnvoller Anwendungsfälle eingesetzt werden.
Wie wäre es zum Beispiel, Besuchern Ihrer Website, die sich länger als 30 Sekunden in Ihrem Produktkatalog umgesehen haben, eine Installation anzubieten? Oder Lesern Ihres Blogs, die dann den Vorteil hätten, immer aktuelle Inhalte auch mobil optimal verfügbar zu haben?
Unser Frontend-Entwickler Daniel freut sich schon auf die ersten PWA-Projekte:
Joes Vortrag war nicht nur super aufbereitet, ich bin auch von den Möglichkeiten, die mir PWAs bieten, absolut begeistert. Das ist die Zukunft des mobilen Webs!
Daniel Gmoser, Frontend-Developer bei TN34
Lassen Sie uns doch mal gemeinsam Ihre Webseite anschauen und sie bereit für die Welt der PWAs machen!
