Progressive Web Apps: Sind Websites die besseren Apps?

Progressive Web Apps präsentieren das Beste aus Web Applikationen und nativen Apps, so proklamiert es Google. Mit ihrem beliebten Browser Chrome bieten sie die Möglichkeit, Websites PWA-gerecht zu gestalten. Aber auch andere Browser wie Edge, Firefox und zuletzt Safari haben die Zeichen der Zeit erkannt und ermöglichen es, eine mobile Website einer nativen App anzunähern.

Was sind überhaupt Progressive Web Apps?

Besser gefragt wäre wohl: was macht eine Website “fortschrittlich”? Diese Frage beantwortet Google mit drei Voraussetzungen, die eine Website dafür erfüllen muss. Sie muss verlässlich, schnell und engaging sein.

Verlässlichkeit soll durch ein sofortiges Laden der Website garantiert werden - unabhängig von der Internetverbindung.

Bezüglich der Schnelligkeit geht das Schwergewicht aus dem Silicon Valley noch einen Schritt weiter. Sobald die Website geladen wurde, soll die User Experience nicht durch ein langsam reagierendes Interface gestört werden.

Ein hohes Engagement soll dadurch gegeben sein, indem die Website auf dem Home Screen des Smartphones “installiert” werden kann, beim Öffnen die Website den vollen Bildschirm einnimmt und Push Notifications, die man normalerweise nur von nativen Apps kennt, zum wiederholten Besuch der Website einladen.

Das klingt alles sehr beeindruckend, wirst du vielleicht denken.

Aber wie kompliziert ist die technische Umsetzung?

Fangen wir mit der “Installation” an. Wenn wir die Website PWA-gerecht zum Home Screen hinzufügen wollen, brauchen wir ein manifest.json, das nach eigenen Wünschen gestaltet werden kann. Das Web App Manifest beinhaltet Informationen wie den Namen, die URL, von der gestartet werden soll wie auch die Vorgabe, in welchem Umfang der Bildschirm während der Benutzung von der Web App eingenommen werden soll. Außerdem verweist es auf das Icon, welches nach der Installation unter den anderen Apps auftaucht. Das manifest.json muss danach nur noch per link tag in alle Seiten, die die Web App umfasst, eingebunden werden.

{
  "short_name": "Hyb Heroes",
  "name": "Hybrid Heroes",
  "icons": [
    {
      "src": "/images/icons-015.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    "src": "/images/icons-019.png",
      "type": "image/png",
      "sizes": "192x192"
  ],
  "start_url": "/",
  "background_color": "#ffffff",
  "display": "standalone",
}

In Chrome und Edge wird zusätzlich eine Add to Homescreen prompt (ein Banner, welcher nach ein paar Sekunden auftaucht und fragt, ob die Web App zukünftig auf dem Screen erscheinen darf), benötigt. Bei Firefox und Safari kann die Web App lediglich über die Browser-Navigationsleiste hinzugefügt werden.

Schnelligkeit und Verlässlichkeit werden durch Service Worker gewährleistet. Service Worker sind ein Proxy zwischen Client und Server. Sie entscheiden welche Daten zu welchem Zeitpunkt sich im Cache des Browsers befinden sollen. So können sie beispielsweise dafür sorgen, dass beim Hinzufügen der Web App zum Home Screen die für die minimale Funktionalität der App benötigten HTML-, CSS- und Javascript-Dateien (App Shell) in den Cache geladen werden. Damit kann die Web App ohne Probleme auch offline fortan aufgerufen werden.

Ein Feature, was besonders zum Re-Engagement mit der Web App verführt, ist die Push Notification. Push Notifications können in Progressive Web Apps lokal verschickt werden, wenn ein bestimmtes Event ausgelöst wird, oder sie können personalisiert vom Server zum Nutzer “gepusht” werden. Die Implementierung bedarf zwei wenig überraschender APIs: die Notifications API und die Push API. Sie werden von den meisten Browsern und Betriebssystemen unterstützt.

Hinzu kommen weitere Features, die in der Website implementiert werden können. So kann ebenso die Geolocation des Nutzers abgerufen werden. Ebenfalls können Websites erstellt werden, die auf die Kamera oder das Mikrofon zugreifen. Auch der Einsatz der Vibration des Smartphones kann deine Progressive Web App ergänzen.

Der direkte Vergleich mit nativen Apps

Der ein oder andere Pluspunkt von Progressive Web Apps ist dir möglicherweise schon aufgefallen. Ein immenser Vorteil ist wohl die Einfachheit der Installation sowohl für den Nutzer als auch für den Anbieter. Zur Herstellung der PWA muss nicht durch das ganze App Store-Prozedere gegangen werden und erspart somit dem Anbieter viel Zeit und Kosten. Der Nutzer auf der anderen Seiten befindet sich sowieso schon auf der Seite und scheint Interesse an dem Inhalt zu haben. Dieser muss im Folgenden nur noch kurz bestätigen, falls die Web App in Zukunft auf dem Home Screen erscheinen soll.

Im Zusammenhang mit dem Erwecken von Interesse zeigt sich auch der nächste Vorteil. PWAs sind in jeder gängigen Suchmaschine auffindbar. Zudem können sie via URL wie zuvor als simple Web App geteilt werden. Zu guter Letzt ist auch der Trend auf der Seite von Progressive Web Apps. Denn die Reichweite von mobilen Webseiten ist mehr als doppelt so hoch wie bei nativen Apps. Allerdings ist die Verweilzeit kürzer.

Auch wenn auf viele Funktionen des Smartphone zugegriffen werden kann, sind PWAs in diesem Punkt im klaren Nachteil gegenüber nativen Apps. Es gibt keine Möglichkeit auf den Kalender, auf den Alarm oder auf die Kontakte Zugriff zu erhalten. Eine vollständige Liste, was geht und was nicht, findest du hier.

Der größte Nachteil von PWAs ist allerdings die teilweise fehlende Unterstützung von Apple. Obwohl Safari durch ein Update Anfang vergangenen Jahres essentielles für PWAs wie Service Worker eingeführt hat, liegt Safari gegenüber seinen Mitstreitern weiterhin weit zurück.

Die Einschränkungen auf iOS beginnen beim Offline Caching. Die Nutzer können maximal 50 MB in ihren Browser-Cache laden. Die Daten stehen auch nur ein paar Woche zur Verfügung und müssen dadurch neu geladen werden, wenn die Web App in dem Zeitraum nicht genutzt wurde. Zudem funktionieren Web Push Notifications und weitere Features nicht auf iOS. Das manifest.json wird auch nicht angenommen. Stattdessen muss mit dem apple-touch-icon link und anderen Abhilfen gearbeitet werden, damit dasselbe Look and Feel wie bei Android entsteht.

Sind jetzt Websites die besseren Apps?

An dieser Stelle soll nochmal die Anfangsfrage aufgegriffen werden. Denn mit Hinblick auf die stiefmütterlichen Behandlung von PWAs von Seiten Apples lässt sich zusammenfassen, dass Progressive Web Apps noch nicht fortschrittlich genug sind, um native Apps plattformübergreifend zu verdrängen. Allerdings können sie je nach Anforderungen und Kontext für bestimmte Anwendungen Alternativen darstellen.

Zu erwähnen sei noch, dass Progressive Web Apps ebenso auf Desktop-Ebene eingesetzt werden können, um die User Experience zu steigern. Die Implementierung unterscheidet sich nicht großartig von der Implementierung für mobile Endgeräte. Sie baut auch auf Service Worker auf, die den Inhalt der Web App offline verfügbar machen, und die Web App kann darüber hinaus ebenfalls durch Web Push Notifications und durch eine Add to Home prompt für mehr Re-Engagement sorgen.

Möchtest du deine Website auf eine Progressive Web App upgraden oder eine Progressive Web App von Grund auf entwickeln lassen? Dann schreib uns gerne eine Email an hello@hybridheroes.de.