Progressive Web-App: Technologie, Vor- und Nachteile

Das mobile Fieber betrifft jeden, und Online-Shops bilden da keine Ausnahme. Jede Marke muss heutzutage mobil präsent sein. So kann es gemacht werden:

• Ein responsives Webdesign, bei dem der Inhalt der Website an die Größe von Mobil- und Tablet-Geräten angepasst wird;
• Eine native mobile Anwendung, die teuer sein kann, aber speziell für Smartphones entwickelt wurde;
• Eine progressive Web-App (PWA), die Elemente aus dem Web und nativen Apps kombiniert.

Progressive Web App (PWA) ist eine Reihe von Technologien, mit denen Sie eine Website als Anwendung auf einem Gerät installieren können. Das bedeutet, dass Sie nicht zusammen mit der Website iOS- und Android-Apps entwickeln müssen. Abgesehen davon ist die Entwicklung von PWAs nicht so schwer: Ihr Team kann dies beispielsweise durch die Anpassung vorgefertigter Themes wie Magento 2 PWA Studio tun.

PWAs werden häufiger verwendet, als Sie sich vorstellen können. Es wird für E-Commerce, Bildungsprojekte, Reiseunternehmen, Streaming-Dienste und andere verwendet. Die großen Marken wie Agent Provocateur, UK Meds, Alibaba und Eleganza nutzen PWA-Anwendungen als Basis oder zusätzlich zu ihren mobilen Anwendungen.

Progressive Web App (PWA)-Architektur

Die meisten Websites haben eine monolithische Architektur. Das bedeutet, dass sein Frontend im Backend generiert wird. Und wenn ein Benutzer eine Webseite anfordert, erstellt der Server eine HTML-Seite, indem er benutzerspezifische Informationen abruft und diese über das Internet an das Gerät des Benutzers sendet. Wenn der Benutzer eine andere Seite der Website öffnet, wiederholt sich der Vorgang.

Eine Alternative zur monolithischen Architektur ist eine kopflose Architektur. Es impliziert ein geteiltes Front- und Back-End. PWA ist eine Art Headless-Website. Infolgedessen wird beim ersten Laden nur eine einfache HTML-Seite mit einer JavaScript-Datei vom Server empfangen. Der Rest der Website wird mit dem Browser gerendert, anstatt das gesamte Material direkt vom Backend zu erhalten.

Dadurch erhält PWA seine besten Eigenschaften, wie gute UX, hohe Geschwindigkeit, Reaktionsfähigkeit usw. Hier sind die Schlüsselelemente von PWA.

Für Sie empfohlen: Die beliebtesten Frameworks zum Erstellen von Progressive Web Apps (PWAs).

Servicemitarbeiter

Im Hintergrund des Browsers arbeiten Skripte, die als „Service Worker“ bezeichnet werden. Sie funktionieren ohne Webseite und verfügen über tolle Funktionen wie die Bearbeitung von Benachrichtigungen und die Verwaltung von Netzwerkanfragen. Bisher wurden Funktionen wie Caching, Hintergrundsynchronisierung, Offline-Modus und Push-Benachrichtigungen unterstützt.

Anwendungs-Shell

Der grundlegende HTML-, CSS- und JavaScript-Code, der zum Betrieb einer Benutzeroberfläche erforderlich ist, wird als Anwendungs-Shells bezeichnet. Es ist das Rückgrat der App. Wenn ein Benutzer eine progressive Web-App startet, wird als Erstes die Anwendungs-Shell geladen. Dadurch wird sichergestellt, dass die Schnittstelle auch dann zeitnah geladen wird, wenn ein Benutzer offline ist. Darüber hinaus kann die Anwendungs-Shell zwischengespeichert werden, um ein schnelles Laden bei zukünftigen Besuchen zu ermöglichen.

Web-App-Manifest

Das Web-App-Manifest ist das Element, das dafür verantwortlich ist, wie die PWA auf Desktop- und mobilen Plattformen aussieht. Mit seiner Hilfe lässt sich steuern, wie PWAs allen Benutzern angezeigt werden. Ein Webbrowser untersucht die Manifestdatei, wenn er sich zum ersten Mal mit einem Netzwerk verbindet, lädt die Ressourcen herunter und speichert sie lokal. Die Nutzung der Web-App ist ohne Internetverbindung über den lokalen Cache des Browsers möglich.

Zwischenspeicher

Der Cache-Speicher-Ansatz macht das wiederholte Abrufen von Daten von der Quelle überflüssig. Dies wird durch die vorübergehende Speicherung der Daten in einem Rechenzentrum eines Drittanbieters oder auf dem Gerät eines Benutzers erreicht. Anstatt es von der Quelle abzurufen, kann es aus dem Cache geladen werden.

Sie können in Ihrer PWA verschiedene Caching-Techniken implementieren. Das Caching ganzer Assets ist die gängigste Vorgehensweise. Dies bedeutet, dass sowohl statische als auch dynamische Inhalte im Cache enthalten sind.

Eine weitere Taktik ist die Zwischenspeicherung von Teilvermögenswerten. Mit dieser Methode können Sie nur bestimmte Materialien zwischenspeichern, beispielsweise Skripte oder Fotos. Dies kann für Seiten effektiv sein, bei denen der Großteil des Inhalts dynamisch ist.

Vorteile einer Progressive Web App (PWA).

Laut Statista wurden im Jahr 2021 etwa 75 % der weltweiten Einzelhandelsumsätze im E-Commerce über mobile Kanäle getätigt. Im Jahr 2017 sahen die Zahlen und Prognosen für die Zukunft so aus:

Die Zahl der Nutzer mobiler Geräte wächst rasant, daher wird die Einführung von PWA wichtiger denn je. Hier sind einige der Funktionen von PWA-Sites, die es wert sind, beachtet zu werden.

Bildquelle: Statista.

Gute Leistung

PWA nutzt Hintergrunddienstmitarbeiter, um arbeitsintensive Aufgaben zu erledigen, was zu einer kürzeren Ladezeit führt. Diese Skripte arbeiten unabhängig von der Webseite und rufen alle Informationen vorab ab, die für eine schnelle und reibungslose Navigation erforderlich sind. Da die Skripte außerdem nicht auf der Seite aktiv sind, haben sie keinen Einfluss darauf, wie schnell die Seite geladen wird. Die Navigation durch die App geht praktisch schnell, sobald die Daten zwischengespeichert wurden.

Bessere Sicht

Für eine bessere Sichtbarkeit sorgt die Option „Zum Startbildschirm hinzufügen“. Kunden können die App mit nur einem Klick finden und ohne Ablenkung das Produkt auswählen. Und wenn sie das Produkt in den Warenkorb legen, können Sie sie später zum Kauf animieren, indem Sie Benachrichtigungen über Rabatte oder Sonderangebote senden.

App-ähnliche UX

PWAs verhalten sich wie Websites und haben ein ähnliches Design wie die native App. Darüber hinaus haben sowohl PWAs als auch native Anwendungen einen vergleichbaren Einfluss auf das Benutzererlebnis und teilen viele Funktionen, wie z. B. Datenbankzugriff und automatische Daten.

Cross-Support

PWAs sind überall einsetzbar. Für diejenigen, die dazu neigen, zwischen verschiedenen Geräten zu wechseln, ist Cross-Support überall verfügbar. Wenn es um Unternehmen geht, die auf PWAs angewiesen sind, ist es entscheidend, den Mitarbeitern Software zur Verfügung zu stellen, die optimal funktioniert, sei es eine Plattform- oder eine App-Version.

Niedrigere Entwicklungskosten

Die Entwicklung nativer Anwendungen erfordert zwei unterschiedliche Codebasen. Beispielsweise erfordert die Erstellung nativer Anwendungen Entwickler mit Kenntnissen in Swift oder Objective-C für die iOS-Entwicklung und Kotlin oder Java für Android, was kostspielig ist. Progressive Web-Apps wiederum basieren auf weit verbreiteten Programmiersprachen wie HTML, CSS und JavaScript. Darüber hinaus erfordert ihre Wartung ein einziges Team, das auf Webentwicklung spezialisiert ist.

Funktioniert offline

Eine der herausragenden Funktionen von PWA ist die Offline-Navigation. Wenn Ihre Verbindung ausfällt, verlieren Sie nicht den Zugriff auf wichtige Daten und Dienste.

PWA ermöglicht die Offline-Navigation in der App, indem einige der in der App angezeigten Daten zwischengespeichert und gespeichert werden. Es steigert außerdem die Leistung, indem es mit zwischengespeicherten Ressourcen umgeht und Push-Benachrichtigungen ermöglicht, sogar offline.

Es ist nicht erforderlich, die App in den App Stores zu platzieren

Die Veröffentlichung Ihrer Anwendung in den App Stores ist mit einem Mehraufwand für das Projekt verbunden. Einige Stores verlangen bereits vor der Veröffentlichung eine Zahlung und verlangen, dass das Projekt ein langwieriges Veröffentlichungs- und Zertifizierungsverfahren durchläuft. Diese Strategie erhöht die Preise und verlängert Ihre durchschnittliche Marktzeit, was gelegentlich dazu führen kann, dass Sie Werbefeiertage verpassen oder ungetestete Veröffentlichungen herausgeben, um eine Frist einzuhalten.

Mit PWA können Sie jedoch das gesamte App-Store-Problem vermeiden. PWAs sind sowohl für Kunden als auch für Unternehmen praktisch, da sie es Kunden ermöglichen, Ihre App zu nutzen und Updates zu erhalten, ohne sie herunterzuladen oder auf eine neue Verifizierungsrunde zu warten.

Vielleicht gefällt Ihnen: React Native vs. Flutter vs. PWA: Battle of Trending Mobile App Frameworks.

Nachteile der Progressive Web App (PWA).

Bedenken Sie bei der Entscheidung, welche Art von mobiler App Sie für Ihr Unternehmen einführen möchten, dass es einige Mängel gibt, die Sie berücksichtigen sollten, da die Technologie relativ neu ist.

Unzureichende iOS-Kompatibilität

Nicht alle PWA-Funktionen werden von iOS unterstützt. Im Vergleich zu Android ist die Unterstützung für Servicemitarbeiter sehr eingeschränkt. Sie können nur Anwendungsdaten speichern und ihre Dateien zwischenspeichern (keine Hintergrundaufgaben). Der Speicher ist auf 50 MB begrenzt. Aus diesem Grund ist der Zugriff vieler Benutzer auf PWAs eingeschränkt. Es gibt auch Einschränkungen bei der Nutzung einiger integrierter Funktionen wie Siri, In-App-Zahlungen usw. Die Benutzererfahrung in PWA verliert im Vergleich zur UX, die native Apps bieten. Das ist ein echter Verlust in einer Welt, in der UX mindestens genauso wichtig ist wie Marketing.

Eingeschränkte Funktionalität

Es können nicht alle Funktionen des Geräts genutzt werden. Sie können beispielsweise nicht auf Kontakte, Kalender oder Bluetooth zugreifen. Eine native App ist einer PWA häufig vorzuziehen, wenn Ihre Anwendung die Hardware eines Geräts intensiv nutzen muss. Beispielsweise werden Bluetooth-basierte Lösungen wie Dateifreigaben oder Bluetooth-Messenger typischerweise nativ entwickelt.

Erhöhter Batterieverbrauch

Die Tatsache, dass sie in komplizierten Codes verschlüsselt sind, macht es für Telefone schwieriger, sie zu entschlüsseln. Infolgedessen verbrauchen PWAs mehr Batterie als native Anwendungen.

Wie funktioniert der Installationsprozess?

Sehen wir uns anhand eines Beispiels von Lancome.com an, wie der Installationsprozess funktioniert

1. Ein Benutzer öffnet eine Website in einem Browser auf seinem Mobilgerät.
2. Der Benutzer sieht ein Pop-up mit einem Angebot. Beispiel: „Fügen Sie die App zum Startbildschirm hinzu.“
3. Der Benutzer installiert die Anwendung mit einem Klick.
4. Der Benutzer tippt auf ein Symbol und die Website wird geöffnet.

Bildquelle: Lancome.

Vielleicht gefällt Ihnen auch: Magento PWA Studio: Das Progressive Web App Tool für Magento!

Welche Ergebnisse können Sie erwarten?

Progressive Web Apps liefern hervorragende Ergebnisse für Unternehmen, die sie einführen. Laut web.dev verzeichnete Twitter beispielsweise nach der Reduzierung der App-Größe um fast 97 Prozent einen Anstieg der Seitenaufrufe pro Sitzung um 65 Prozent, 75 Prozent mehr Tweets und einen Rückgang der Absprungrate um 20 Prozent. Nach der Umstellung auf eine PWA gab es außerdem 2,3-mal mehr organischen Traffic, 58 Prozent mehr Abonnenten und 49 Prozent mehr täglich aktive Nutzer. Hulu verzeichnete durch die Einführung einer Progressive Web App zusätzlich zu seinem plattformspezifischen Desktop-Erlebnis einen Anstieg der wiederkehrenden Besucher um 27 Prozent.

Mit progressiven Web-Apps haben Sie die einmalige Chance, Ihren Benutzern ein fantastisches Web-Erlebnis zu bieten. PWAs nutzen die neuesten Webtechnologien, damit das, was Sie erstellen, von jedem, auf jedem Gerät und mit einer einzigen Codebasis genutzt werden kann.

 Dieser Artikel wurde von Alex Husar geschrieben. Alex ist Chief Technology Officer bei einem Unternehmen, das fortschrittliche Web-App-Entwicklungsdienste anbietet. Alex arbeitet seit fast einem Jahrzehnt im Unternehmen und hat sich Kenntnisse in der Webentwicklung, der Erstellung progressiver Web-Apps (PWAs) und der Teamführung angeeignet. Alex vertieft ständig sein Wissen in verschiedenen Technologiebereichen und teilt es in seinen Artikeln. Er hilft Programmierern, häufige Herausforderungen zu meistern und über die neuesten Webentwicklungstrends auf dem Laufenden zu bleiben. Sie können ihm auf LinkedIn folgen.