PWA (Progressive Web Apps) ist einer der meistdiskutierten Technologiewandel im Web und hat unter den Praktikern in der IT-Welt ein beispielloses Momentum gewonnen. Wenn Sie für das Web bauen, bin ich mir sicher, dass PWA das neueste „Buzzword“ ist, das zu Ihrem Arbeitsvokabular hinzugefügt wurde. Das ist nicht verwunderlich, denn PWA hat den weit hergeholten Traum von der Installation von Web-Apps auf dem Telefon Wirklichkeit werden lassen.
Es gab bereits eine Menge Spotlight und ‚Geekspeaks‘ über die Erstellung von PWA und deren Vorteile. Die meisten Versuche, PWA einzuführen, besonders für Neulinge, scheinen mit Jargon gefüllt zu sein oder hatten zu viel Code, der sie einschüchtern könnte, den ersten Schritt zu machen. In diesem Artikel versuche ich, eine Momentaufnahme von PWA zu geben, gerade genug, um ihren Lernprozess anzustoßen.
Was ist eine Progressive Web App?
„Progressive Web App (PWA) ist ein Begriff, der verwendet wird, um eine neue Software-Entwicklungsmethodik zu bezeichnen. Im Gegensatz zu traditionellen Anwendungen sind Progressive Web Apps ein Hybrid aus regulären Webseiten (oder Websites) und einer mobilen Anwendung. Dieses neue Anwendungsmodell versucht, Funktionen, die von den meisten modernen Browsern angeboten werden, mit den Vorteilen der mobilen Erfahrung zu kombinieren.“
Das sagt wikipedia über PWA. Nun, das mag ein wenig vage oder sogar umstritten erscheinen. Also lassen Sie uns PWA auf eine informelle Art und Weise betrachten.
Wenn jemals das Beste von Web und das Beste von Apps ein Klonkind hatten – es ist PWA. Oder anders ausgedrückt: Die Webseite hat alle „richtigen Vitamine“ genommen, damit sie sich mehr wie eine App verhält, die aus dem App Store/ Play Store heruntergeladen wurde. Sie startet als normale Webseite in einem Browser, und während der Benutzer die Webseite erkundet, erhält er die Aufforderung, ob er „Zum Startbildschirm hinzufügen“ möchte. Sobald der Benutzer dieser Aufforderung zustimmt, wird VOILA! Die PWA wird zum Startbildschirm hinzugefügt. Sobald sie vom Homescreen aus geöffnet wird, kann sie sogar die Bedienelemente der Browser-UI ausblenden und als App erscheinen.
Dies ist mehr wie ein glorifiziertes Lesezeichen, das den Sweet Spot zwischen dem Web und mobilen Apps getroffen hat. Ich sage das, weil PWA es geschafft hat, die Lücke im Web zu schließen. Das Web war schon immer durstig nach zuverlässiger Leistung auf Augenhöhe mit den nativen Apps. Es hat sich immer nach einem Platz in der Benachrichtigungsleiste und auf dem Startbildschirm gesehnt, genau wie eine App. Mehr als 40% der Nutzer springen von Webseiten ab, die mehr als 3 Sekunden zum Laden brauchen. PWA ist eine Lösung für diese „Web-Adipositas-Epidemie“, mit der die Nutzer konfrontiert sind.
Es geht darum, Reibungsverluste zu beseitigen und es den Nutzern leicht zu machen, zu dem zu gelangen, was sie wollen.
Das gesamte Lob für diese nahtlose Erfahrung sollte dem Service Worker (ein Skript, das der Browser im Hintergrund getrennt von der Webseite ausführt) gegeben werden, der das Rückgrat jeder PWA ist. Die Service Worker ermöglichen zuverlässiges und intelligentes Caching, die Aktualisierung von Inhalten im Hintergrund, Push-Benachrichtigungen und die attraktivste Offline-Funktionalität für zuvor besuchte Seiten. Das bedeutet, dass nach dem ersten Besuch einer Website die Seite und die App auch bei flackernden Netzwerken zuverlässig schnell sind.
Aber hier könnte eine Frage auftauchen – was ist mit dem schnellen ersten Laden bei zuverlässiger Performance? Hier trifft Accelerated Mobile Pages (AMP) auf Service Worker. AMP stellt zuverlässig schnelle Webkomponenten für das erste Laden zur Verfügung. Diese Komponenten werden viel schneller geladen und sind weniger datenhungrig. Websites, die die Kombination aus AMP und Service Worker nutzen, bieten eine zuverlässige Geschwindigkeit wie bei nativen Apps. Sobald die Seite geladen ist, wird der Service Worker eingerichtet und die Assets werden intelligent gecached. So bleibt die PWA immer auf dem neuesten Stand und befreit die Nutzer von den häufigen Updates aus dem App Store.
PWA in Kürze:
- Zuverlässig: Schnelles Laden und funktioniert auch offline
- Schnell : Flüssige Animationen, ruckelfreies Scrollen und nahtlose Navigation auch bei schwachen Netzwerken
- Ansprechend : Wird vom Startbildschirm aus gestartet und kann Push-Benachrichtigungen empfangen
Warum ist das wichtig?
Es ist ein Mythos, dass die Nutzer gerne die App jeder Website herunterladen, die sie häufig besuchen. Laut Comscore Mobile App Report laden über 50 % der amerikanischen Smartphone-Nutzer null Apps pro Monat herunter, d.h. die Zeiten, in denen das Telefon voller Apps war, sind vorbei und die Honeymoon-Phase der Menschen auf dem Smartphone geht zu Ende. Jeder Schritt zum Herunterladen einer App reduziert 20% der Nutzer. PWA reduziert die Schritte zwischen der Entdeckung einer App und dem Erscheinen auf dem Startbildschirm und eliminiert damit die Reibung, eine App zu installieren. Dies bietet einen sehr fruchtbaren Boden für Unternehmen, um ihre PWA zu platzieren.
Die folgenden drei Metriken können hervorgehoben werden, um die Bedeutung von PWA bei der Gestaltung des zukünftigen Webs zu verstehen.
a. Reichweite: Das Publikum im mobilen Web ist in den letzten Jahren rasant gewachsen. Google hat berichtet, dass Chrome satte 1 Milliarde mobile Nutzer hat, verglichen mit den einstigen 400 Millionen Nutzern im Jahr 2016. Laut dem Bericht von Comscore ist die Reichweite des mobilen Webs 2,5 Mal höher als die von Apps, wenn man die Top-1000-Websites und Apps betrachtet. Dies ist der Grund, warum die Entscheidung von Flipkart, Myntra usw., ihre Website aufzugeben und „nur“ eine App anzubieten, nach hinten losging. Wenn wir ein besseres Erlebnis für ein breiteres Publikum bieten könnten, könnten wir sicherlich einen Wettbewerbsvorteil gegenüber den anderen bekommen.
b. Akquise: Ein weiteres großes Problem der mobilen Apps ist die Auffindbarkeit der Nutzer im Vergleich zu Websites. Die Kosten für die Nutzerakquise im Web sind 10 Mal günstiger als bei nativen Apps. Durch die größere Sichtbarkeit und die geringe Reibung beim Onboarding ist es wahrscheinlich, dass PWA mehr Nutzer mit sehr geringem Aufwand akquirieren.
c. Konvertierung: Die nahtlose End-to-End-Benutzererfahrung, die eine PWA selbst bei fehlerhaften Netzwerken bietet, erhöht die Anzahl der erfolgreichen Konvertierungen. Flipkart hat seine PWA „Flipkart-lite“ auf den Markt gebracht, von der sie behaupten, dass sie eine Steigerung der Konversionsrate um 70 % bei geringeren Akquisitionskosten bewirkt hat.
Zusammengefasst: PWA hilft, die Conversions zu verbessern, indem sie die potenzielle Reichweite bei niedrigen Akquisitionskosten erhöht.
Wie fängt man an?
Sobald man eine neue Technologie kennengelernt hat, ist die nächste Herausforderung die Entscheidung, sie zu übernehmen. Die meisten Menschen geraten an diesem Punkt in ein Dilemma. Die Entscheidung sollte von Ihren spezifischen Geschäftsanforderungen bestimmt werden. Die folgenden zwei Fälle könnten Ihnen helfen, die für Sie passende Methode zur Implementierung von PWA zu identifizieren.
a) Von Grund auf
Betrachten Sie das Szenario, wenn ein Unternehmen eine neue Website erstellt oder ein Redesign durchläuft. In diesem Fall ist es sinnvoll und machbar, eine PWA von Grund auf zu bauen. Damit kann das Unternehmen die Möglichkeiten von PWA mit AMP, Service Workern, App Shell und Web Manifest nutzen. Zum Beispiel. Laut Ali Express konnten sie, nachdem sie ihre Website als PWA umgestaltet hatten, ihre Konversionsrate für neue Benutzer um 104 % steigern, gewannen 2X mehr besuchte Seiten pro Sitzung pro Benutzer über alle Browser und 74 % mehr Zeit pro Sitzung über alle Browser.
b) Eine einfache Version oder ein einzelnes Feature
Wenn es nicht realistisch ist, von Grund auf neu zu bauen, kann man immer eine einfache Version der Website bauen oder sich auf ein einzelnes Feature konzentrieren, das einen hohen Einfluss auf die Endbenutzer hat. Der Fokus liegt darauf, eine schnelle, ansprechende und zuverlässige Erfahrung zu liefern. AirBerlin ist in diesem Fall ein passendes Beispiel. Sie haben sich in ihrer PWA auf das Erlebnis nach der Buchung fokussiert. Nachdem ein Passagier eingecheckt hat, kann er seine Reisedetails und seine Bordkarte auch ohne Internetverbindung abrufen.
4. Herausforderungen in PWA
Es gibt einige Herausforderungen in PWA, die bei der Auswahl berücksichtigt werden müssen.
a) Browserübergreifende Unterstützung: Während Chrome, Opera und Samsungs Android-Browser PWA unterstützen, müssen IE, Edge und Safari ihre Unterstützung noch erweitern.
b) Eingeschränkte Funktionalität: PWA hat keine Unterstützung für Hardware, die nicht von HTML5 unterstützt wird
c) Eingeschränkte Legitimität: Da es keinen zentralen Download-Store für PWA gibt, fehlt ihnen das Gefühl der Legitimität und des Vertrauens, das native Apps aus dem Play Store/App Store in der Regel vermitteln.
d) Anwendungsübergreifender Login-Support: Native Apps haben die Möglichkeit, mit anderen Apps zu kommunizieren und Logins zu authentifizieren (Facebook, Twitter, Google). Als Webseite hat PWA nicht die Fähigkeit, mit anderen installierten Apps zu kommunizieren.
Fazit
Wir können nicht sagen, dass PWA in Zukunft Native Apps killen wird. Aber dennoch gibt es ein wachsendes Interesse für diesen Ansatz in der Community. PWAs stecken noch in den Kinderschuhen und haben noch viele Herausforderungen zu meistern. Dennoch haben sie das Potenzial, die Art und Weise, wie das Web funktioniert, zu verändern.
Food for Thought
Nach Ansicht von Henrik Joreteg ist „PWA die größte Sache, die im mobilen Web passiert ist, seit Steve das iPhone eingeführt hat!“
Diskutabel? Umstritten? Einvernehmlich?
Denken Sie nach, bevor die Zeit vergeht!