Alles, was Sie über Progressive Web Apps wissen müssen

Progressive Web Apps bieten eine Reihe von Vorteilen sowohl für Sie als Entwickler als auch für die Endnutzer dieser Anwendungen. Sichtbarkeit, Design, Leistung und Engagement sind nur einige der Vorteile, die Sie nutzen können, um Ihre Nutzer zufrieden zu stellen und Ihr Geschäft zu bereichern.

1. Sie gewinnen an Sichtbarkeit und engagieren Ihre Nutzer

a. Plattformübergreifend: Sparen Sie Zeit und Geld.

Progressive Web Apps können auf jedem Endgerät ausgeführt werden und haben die Fähigkeit, sich vollständig an den Bildschirm anzupassen, auf dem sie gelesen werden. Dies hat zwei große Vorteile.

Der erste Grund ist natürlich, dass die PWA mit Webtechnologien entwickelt wird. Die Installation und das Herunterladen sind daher anders als bei einer nativen App und das Angebot an Fähigkeiten im Bereich der Webtechnologien ist größer als die Nachfrage. Es ist insgesamt billiger, eine progressive Webanwendung als eine native App zu entwickeln, zumal, wenn man iOS und Android-Apps ansprechen will, zwei separate native Entwicklungen erforderlich sind.

Der zweite Vorteil besteht darin, dass Progressive Web Apps (PWAs) in einer universellen App, den Webbrowsern, ausgeführt werden. Alle Geräte, die mit dem Internet verbunden sind, haben einen solchen, sowohl Mobilgeräte, Tablets als auch Desktops. Auch hier gilt, dass Sie Ihre Kosten rationalisieren können, wenn Sie nur noch eine App entwickeln.

b. Übernehmen Sie die Kontrolle über Ihre Anwendung und deren Verbreitung.

Progressive Web Apps werden wie eine Website verteilt, d.h. über eine URL, die von einem Browser aufgerufen wird. Wie Sie sehen, haben wir hier einen großen Vorteil von Progressive Web Apps: Sie müssen nicht über den App Store oder Google Play gehen, um Ihre Anwendung zu übernehmen. Sie sind über das mobile Web und Tablet verfügbar.

Warum ist dies ein Vorteil?

Zunächst einmal bei den Kosten: Sie müssen keine zusätzlichen Gebühren zahlen, um Ihre Anwendung zu übernehmen (derzeit 25€ für Google und 89€/Jahr für Apple).

Außerdem sind Sie völlig frei und unabhängig in Bezug auf das Design, die Funktionen, die Elemente und den Inhalt Ihrer Anwendung: Sie können sie frei verbreiten, ohne dass sie einer Überprüfung unterzogen werden muss.

Dieser zweite Punkt unterstreicht einen nicht zu vernachlässigenden Vorteil dieser Art der Verbreitung: die Aktualität Ihrer PWA. Alle Verbesserungen werden sofort übernommen, Sie müssen nicht mehr warten oder eine Überprüfung durchführen. Beachten Sie außerdem, dass es sich bei nativen Apps um kompilierten Code handelt, was bedeutet, dass Ihre Nutzer den neuen Code auf ihr Gerät herunterladen müssen, um von Ihren Updates profitieren zu können, was bei einer Progressive Web App nicht der Fall ist.

Auf diese Weise können Ihre Nutzer eine entscheidende Rolle bei der Verbesserung Ihrer App spielen. Die Berücksichtigung ihres Feedbacks ist mit einer Progressive Web App viel schneller, da Sie sofort Änderungen an Ihrer App vornehmen können, die auf dem Feedback der Nutzer basieren. Sie können Benutzertests durchführen, die daraus resultierenden Statistiken analysieren und herausfinden, was Sie noch verbessern müssen. Mit anderen Worten, mit einer PWA können Sie, wenn etwas nicht gefällt oder nicht funktioniert, sehr schnell nachbessern und das Engagement Ihrer Nutzer maximieren!

c. Einfach zu vermarkten: Erhöhen Sie die Sichtbarkeit.

Der gesamte Inhalt, den Sie für Ihre Progressive Web App produzieren, kann von Suchmaschinen indexiert werden. Ihre App hat die gleiche Sichtbarkeit wie eine Website in Google. Die leichte Zugänglichkeit von PWAs ist ein unbestreitbarer Vorteil für Ihr Geschäft, da man sich durchaus vorstellen kann, die im Web weit verbreiteten Techniken zur Optimierung auf Apps zu übernehmen.

Wie bereits erwähnt, sind PWAs über eine URL zugänglich, wie eine Website. Natürliche Suchmaschinenoptimierung, Kaufen von gesponserten Links, Retargeting... All diese Marketing-Tools werden zu Ihren besten Verbündeten!

Denken Sie auch daran, dass der Zugang zu PWAs über eine einfache URL erfolgt, die Sie einfach überall hinschieben können, vor allem an Orte, die oft übersehen werden. Die Verwendung von Links, Beiträge in sozialen Netzwerken, Einträge in Verzeichnisse und E-Mail-Kampagnen sind alles Möglichkeiten, um die URL Ihrer Progressive Web App zu verbreiten und die Distanz zwischen Ihnen und Ihren potentiellen Nutzern zu verringern: Sobald Ihre URL bekannt ist, sind Ihre Nutzer nur einen Klick entfernt. Wie bereits erwähnt, erreichen Progressive Web Apps im Durchschnitt dreimal mehr Sichtbarkeit als native Apps, was bei der Entwicklung Ihrer App eine wichtige Rolle spielen kann.

d. Erweiterte Funktionen: Engagieren und binden Sie Ihr Publikum.

Ein weiteres grundlegendes Merkmal von Progressive Web Apps ist zweifelsohne der Aspekt der Bindung. Während sie bisher nur nativen Apps vorbehalten waren, können Entwickler nun auch für PWAs Push-Benachrichtigungen aktivieren.

Wir werden die Funktionsweise von Push-Benachrichtigungen für das Web später erörtern, aber Sie sollten bereits jetzt wissen, dass Apps, die diese Funktion bereits aktiviert haben, einen Anstieg der in der App verbrachten Zeit um 72 % und einen Anstieg der wiederkehrenden Besuche um 50 % verzeichnen konnten (Why Build a Progressive Web App? von Udacy).

Es ist keine Frage mehr, dass Benachrichtigungen per Push ein wesentlicher Bestandteil der Kommunikation mit Ihren Nutzern sind. Sie sind aus der Welt der nativen Anwendungen nicht mehr wegzudenken und werden nun nicht nur in mobilen Webanwendungen, sondern auch auf dem Desktop eingesetzt. Dieses neue Konzept wird die gesamte Nutzung des Internets revolutionieren, warum sollten Sie nicht jetzt davon profitieren?


2. Ihre Nutzer erhalten ein unvergleichliches Erlebnis.

a. Fließend, intuitiv: eine App-ähnliche Erfahrung

Eine PWA ist in erster Linie eine Benutzererfahrung. Mit dem Benutzer im Hinterkopf greifen die Entwickler auf eine Reihe von Webtechnologien, Tools und Best Practices zurück, um im Gegenzug neue Standards im Web und auf allen Bildschirmen zu setzen.

Praktisch gesehen imitieren Progressive Web Apps die Navigation nativer Apps, um eine flüssige Interaktion wie bei einer App zu ermöglichen. Für wiederkehrende Nutzer bedeutet dies, dass die wichtigsten Elemente der App sofort angezeigt werden, da sie bereits im Cache gespeichert wurden, um die Leistung zu erhöhen, während der Inhalt bei jeder Nutzung abgerufen wird - dazu später mehr.

Progressive Web Apps, die ursprünglich für Mobiltelefone entwickelt wurden, bieten eine perfekte Benutzererfahrung, indem sie die Codes der mobilen Entwicklung auf alle anderen Typen von Bildschirmen übertragen. Diese neue Art des Designs sowohl für Mobilgeräte als auch für Desktops entspricht den neuen Erwartungen der Nutzer und trägt somit wesentlich zu ihrer Bindung an das Unternehmen bei.

b. Zugänglich und leicht: Ein Blick ohne Einschränkungen

Sie haben es bereits verstanden, mit Progressive Web Apps sind Ihre Nutzer nur einen Klick von Ihren Inhalten entfernt und haben sekundenschnellen Zugriff auf diese, auf jedem Gerät (Handy, Tablet, Desktop, Laptop), mit kleinem oder großem Bildschirm, über ihren Browser. Progressive Web Apps müssen nicht installiert werden, um aufgerufen zu werden, so dass Ihre Nutzer Ihren Inhalt einfach und ohne die Notwendigkeit einer Installation der App ansehen können.

Wenn Ihre Nutzer von Ihren Inhalten begeistert sind, können sie noch einfacher auf Ihre App zugreifen: Progressive Web Apps können direkt auf dem Startbildschirm Ihrer Nutzer installiert werden, ohne dass ein Download oder ein Besuch der Stores erforderlich ist.

Ihre unvergleichliche Leichtigkeit macht den Speicherplatz auf den Geräten zum Zeitpunkt der Installation überflüssig. Ihre Nutzer müssen sich also nicht mehr um den verfügbaren Speicherplatz auf ihrem Gerät sorgen. Wenn ein Nutzer versucht, eine bestimmte Seite aufzurufen, werden nur die Elemente geladen, die für die Anzeige dieser Seite erforderlich sind, wodurch der Speicherplatz auf den Geräten geschont wird. Zum Beispiel benötigt eine PWA im Durchschnitt 200x weniger Speicherplatz als eine native iOS-Anwendung.

c. Schnell: sofortiges Laden

PWAs sind so konzipiert, dass sie dem Benutzer eine optimale Erfahrung bieten. Dies bedeutet, dass der Inhalt dynamisch aktualisiert wird, so dass der Nutzer immer Zugang zu den aktuellsten Inhalten hat.
Progressive Web Apps haben die Fähigkeit, JavaScript-Code auszuführen, ohne dass sie im Vordergrund stehen müssen, oder sogar ohne dass eine Webseite im Browser geöffnet werden muss. Auf diese Weise wird die regelmäßige Aktualisierung der ap-Daten ermöglicht, so dass die aktuellen Daten direkt angezeigt werden können, wenn der Nutzer ankommt. Die Leistung der App wird ebenfalls verbessert, da sowohl die statischen Ressourcen als auch die kompletten Seiten vorab geladen werden.

Endlose Ladezeiten gehören damit der Vergangenheit an und Ihre Nutzer werden Ihre PWA mit einer Flüssigkeit und Geschwindigkeit durchsuchen, die im Internet ihresgleichen sucht.

d. Offline-Betrieb: Keine Frustration für den Benutzer.

Eines der wichtigsten Merkmale einer Progressive Web App ist ihre Fähigkeit, auch ohne stabile Internetverbindung zu funktionieren. Beim ersten Besuch des Nutzers wird das Caching-System einen Teil oder den gesamten Inhalt lokal speichern. So kann der Nutzer beim nächsten Besuch, auch wenn keine Verbindung besteht, auf diese Inhalte zugreifen und durch die Seiten der PWA navigieren.

Progressive Web Apps sind eine Mischung aus Webseiten und nativen Apps und nutzen das Beste aus beiden Konzepten. Ihre Funktionsweise beruht daher auf einer neuartigen Kombination bestehender Konzepte, die zusammengenommen eine unglaubliche Leistung ermöglichen.

1) Wie wird eine Web App zu Progressive?

a. Die Herausforderungen von Progressive Web Apps

Um als PWA bezeichnet zu werden, muss eine Webanwendung bestimmte Kriterien erfüllen, damit sie die unvergleichliche Benutzererfahrung bieten kann, die für Progressive Web Apps charakteristisch ist.
Per Definition muss eine PWA sein:

Nachdem wir nun die wichtigsten Prinzipien einer Progressive Web App kennengelernt haben, wollen wir herausfinden, wie sie diese Herausforderungen in der Praxis bewältigen kann.


b. Die Funktionsweise von Progressive Web Apps

Progressive Web Apps werden auf der Grundlage von Kunden-Websprachen entwickelt, die die Benutzeroberfläche jeder Seite verwalten.

Bei GoodBarber zum Beispiel haben wir uns dafür entschieden, unsere Progressive Web Apps in JavaScript zu entwickeln und Angular 4.0 zu verwenden, ein von Google entwickeltes Framework, das Entwicklern die Werkzeuge zur Verfügung stellt, um webbasierte Benutzererfahrungen zu entwerfen, die mit denen von nativen Apps vergleichbar sind.

Wir haben uns entschieden, isomorphe Apps zu erstellen, d.h. Apps, die JavaScript-Code sowohl auf der Serverseite (Server Side Rendering - SSR) als auch auf der Kundenseite (Client Side Rendering - CSR) ausführen können.

Um Ihnen die Vorteile dieses Mechanismus zu verdeutlichen, sehen Sie hier, wie die Progressive Web Apps von GoodBarber funktionieren:

Die erste Seite der Anwendung wird serverseitig (SSR) generiert, so dass Suchmaschinen-Roboter eine bereits vollständig aufgebaute Seite indexieren können. Die Anwendung führt jedoch auch Berechnungen innerhalb des Browsers durch (CSR), so dass die Anwendung auch ohne Netzwerk funktionieren kann, da das gesamte JavaScript der PWA im Hintergrund heruntergeladen und im Cache gespeichert wurde.

c. Architektur von Progressive Web Apps

Progressive Web Apps basieren, wie bereits erwähnt, auf der Kombination bestehender Konzepte:

Dies ist das Skelett Ihrer Anwendung, in dem Ihre Daten übertragen werden. Die App Shell enthält die wichtigsten Elemente der Benutzeroberfläche und die Komponenten, die für das Funktionieren der Benutzeroberfläche unbedingt erforderlich sind. Diese Elemente werden lokal gespeichert, während die Inhalte dynamisch von einer API abgerufen werden.

Die App Shell ermöglicht ab dem zweiten Durchlauf der Anwendung eine schnelle Anzeige der Anwendung, einen möglichst geringen Bandbreitenverbrauch, das Laden der statischen Ressourcen aus dem lokalen Cache und schließlich die Trennung von Inhalt und Navigation, wodurch extrem kurze Ladezeiten der Anwendung erreicht werden.

Dies ist die technische Basis für viele der Funktionen, die PWAs von herkömmlichen Webseiten unterscheiden. Er positioniert sich zwischen der App und dem Browser (oder dem Netzwerk, wenn es verfügbar ist) und kann das Verhalten der App durch die vielen Möglichkeiten stark verändern: Service Worker ermöglichen die Nutzung der PWA im Offline-Modus. Neben anderen Sonstigem sind Service Worker auch ein wichtiges Zahnrad für den Empfang von Push-Benachrichtigungen in Ihrer PWA.

Ihre PWA wird in einer JSON-Datei beschrieben, die als Manifest (Web App Manifest) bezeichnet wird. Dies ist eine Datei, die die Metadaten enthält, die erforderlich sind, um Ihre App in einem Store wie dem Windows Store zu indizieren oder um Ihre App auf dem Startbildschirm Ihres Benutzers zu installieren. Es handelt sich also um eine Beschreibung, die es ermöglicht, der Anwendung ein nativeres Aussehen zu verleihen, mit einer Vollbildanzeige, erkennbaren Symbolen oder der Möglichkeit, die Ausrichtung des Bildschirms zu ändern.


d. Die Dienste-Arbeiter

Die Dienste-Arbeiter sind ein Schlüsselelement der PWA und verdienen daher einen Fokus, um die neuen Möglichkeiten zu erkennen, die sie dem Web bieten. Technisch gesehen ist ein Service Worker ein Skript, das im Hintergrund von einem Browser ausgeführt wird. Er ist in der Lage, Aktionen als Reaktion auf Ereignisse wie Netzwerkanfragen oder Informationen vom Betriebssystem (z.B. Änderungen der Konnektivität) auszuführen. Er ermöglicht es Entwicklern, erweiterte Funktionen wie Benachrichtigungen über Push-Benachrichtigungen und Cache-Management zu implementieren. Sobald der Service Worker im Browser installiert ist, führt er die ihm zugewiesenen Aufgaben selbständig aus, auch wenn der Nutzer nicht auf der Website navigiert. Die Funktionsweise eines Service Worker ähnelt der eines Proxy-Servers, er vermittelt zwischen dem Browser und dem Internet, um die Benutzererfahrung zu verbessern, indem er beispielsweise die Daten einer Webseite im Cache speichert.

Zusammenfassend ist ein Service Worker eine einfache JavaScript-Datei, die im Hintergrund läuft und bei bestimmten Ereignissen ausgelöst wird. Er fängt die Anfragen an den Server ab und kann eine Antwort geben, indem er entweder die vom Server empfangene Ressource weiterleitet oder eine lokale Version der Ressource bereitstellt, wenn diese bereits angefordert wurde.

Im Falle der Progressive Web Apps von GoodBarber zum Beispiel wird es die Art und Weise optimieren, wie der Browser die Schriftarten anzeigt, indem es sie beim ersten Besuch des Nutzers herunterlädt und im Cache speichert. Bei späteren Besuchen wird die Schriftart lokal bereitgestellt, so dass die Schriftart sofort angezeigt wird, was eine schnellere Anzeige der Anwendung gewährleistet.

Wie Sie sehen können, hat Apple die Türen seines berühmten Browsers noch nicht für Dienste-Arbeiter und damit für die volle Leistungsfähigkeit von PWAs geöffnet. Aber die gute Nachricht ist, dass Safari und Safari iOS bald in der Liste der kompatiblen Browser auftauchen werden. Was den Edge Browser betrifft, so sind Service Workers bereits unter Android kompatibel und weitere Entwicklungen sind im Gange.

Wie bereits erwähnt, ermöglicht der Service Worker erweiterte Funktionen wie die Hintergrundsynchronisation, die es ermöglicht, aktuelle Daten direkt anzuzeigen, wenn der Nutzer eintrifft (da diese Daten regelmäßig im Hintergrund aktualisiert werden). Die Synchronisation ermöglicht eine extrem flüssige Benutzererfahrung, indem sie die Ausführungsgeschwindigkeit der Anwendung erheblich steigert.

Die Verwendung von Service Workers bedeutet, dass Progressive Web Apps bestimmte Sicherheitsanforderungen erfüllen müssen. Service Workers können sehr leistungsfähige Operationen im Browser durchführen. Die Daten des Nutzers müssen verschlüsselt werden, um sicherzustellen, dass diese Fähigkeit richtig genutzt wird.

Die Installation des Service Worker, der für die Nutzung der wichtigsten Funktionen der PWA erforderlich ist, kann nur erfolgen, wenn die Webseite über HTTPS bedient wird. Dies ist eine notwendige Voraussetzung, um Ihre gesamte PWA mit diesem sicheren Protokoll zu betreiben, was sich positiv auf die Suchmaschinenoptimierung Ihrer Seiten auswirkt.

2. PWA-spezifische Funktionen

a. Push-Benachrichtigungen

Diese Funktion wird durch die Fähigkeit der Dienste-Arbeiter ermöglicht, im Hintergrund zu arbeiten. Um dies zu ermöglichen, gibt es zwei Funktionen, die sich gegenseitig ergänzen: die Push-API und die Benachrichtigungen-API.

Alle existierenden Browser, mit Ausnahme von Safari, nutzen Service Worker, um dies zu erreichen. Safari verwendet ein Apple-eigenes System namens APNs, das es einem externen Dienstleister ermöglicht, Nachrichten oder Bestellungen an jedes Apple-Gerät mit OS X zu senden. Es ist wichtig zu beachten, dass Benachrichtigungen für Webseiten nicht auf iOS (mobilen) Geräten erscheinen.

Mit anderen Worten, der Service Worker wird eine Benachrichtigung verarbeiten, die von einem Push-Dienst über die Push-API gesendet wird. Anschließend zeigt er diese Benachrichtigung über die Benachrichtigungs-API dem Benutzer an.

b. Offline-Betrieb

Der Offline-Zugang wird auch durch den Service Worker unterstützt, der, sobald er im Browser installiert ist, das Caching der Dateien der App verwaltet, Netzwerkanfragen abfängt und dann entsprechende Aktionen ausführt, je nachdem, ob das Netzwerk verfügbar ist oder nicht. Diese Funktion ermöglicht es, die Anwendung auch ohne Internetverbindung zu nutzen und bietet eine verbesserte Benutzererfahrung, da selbst bei einer Internetverbindung einige Dateien nicht mehr vom Webserver geladen werden müssen, da sie bereits lokal gespeichert sind.