PWA Teil 3: Technologie und UX Secrets von Progressive Web Apps

Ein Blick in den Werkzeugkasten von PWA's

Wie wir im vorangegangenen Teil unserer Serie bereits beschrieben haben, ist es das Ziel von Progressive Web Apps, für Anwender ein Benutzererlebnis zu bieten, welches ansonsten nur mit nativen Apps möglich wäre. Progressive Web Apps nutzen dafür die aktuellsten Technologien in modernen Webbrowsern und greifen auf Funktionen wie Caching oder Push-Benachrichtigungen zurück.

Um ein top Benutzererlebnis (UX) bieten zu können, nutzen die (Web-) App-Entwickler die üblichen modernen Webtechnologien wie HTML5, CSS 3 und JavaScript. Darüber hinaus kommen Service Worker und Web Manifest zum Einsatz - wir möchten in diesem Blogbeitrag einige grundlegende Begriffe, neue Mölichkeiten und Konzepte erklären.

Benutzererlebnis und Technik

Bevor wir auf die technischen Aspekte eingehen, führen wir uns nochmals die wichtigsten Merkmale einer Progressive Web App vor Augen wenn es um das Benutzererlebnis geht. Bis zu einem gewissen Grad spielt hier natürlich auch das subjektive Empfinden und die persönlichen Vorlieben der einzelnen User eine Rolle, aber im Kern steht eine PWA für folgende vier Eigenschaften:

• Schnelles Laden

• Gut integriert, der Anwender startet die PWA via Icon auf dem Homescreen

• Zuverlässig auch bei schlechter oder keiner Internetverbindung

• Lädt den Anwender zur Interaktion ein (“Engagement”)

Kommen wir nun zur Technik. Hier sind es drei Elemente, die zwingend vorhanden sein müssen - sie machen sozusagen aus einer klassischen Webseite, die im Browser aufgerufen wird, eine Progressive Web App:

• HTTPS-Verbindung

• Web Manifest

• Service Worker

HTTPS - Sicherheit ist wichtig!

Für die Datenübertragung zwischen dem Server und dem Browser, in dem die PWA läuft, kommt zwingend das HTTPS-Protokoll zum Einsatz. Durch Verschlüsselung und gegenseitige Authentifizierung werden die Daten vor unerlaubtem Zugriff geschützt.

Web App Manifest - die Spielregeln werden festgelegt

Das Web App Manifest, oder zu Deutsch das Anwendungsmanifest, ist eine Datei auf dem Webserver, die ein paar grundlegende Spielregeln für die jeweilige Progressive Web App festlegt. Hier wird zum Beispiel das Icon definiert, welches verwendet wird, wenn man als Anwender die PWA zum Homescreen hinzufügen will. Ebenfalls wird hier vom Entwickler festgelegt, ob die klassischen Browser-Elemente wie die Adresszeile ausgeblendet werden sollen. Läuft die PWA im Vollbild-Modus, hat man als Anwender visuell das gleiche Benutzererlebnis wie wenn man eine installierte App benutzt.

Service Worker - Brückenelemente zu nativen Features

Die Service Worker sind sozusagen die Dienstleister im Hintergrund einer Progressive Web App. Sie ermöglichen zu einem grossen Teil die “app-ähnliche” Benutzererfahrung, denn sie fungieren unter anderem als Zwischenspeicher (Cache) für die Kommunikation mit dem Webserver. Damit wird sichergestellt, dass die PWA schnell geladen werden kann, wenn sie aufgerufen wird.

Ein Service Worker ist aber auch dafür verantwortlich, dass man die Progressive Web App auch weiter benutzen kann, wenn man keine Netzwerkverbindung oder nur sehr schlechten Empfang hat.

Auch das Versenden von Benachrichtigungen (Pushes) wird über sie abgewickelt. Service Worker bestehen aus einer JavaScript-Datei und laufen im Browser, aber sind dabei getrennt vom Rest der Webseite, beziehungsweise der PWA.

PWA Lade-Prozess

Uns allen ist dieser Ablauf bestens bekannt: Wir tippen ein Icon an und die App öffnet sich - diese Schritte in der Interaktion mit unserem Mobilgerät machen wir dutzende Male pro Tag ohne gross darüber nachzudenken.

Bei einer Progressive Web App läuft dies ein wenig anders ab, vor allem wenn sie zum allerersten Mal aufgerufen wird. Wie eine Webseite auch, wird die PWA über eine URL oder einen Link im Browser aufgerufen, der damit die Anfrage an den Webserver sendet.

Die folgende Grafik stellt den Ablauf schematisch dar. Die Progressive Web App wird aufgerufen, wobei die Anfrage nicht direkt an den Webserver geht, sondern zuerst ein paar wichtige Zwischenschritte durchläuft.

Die erste Zwischenstation ist der Service Worker, wobei zur Überbrückung als Platzhalter ein so genannter Splash Screen angezeigt werden kann, auch wenn dies aus Sicht der UX nicht gerade optimal ist.

Im Service Worker wird auch die Frage nach der Cache-Strategie gestellt. Dabei geht es grundsätzlich darum, ob immer zwingend alle Daten vom Webserver abgerufen werden sollen (Online first), oder ob sie teilweise oder sogar komplett aus dem lokalen Zwischenspeicher geladen werden sollen (Offline first).

Die so genannte App Shell sollte auf jeden Fall schnell geladen werden. Darunter versteht man das grundlegende User Interface (UI) einer PWA, bestehend aus HTML, CSS und JavaScript. Es sorgt dafür, dass für den Anwender das UI der PWA so schnell wie möglich auf seinem Display dargestellt wird. Wenn die App Shell im Cache zwischengespeichert wird, ist der Ladevorgang bei einem späteren nochmaligen Aufrufen der PWA sogar noch schneller. Dies hängt auch mit der gewählten Cache-Strategie zusammen, die wir oben bereits angesprochen haben.

Der Service Worker kann so konfiguriert sein, dass die App Shell aus dem Cache geladen wird und nur die Inhalte, welche dargestellt werden sollen, vom Webserver geholt werden. So wird einerseits für den Anwender ein schneller Start der PWA ermöglicht und andererseits sichergestellt, dass er immer nur Inhalte angezeigt bekommt, die dem jeweils aktuellen Stand der Dinge entsprechen.

Kein App Store - Auffindbar und Nutzbar über den Browser

Zum Thema Benutzererlebnis gehört aber nicht nur die Interaktion mit dem Inhalt der PWA auf einem Display, sie fängt eigentlich schon viel vorher an: Nämlich bei der Frage, wie der Anwender überhaupt auf die Startseite einer Progressive Web App gelangt.

Viele Online-Aktivitäten beginnen mit einer Eingabe in einer Suchmaschine. Wenn es um die Frage geht, wie eine Progressive Web App überhaupt gefunden wird, sollte man diese Tatsache nicht ausser Acht lassen. Der Crawler einer Suchmaschine indiziert eine PWA genauso wie eine herkömmliche Webseite und macht sie so für Millionen von potentiellen Nutzern einfach auffindbar und zugänglich.

Traffic von einer Suchmaschine zu installierten Apps zu leiten ist ungleich aufwändiger. Hat der Anwender die App nicht installiert, schaltet sich automatisch der App Store als Hürde dazwischen. Progressive Web Apps machen es einfacher, mit Suchmaschinenoptimierung neue Nutzer anzusprechen, weil sie ein flüssigeres Gesamterlebnis ohne Stolperfallen bieten: Ein Klick auf ein Suchergebnis führt den Nutzer direkt in die PWA.

Wie geht es weiter mit PWA's?

Die technischen Möglichkeiten - und parallel dazu das Benutzererlebnis - von Progressive Web Apps entwickeln sich ständig und mit einem hohen Tempo weiter. An der Entwicklerkonferenz Chrome Dev Summit 2018 zum Beispiel hat Google weitere Schnittstellen angekündigt, die im Chrome Browser für PWA zur Verfügung stehen sollen. Zudem ist jetzt auch in der Desktop-Version von Chrome die PWA-Unterstützung standardmässig aktiviert. Wir sind bestrebt stets die neusten Möglichkeiten vom Mobile Web Technologien auszutesten, unsere Erkentnisse auf diesem Blog zu teilen und unseren Kunden für die Digitalisierung des Business und im Mobile Marketing echte Mehrwerte und top Services anzubieten.

Hast Du Inputs oder Fragen zu PWAs oder generell zu Webtechnologien? Schreib uns eine Mail. Wir freuen uns ausserdem auf jeden Besuch in unseren Offices in Basel oder Bern.