Progressive Web Apps (PWA): was sie sind, Vor- und Nachteile und die wichtigsten Beispiele auf dem Markt

Wir leben in einer immer schnelleren, dynamischeren und sich ständig verändernden Welt. Die schrittweisen Innovationen, die sich auf die Menschen auswirken, folgen einander, wobei der Schwerpunkt immer deutlicher auf folgenden Aspekten liegt:

Leistung, man denke nur an die immer leistungsfähigeren Geräte, die wir täglich benutzen, oder an die Aufgaben, die wir schneller erledigen können;
Erfahrung, um jegliche Reibung bei der Nutzung von Software/Hardware zu beseitigen;
Intelligenz, mit Algorithmen, die jetzt in einer vorausschauenden Perspektive arbeiten.

In diese Richtung geht die Entwicklung von Progressive Web Apps (PWA), einer Lösung, die das Beste aus nativen Apps und Webtechnologie kombinieren will.

Eine Progressive Web App (PWA) ist eine App, die moderne Web-Funktionen nutzt, um den Nutzern ein sehr ähnliches (wenn nicht sogar besseres) Erlebnis wie eine native App zu bieten.

Im Gegensatz zu herkömmlichen Apps sind Progressive Web Apps eine Mischform zwischen normalen Webseiten und mobilen Anwendungen. Der Begriff “progressiv” bezieht sich auf die Tatsache, dass sie neue Funktionen einführen und aus Sicht der Nutzererfahrung zunächst als normale Webseiten wahrgenommen werden, sich aber nach und nach immer mehr wie mobile Apps verhalten, u.a. plattformübergreifend.

Vor- und Nachteile der Progressive Web App
Die Bedeutung von “Manifest” und “Service Workers”
Welche sind die am häufigsten verwendeten Technologien für PWA?
Wie wählt man zwischen einer PWA oder einer nativen Lösung
Die Unterschiede im Installationsprozess: PWA vs. native App
Die wichtigsten Beispiele für eine Progressive Web App
Ist die Zukunft also “progressiv”?

Vor- und Nachteile der Progressive Web App

Die wichtigsten Merkmale sind:

Progressiv – Sie funktionieren für jeden Nutzer, unabhängig vom gewählten Browser, da sie von Grund auf mit progressiven Verbesserungsprinzipien aufgebaut sind.
Responsive – Sie passen sich an die verschiedenen Bildschirmgrößen an: Desktop, Mobile, Tablet oder Dimensionen, die später verfügbar werden können.
App-ähnlich – Sie verhalten sich gegenüber dem Nutzer wie native Apps, was Interaktion und Navigation angeht.
Aktualisiert – Die Informationen sind immer auf dem neuesten Stand, dank des Datenaktualisierungsprozesses, der von den Service Workern angeboten wird.
Sicher – Sie werden über das HTTPS-Protokoll offengelegt, um zu verhindern, dass die Verbindung Informationen anzeigt oder die Inhalte verändert.
Durchsuchbar – Sie werden als “Anwendungen” identifiziert und von Suchmaschinen indiziert.
Reaktivierbar – Die Anwendung kann dank Funktionen wie Webbenachrichtigungen leicht reaktiviert werden.
Installierbar – Sie ermöglichen es dem Nutzer, die Apps, die er für besonders nützlich hält, mit dem entsprechenden Symbol auf dem Bildschirm seines mobilen Endgeräts (Homescreen) zu “speichern”, ohne sich mit all den Schritten und Problemen auseinandersetzen zu müssen, die mit der Nutzung des App-Stores verbunden sind.
Verlinkbar – Einfaches Teilen über eine URL ohne komplexe Installationen.
Offline – Einmal mehr geht es darum, den Nutzer über alles zu stellen und die übliche Fehlermeldung im Falle einer schwachen oder fehlenden Verbindung zu vermeiden. Die PWA basieren auf zwei Besonderheiten: erstens das “Skelett” der App, das an die Seitenstruktur erinnert, auch wenn der Inhalt nicht reagiert, und dessen Elemente den Header, das Seitenlayout sowie eine Illustration umfassen, die signalisiert, dass die Seite geladen wird.

Schwächen beziehen sich auf:

iOS-Unterstützung ab Version 11.3 aufwärts;
größere Nutzung des Geräteakkus;
nicht alle Geräte unterstützen den vollen Umfang der PWA-Funktionen (gleiche Sprache für iOS- und Android-Betriebssysteme);
es ist nicht möglich, ein starkes Re-Engagement für iOS-Nutzer zu etablieren (URL-Schema, Standard-Webbenachrichtigungen);
die Unterstützung für die Offline-Ausführung ist jedoch begrenzt;
mangelnde Präsenz in den Stores (es gibt keine Möglichkeit, über diesen Kanal Traffic zu akquirieren);
es gibt keine “Kontrollinstanz” (wie die Stores) und keinen Genehmigungsprozess;
begrenzter Zugriff auf einige Hardwarekomponenten der Geräte;
wenig Flexibilität in Bezug auf “spezielle” Inhalte für Nutzer (z.B. Treueprogramme, Loyalität, etc.).

Die Bedeutung von “Manifest” und “Service Workers”

Die neuen Funktionen moderner Browser, die es PWAs ermöglichen, das Beste anzubieten, sind “Manifest” und “Service Workers”.

Manifest
Es handelt sich um eine einfache JSON-Datei, die die grundlegenden Parameter der PWA definiert, um zu steuern, wie die App dem Benutzer erscheinen soll, und um ihr Aussehen beim Start zu definieren: Icons, andere grundlegende Merkmale wie Farben, Schriftarten, Bildschirmausrichtung und die Möglichkeit, auf dem Startbildschirm installiert zu werden.

Service Worker
Sie sind der eigentliche Schlüssel zu den erweiterten Erfahrungen, die eine PWA bieten kann. Ein Service Worker ist ein Skript, das der Browser getrennt von einer Webseite im Hintergrund ausführt, um Funktionen zu nutzen, die keine Webseite oder Benutzerinteraktion erfordern.

Heute umfassen SWs bereits Funktionen wie Push-Benachrichtigungen und Hintergrundsynchronisierung. In Zukunft werden sie Funktionen wie periodische Synchronisation oder Geofencing unterstützen. Die Hauptfunktion ist die Fähigkeit, Netzanfragen abzufangen und zu verwalten, einschließlich der programmatischen Verwaltung eines Cache für Antworten. Es handelt sich um eine API, die Offline-Erlebnisse unterstützt, indem sie Entwicklern die vollständige Kontrolle über das Erlebnis gibt.

Mit der Hinzufügung der Unterstützung für Service Worker in der neuesten Version von iOS hat Apple die Tür für PWAs geöffnet, um im Grunde den gesamten mobilen Markt zu erreichen.

Welche sind die am häufigsten verwendeten Technologien für PWA?

Es gibt mehrere Technologien für die Erstellung einer Progressive Web App, die hauptsächlich auf JavaScript basieren und unterschiedliche Eigenschaften haben.

Zu den wichtigsten gehören:

React
Eine leistungsstarke JavaScript-Bibliothek zur Erstellung dynamischer und moderner Benutzeroberflächen
Polymer
Eine Kombination von Komponenten, Tools und Modellen zur Erstellung von PWA
Angular
Ein JavaScript-Framework zur Erstellung dynamischer Webanwendungen, das HTML als Vorlagensprache verwendet
Ionic
Ein JavaScript-Framework zur Erstellung leistungsstarker Anwendungen für mehrere Plattformen unter Verwendung eines einfachen Codes
Accelerated Mobile Pages (AMP)
Ein Open-Source-Projekt zur Verbesserung der Leistung von Webseiten

Wie wählt man zwischen einer PWA oder einer nativen Lösung

Der Moment der Wahl kommt, für welche Lösung soll man sich entscheiden?

Es ist besser, die Entwicklung einer PWA zu wählen, wenn:

Die App muss einfach an eine breitere Nutzerbasis verteilt werden
Das verfügbare Budget ist nicht hoch
Es steht nur wenig Zeit für den Go-Live zur Verfügung
Eine korrekte Indizierung in Suchmaschinen ist wichtig
Plattformübergreifende Kompatibilität ist erforderlich
Mehr Aktualisierungen sind in kurzer Zeit erforderlich

Im Gegensatz dazu ist es vorzuziehen, eine native App zu entwickeln, wenn:

Es ist notwendig, sich in den Stores zu bewegen
Geschwindigkeit und Reaktionsfähigkeit sind Schlüsselpunkte für den Erfolg der App
Die App erfordert eine wichtige Nutzung der Hardware-Funktionen des Geräts
Das Geschäftsmodell basiert zum Beispiel auf den Kosten pro Download und / oder IAP (In App Purchase)
Die App muss mit anderen Apps von Drittanbietern integriert werden

Die Unterschiede im Installationsprozess: PWA vs. native App

Der allgemeine Prozess der Installation von nativen Apps folgt diesem Ablauf:

Zugriff auf den Referenz-Store (App Store oder Google Play)
Suche nach der App
Klick auf “Installieren”
Akzeptieren der verschiedenen Berechtigungen
Öffnen und Starten der App
Benutzung der App

Im Vergleich dazu umfasst die PWA-Installation:

Besuch der Website
Hinzufügen zum Startbildschirm des Geräts (optional)
Öffnen der App
Nutzung der App

Die wichtigsten Beispiele für eine Progressive Web App

Es gibt bereits viele “ausgezeichnete” Beispiele für PWA, die von den Nutzern auf ihren Geräten verwendet werden und zu den wichtigsten zählen wir:

Um mehr zu erfahren:
Addy Osmani auf Medium > A Pinterest Progressive Web App Performance Case Study

Instagram

Die aktuelle PWA ist der nativen App sehr ähnlich und verfügt über alle wichtigen Interaktionsfunktionen, von Benachrichtigungen bis zur Möglichkeit, Stories anzuzeigen.

Google Maps

Mehr erfahren:
The Next Web > Googles leichtgewichtiges Maps Go ist nur eine Progressive Web App

Tinder

Maternidad y todo