Progressive Web Apps – das Beste zweier Welten

Die mobile Welt 2016
Desktop, Mobile oder APP? Progressive Web App!
Was ist eine Progressive Web App?
Vorteile einer PWA gegenüber einer nativen App
Vorteile gegenüber einer mobilen Webseite
Anwendungsmöglichkeiten
Technische Details
TL;DR Kurfassung Progressive Web Apps (PWA)

Die mobile Welt 2016

Das mobile Internet ist längst nicht mehr die Zukunft, auch wenn es zahlreiche vielversprechende Zukunftsprognosen gibt. Im Jahr 2016 ist es auch in Deutschland üblich mit dem Smartphone im Internet zu surfen, mobil E-Mails zu versenden und sogar mit dem Handy einzukaufen. Die mobile Welt ist eine Zukunftsprognose, die in ihren Grundfesten bereits verankert ist. Ich nenne dies present-future. Um eine mobile friendly Webseite kommt mittlerweile niemand mehr herum. Die Frage, ob eine Firma, eine Organisation oder ein Dienstleister ein mobiles Erlebnis zur Verfügung stellt, ist nicht mehr relevant (oder sollte im Jahr 2016 nicht mehr relevant sein). Vielmehr stellt sich die Frage, wie genau die mobile Präsenz aussehen soll. Als potentielle Möglichkeiten standen bis vor Kurzem noch eine responsive Webseite, eine dezidierte mobile Webseite, Dynamic Serving und eine App zur Verfügung. Man musste sich also immer für eine Anwendungsmöglichkeit entscheiden oder doppelt investieren. Im schlimmsten Fall entstehen sogar dreifache Kosten: die Entwicklung einer normalen Desktopseite, parallel dazu eine weitere mobile Seite und zusätzlich eine App, die der Endnutzer auf sein Mobiltelefon installieren muss. Dies macht das Messen der Nutzersignale im Marketing schwierig, verlangt dreifachen Aufwand der Konzeptionisten und kann schnell sehr teuer werden.

Desktop, Mobile oder APP? Progressive Web App!

Google denkt in ganz neue Richtungen und präsentiert eine Lösung für dieses Problem: Progressive Web Apps (kurz: „PWA“). Eine Progressive Web App ist vereinfacht gesagt die optimale Symbiose einer mobilen Webseite und einer App. Das Beste beider Welten! Dies verringert Entwicklerkosten, vereinfacht das Tracking und ist einfach ziemlich sexy. Wie das genau geht? Einfach weiter lesen!

Was ist eine Progressive Web App?

• eine „normale“ Webseite, die sich wie eine App verhält
• eine „normale“ Webseite, die sich offline bedienen lässt
• eine „normale“ Webseite, die so schnell lädt, wie ein installiertes Programm

Eine Progressive Web App ist die perfekte Mischung aus Webseite und App. In HTML5 und JavaScript programmiert, sind sie wie eine normale Webseite in jedem Browser aufrufbar, schaffen aber ein authentisches App-Erlebnis beim Nutzer und stärken nachhaltig die Kundenbindung. Dies geschieht durch die Verwendung derselben Techniken, der sich auch traditionelle Apps bedienen: Push-Nachrichten informieren den Benutzer über auftretende Ereignisse, extrem schnelle Ladezeiten (sogar bei einer schlechten Internetverbindung) sorgen für ein Echtzeit-Erlebnis und Offline-Bedienbarkeit ermöglicht eine permanente Verfügbarkeit der Webseite.

Im Gegensatz zu traditionellen nativen Apps für Handy oder Tablet-PC kommen Progressive Web Apps ohne Installation aus und vermeiden so die Hauptursache dafür, dass Benutzer sich gegen die Verwendung einer App entscheiden. Stattdessen kann eine Verknüpfung auf dem Home-Screen des Nutzers angelegt werden, wodurch der Inhalt jederzeit wieder aufgerufen werden kann.

Vorteile einer PWA gegenüber einer nativen App

• Einfacheres Tracking, weil kein Firebase nötig
• Keine Installation notwendig, unabhängig vom Gerätespeicher des Endnutzers
• Bessere Auffindbarkeit in Suchmaschinen
• Keine Banner oder Interstitials, die zum App Download auffordern
• Verlinkbar

Die Vorteile einer Progressive Web App im Vergleich zu einer sogenannten nativen App (das, was wir landläufig einfach als „App“ bezeichnen), sind klar und zahlreich:

Vorteil 1: Einfaches Tracking

Da eine PWA im Prinzip eine normale Webseite ist, können wir diese auch wie eine Webseite tracken. Mit Standardkenntnissen in Google Analytics kommt man recht weit. Bei nativen Apps muss ein spezielles App Tracking verwendet werden. Google selbst empfiehlt in diesem Fall Tracking mittels Firebird statt (oder zusätzlich zu) Google Analytics.

Vorteil 2: Keine Installation notwendig

Der größte Vorteil liegt aber darin, dass der Endnutzer die Progressive Web App nicht installieren muss. Gerade in Deutschland, wo nicht jeder Smartphonenutzer das neueste Modell mit großem Speicher hat, ist dies sehr nützlich. Jeder hat sicherlich einen Bekannten, der nicht mal WhatsApp updaten kann, weil der Speicher voll ist. Mobile Nutzer sind schnell bereit etwas anzuklicken, aber die Installationsanfrage stellt eine große Hürde dar. Es verbraucht Speicherplatz und Apps wollen auf die Daten der Nutzer zugreifen, was viele abschreckt.

Vorteil 3: Auffindbarkeit in Suchmaschinen

Zugegeben, Google bemüht sich sehr um bessere Auffindbarkeit von Apps in den Suchergebnissen. Mittels Deep Links oder App Streeming ist es auch möglich, App-Ergebnisse in normalen Suchanfragen anzeigen zu lassen. Dies ist aber technisch relativ kompliziert, bedarf zumeist einer guten SEO-Agentur und ist teilweise selbst von Google noch in der Testphase. Eine PWA wird aber ganz normal in den Suchergebnissen angezeigt, ohne dass spezielle Techniken anzuwenden sind. Insbesondere in der Google Suche stellt eine Progressive Web App kein Problem dar, da diese Suchmaschine JavaScript (js) rendern kann.

Vorteil 4: keine App-Werbung nötig

Häufig gelangt der Nutzer auf eine mobile Seite und wird als erstes mit einem Banner oder einem Interstitial erschlagen. Die Einblendung fordert dazu auf, auch die entsprechende App zu installieren. Aus Marketingsicht gibt es oft keinen anderen Weg den Nutzer auf die App aufmerksam zu machen. Die Vorgehensweise ist also richtig. Dennoch „nervt“ dies viele Nutzer. Der Betreiber riskiert potentielle Kunden zu verlieren, die nur schnell ohne Installation etwas nachschauen wollten. Sämtliche Gedankengänge oder Befürchtungen in diese Richtung entfallen hier, da keine Installation notwendig ist.

Vorteil 5: Links setzen leicht gemacht

Da eine Progressive Web App im Prinzip eine Webseite mit erweiterten Funktionen ist, verhält sie sich auch grundlegend wie eine Webseite. In der Praxis bedeutet dies, dass ich einen ganz normalen Link wie zu jeder anderen Webseite auch setzen kann. Deep Links oder App Indexing ist nicht notwendig. Schreiben Sie beispielsweise einen Gastbeitrag in einem thematisch relevanten Blog, können Sie einfach einen ganz normalen Link setzen. Verweist eine Zeitschrift auf Ihre Progressive Web App, kann diese einen üblichen HTML Link einbinden. Dies stärkt Ihre Reputation und eventuell auch das Ranking. Gesamt betrachtet ist es einfacher eine PWA zu pushen, als extensives App-Marketing zu betreiben.

Vorteile gegenüber einer mobilen Webseite

• Instant Loading: extrem schnelle Ladezeiten
• Add to Homescreen und Web App Install Banners
• Push Notifications
• Offline First

Vorteil 1: Instant Loading

Die Ladegschwindigkeit einer Webseite ist mittlerweile ein wichtiger Erfolgsfaktor. Als Faustformel kann man mit der 3 Sekunden Regel arbeiten: ist eine Webseite in drei Sekunden nicht soweit geladen, dass man sie vollständig bedienen kann, springt der Nutzer ab. Nun muss natürlich bedacht werden, dass jeder Webseitenbesucher ein potentieller Kunde ist. Sie verlieren also Umsatz und Gewinn – nur weil Ihre Webseite zu lang braucht, um zu laden. Letztlich ist Page Speed auch ein Rankingfaktor geworden. Vereinfacht gesagt wir bei gleich gutem Content und vergleichbaren externen Verweisen die schnellere Seite bei Google weiter oben ranken!

Vorteil 2: Add to Homescreen

Über das Menü-Icon des Browsers lassen sich Progressive Web Apps zum Startbildschirm des Smartphones hinzufügen. Das Resultat ist ein eigener Icon auf dem Handy des Endnutzers. Dieser öffnet mit nur einem Klick und nahezu ohne Zeitverzögerung die zugehörige PWA. Das User-Erlebnis ist also entsprechend interaktiv wie bei einer App. Auch die Nutzerbindung ist ähnlich hoch wie bei der Installation einer nativen App. Schließlich helfen sogenannte Web App Install Banners dabei, den Webseitenbesucher auf die ad-to-homescreen Möglichkeit aufmerksam zu machen. Die Bedingung ist die Integration eines sogenannten „web app manifest file“. Derzeit funktioniert der Web App Install Banner nur im Chrome Browser, aber die Zukunft lässt hoffen…

Bild: Ad-To-Homescreen Funktion einer PWA, Quelle: Google.

Vorteil 3: Web Push Notifications

Mit einer Progressive Web App sind Push Nachrichten möglich. Dies funktioniert für den Nutzer genauso wie bei einer nativen App, die er oder sie sich auf sein oder ihr Smartphone installieren muss. So können zum Beispiel Shopbetreiber ihre Kunden auf neue Aktionen aufmerksam machen. Ein Publisher kann auf neue Ausgaben hinweisen. Der Nutzer bekommt auf sein Handy eine Nachricht, die z.B. lauten könnte: „Neue Rabattaktion bei PWA-xy: diese Woche 50% reduziert!“. Mit einem Klick gelangt der Nutzer direkt auf die relevante Seite.

Vorteil 4: Offline First

Sind Inhalte einmal geladen worden, können diese offline oder bei langsamer Verbindung wieder aufgerufen werden. Dies hat enorme Auswirkungen auf die Kundenbindung aufgrund der gegebenen Frustrationstoleranz der Nutzer. Eine spezielle Technologie (Details siehe unten) sorgt dafür, dass die Seite optimal gecached wird und so auch offline funktioniert.

Anwendungsmöglichkeiten

• • Wunsch nach mobiler Seite & App
  • Zielgruppe mit schlechter Internetanbindung
  • Beispiele: Flipkart, Booking.com und AirBerlin

Auch wenn Progressive Web Apps in Deutschland noch nicht weit verbreitet sind, gibt es zahlreiche Anwendungsmöglichkeiten. Perfekt ist eine PWA für alle, die gern eine mobile Seite UND eine native App haben möchten, aber doppelte Kosten scheuen. Sehr gut geeignet ist eine Progressive Web App auch, wenn die Zielgruppe tendenziell eher eine schlechte Internetverbindung hat. Schließlich ist eine PWA ein guter Tipp für alle Web-Enthusiasten, die die neuesten Technologien nutzen wollen. Beispiele bereits realisierter Progressive Web Apps gibt es von Booking.com, AirBerlin und Flipkart.

Tracking

• • Google Analytics (UA) für Webseiten (oder adere wie PIWIK)
  • Mit qt-Parameter auch offline Tracking möglich
  • Tracking der Push Nachrichten über Service Worker

Das Tracking erfolgt wie bei einer normalen Webseite. Ein Google Analytics Codeschnipsel wird einfach per copy and paste in den Quellcode der Webseite bzw. der Progressiven Web App eingebaut. Andere Trackingsoftware funktioniert sicher auch gut. Mit Google Analytics (Universal Analytics) ist es zusätzlich auch möglich, offline Interaktionen zu messen. Dies wird mit einem „qt parameter“ realisiert. Der qt-Parameter legt die fehlgeschlagenen Google Analytics Anfragen in eine virtuelle Warteschleife und reaktiviert diese zu einem späteren Zeitpunkt erneut. Standardmäßig ist dieser auf 4 Stunden begrenzt. Mit dieser „Anleitung“ auf Github kann die Zeitspanne aber einfach verlängert werden. Statt fest die 4-Stunden Regelungen zu nutzen, werden die aufgeschobenen Google Analytics Anfragen jedes Mal erneut gesendet, wenn die Service Worker wieder aktiv sind und der Nutzer somit online ist.

Es ist auch möglich, die Push Notification zu tracken. Hierfür baut man den JavaScript Codeschnipsel für Analytics am besten direkt im Service Worker ein. Der Rest ist normales Event-Tracking. Details hierzu gibt es auf GitHub.

Technische Details

• • • • HTML5, CSS3, JavaScript
      • Service Worker sorgen für Offline-First Experience
      • Entwicklung z.B. mit Polymer

Progressive Web Apps sind aufgebaut wie jede andere Webseite auch und werden in HTML5, JavaScript und CSS3 programmiert. Sie verhalten sich responsive, passen ihre Darstellung also immer auf das zum Anzeigen der Seite verwendete Gerät wie Handy oder Tablet-PC an. Was aber macht nun eine PWA besonders? Das Geheimnis: Service Worker.

Der Schlüssel zum Erfolg: Service Worker

Ein Service Worker ist ein JavaScript, das von Web-Browsern im Hintergrund, getrennt von der übrigen Webseite, ausgeführt wird. So können Service Worker Funktionalitäten zur Verfügung stellen, die unabhängig von einer Webseite oder Benutzerinteraktion sind. Dazu gehört zum Beispiel eine Cache-Funktion, die es ermöglicht einmal angezeigte Inhalte zwischenzuspeichern. Auf diese Weise kann beim nächsten Besuch die Seite auch dann angezeigt werden, wenn eine schlechte oder sogar gar keine Internetverbindung besteht (Offline-Betrieb). Auch Push-Benachrichtigungen sind auf diese Weise möglich, um Benutzer auf neue Ereignisse hinzuweisen. Service Worker müssen im JavaScript der Seite registriert werden und können erst dann installiert werden. Außerdem bedingen sie HTTPS.  Mehr und mehr Frameworks stellen bereits Service Worker bereit. Ein Beispiel ist Angular mit seinem mobile Toolkit. In Zukunft werden noch weitere Features wie Hintergrundsynchronisierung oder Geofencing möglich sein.

Progressive Enhancement

Aber was wenn ein Benutzer mit einem Browser, der keine Service Worker unterstützt die Progressive Web App öffnet? Eines der großartigen Kernfeatures von Progressive Web Apps ist das sogenannte Progressive Enhancement. Damit ist gemeint, dass die PWA immer abwärtskompatibel arbeitet und moderne zusätzliche Funktionen einfach automatisch zuschaltet, wenn diese verfügbar sind. Das bedeutet, dass ein Benutzer mit einem Browser ohne Service Worker eine ganz normale voll funktionale Webseite angezeigt bekommt – Push-Benachrichtigungen und Offline-Benutzung stehen ihm dann zwar nicht zur Verfügung, jedoch wird er dies gar nicht bemerken. Auf diese Weise wird sichergestellt, dass Progressive Web Apps für jeden Besucher ein optimal auf diesen abgestimmtes Benutzererlebnis bieten.

Polymer

Googles Polymer Bibliothek und Toolbox ist voll ausgerüstet, um den Entwicklern alle Werkzeuge bereitzustellen, die für die Entwicklung einer PWA vonnöten sind. Die Polymer App Toolbox nutzt alle Komponenten, die für eine Progressive Web App von Bedeutung sind, u.a. Service Worker und HTTP/2. Google selbst gibt eine perfekte Kurzzusammenfassung zur Polymer App Toolbox:

The Toolbox provides a component-based architecture, responsive layouts, a modular router, localization support, turnkey support for local storage and offline caching, and efficient delivery of unbundled app resources. Adopt these features individually, or use them together to build a full-featured Progressive Web App.

Technische Unterstützung

Besteht eine ausreichende Internetverbindung lassen sich Progressive Web Apps von jeglichem Gerät und jedem Browser öffnen. Dies ist soweit logisch, da PWAs bei bestehender Internetverbindung zunächst eine handelsübliche Webseite sind. Was die offline Nutzung durch die Service Worker angeht, sieht es leider noch etwas anders aus: derzeit besteht Browsersupport nur für Chrome, Firefox und Opera, wobei Microsoft Edge in Entwicklung ist. Bezüglich der Betriebssysteme funktionieren die Progressive Web Apps im Offline-Modus derzeit nur auf Android, wobei  Apple bereits erste positive Signale sendet. Eine Übersicht zur technischen Kompatibilität finden Sie hier.

TL;DR Kurfassung Progressive Web Apps (PWA)

• • Webseite mit App Charakter
  • Funktionieren auch mit schlechter Internetverbindung oder gar offline
  • Instant Loading: Extrem schnelle Ladezeiten durch perfektes Caching und Service Worker
  • Add to Home Screen Funktion: Endnutzer öffnet die PWA wie eine native App
  • Komplette „offline-first“ Erfahrung: alle Funktionen stehen offline zur Verfügung
  • Push Notifications: wie bei einer nativen App können Sie Nutzer auf Aktionen aufmerksam machen
  • Mehr Infos: Google Developers