Progressive Web Apps (PWA)

Was sind Progressive Web Apps oder PWAs?

Progressive Web Apps sind die technologische Kombination aus nativen Anwendungen und den HTML5-basierten Webanwendungen, die wir kennen. PWAs sind angekommen, um die technologische Lücke zwischen Apps und Webseiten zu überbrücken.

Google ist einer der Hauptbefürworter bei der Förderung der Entwicklung dieser Art von Technologie gewesen. Um seine Funktionen besser zu verstehen, müssen wir über Anwendungen sprechen, die zuverlässig, schnell und fesselnd sein müssen.

Funktionen, die Progressive Web Apps haben müssen

Damit das PWA-Konzept ausreichend klar und erklärt ist, tauchen wir in die wesentlichen Funktionen ein, die diese Technologien haben müssen.

Natürlich sprechen wir in allgemeinen Begriffen. Davon ausgehend wird jedes Geschäfts-/Servicemodell seine Ziele an die Bedürfnisse seiner eigenen Zielgruppe anpassen.

Geschwindigkeit

Zeit ist Geld, nicht nur für Google, sondern für all jene Unternehmen, in denen langsames Laden ihrer Produkte dazu führen kann, dass Nutzer einen potenziellen Kauf abbrechen.

Google betont diese Prämisse seit langer Zeit. Die Geburt des AMP-Projekts hatte dieses Ziel, und jetzt schließen sich PWAs der Notwendigkeit an, schnellen Zugang zu Informationen aus Anwendungen zu haben.

Nutzer haben heute keine Geduld; sie warten nicht darauf, dass eine Seite vollständig lädt. 53 % der Nutzer warten laut Think with Google nicht länger als 3 Sekunden, bis eine Website lädt

Zuverlässig

Wenn wir von Zuverlässigkeit sprechen, meinen wir die Betriebsgarantien der Seite. Dank der sogenannten Service Workers sollten Netzwerkverbindungsprobleme das Laden der PWA nicht verhindern.

Installierbar

PWAs können installiert werden, ohne dass man zum Chrome Store, Apple Store oder einem der vorhandenen App Stores gehen muss. Denke daran, dass sie keine nativen Anwendungen sind, sodass wir auf sie zugreifen können, ohne durch diese Stores zu gehen.

Die Installation verhält sich einfach wie eine Verknüpfung; sie braucht keinen Platz, um die verschiedenen Dateien zu speichern.

Verschiedene Geräte: Mobile und Desktop

Die Codebasis ist zwischen beiden Geräten vereinheitlicht, was bedeutet, dass Responsive-Design-Techniken sowohl für Mobile als auch für Desktop gelten.

Vor- und Nachteile von PWAs

Einige Vorteile wurden bereits oben bei der Erläuterung der Funktionen progressiver Anwendungen erwähnt. Aber es gibt viele weitere Gründe, die Verwendung dieser Technologie in unserem Geschäft in Betracht zu ziehen.

• ›Ressourceneinsparungen
• ›Keine Installation erforderlich
• ›Sehr hohe Ladegeschwindigkeit
• ›Push-Benachrichtigungen direkt auf Smartphones
• ›Läuft auf allen Betriebssystemen
• ›Verbesserte Sicherheit
• ›Weniger Entwicklungs- und Wartungsarbeit als bei einer nativen App.
• ›Wirtschaftlicher als eine native App.

Nachteile

• ›Erfordert Internetverbindung.
• ›Nicht alle Browser unterstützen PWAs.
• ›Hoher Batterieverbrauch

Was ist ein Service Worker?

Um kurz zur technischen Seite zurückzukehren, müssen wir über bestimmte Aspekte sprechen, ohne die progressive Anwendungen nicht funktionieren könnten. Service Workers sind Skripte, die im Hintergrund laufen und Anfragen an Webanwendungen, Cache oder das Netzwerk selbst stellen.

Eine wichtige Sache, die wir wissen sollten, ist, dass Service Workers nur funktionieren können, wenn du ein SSL-Zertifikat hast und sie über https bereitstellst.

Schauen wir uns das alles jetzt mit einem Beispiel an: BMWs Website und seine PWA.

PWA-Beispiel: BMW

Ich habe versucht, einen Artikel zu schreiben, ohne tief in technische Aspekte einzutauchen, und jetzt schauen wir uns ein Beispiel einer Anwendung an, das hilft, das PWA-Konzept besser zu verstehen.

Wenn wir die Website von BMW betreten, sehen wir, dass sie ein sehr attraktives Design haben, bei dem das Visuelle priorisiert wird, aber jenseits des Designs schauen wir, mit welcher Art von Website wir es zu tun haben.

Anscheinend ist es eine „normale" Website, aber wenn du in den Code eintauchst, bekommen wir die erste Überraschung. Tatsächlich ist es eine Website, die vollständig in AMP entwickelt wurde, nicht nur die mobile Version.

Aber kommen wir zur heutigen Sache.

Sobald wir auf der Website sind, gehen wir zur Leiste „Anpassen und steuern" von Chrome.

Wie du sehen konntest, hat sich ein Fenster mit dem Inhalt der BMW-Website geöffnet. Beim Vergleich beider Inhalte sehen wir, dass sie praktisch identisch sind.

Bild der Website im Browser (Chrome)

Bild der Website in PWA-Desktop

Die Entwickler von BMW haben es geschafft, ein identisches visuelles Erscheinungsbild zu bewahren. Wenn wir die „Installation" der PWA in unserem Chrome-Anwendungsordner oder sogar auf dem Desktop akzeptieren (je nach OS, ich verwende derzeit MacOS), wurde eine Verknüpfung zur PWA heruntergeladen.

Wenn wir vom Installieren von Apps überfordert sind und deinstallieren möchten, müssen wir nur zu unserem PWA-Versionsfenster gehen, auf der rechten Seite klicken, genau wie in Chrome, und Deinstallieren auswählen.

In der mobilen Version ist es praktisch ähnlich. Wenn wir die Website mit PWA-Version betreten, erhalten wir eine Benachrichtigung, eine „Verknüpfung zu erstellen".

Beim Betreten einer Website mit PWA sehen wir eine Option, eine Verknüpfung zu erstellen.

Wenn wir akzeptieren, sehen wir ein PWA-Symbol auf unserem mobilen Desktop.

DevTools, um mehr über PWAs zu lernen

An dieser Stelle möchte ich in Beispiele eintauchen, um Konzepte und Funktionen dieser Art von Anwendung zu erklären.

Dafür werden wir das Entwicklertool verwenden, das Chrome bereitstellt (DevTools). Wir öffnen den Inspektor mit der rechten Taste und gehen zu Application.

Chrome DevTools

App Manifest (Web Application Manifest)

Das Manifest ist eine kleine JSON-Datei mit grundlegenden Stilaspekten, die sie dem Browser bereitstellt, um abrupte Änderungen zu vermeiden.

Beispiel eines Manifests (JSON)

Service Workers

Wie wir zuvor erklärt haben, können wir jetzt sehen, worum es geht. Wir sehen die JS-Datei und darin die Skripte, die sie verwendet. Der Service Worker wird im Browser installiert. Wir werden mehrere von anderen Webanwendungen haben.

Eine der Hauptfunktionen dieser Art von Code ist sicherzustellen, dass immer dieselbe Version ausgeliefert wird (es kontrolliert den Cache), auch wenn wir einen anderen Tab öffnen.

Wie implementiert man PWA in WordPress?

Während wir, wenn wir unsere Website mit eigenem Code entwickelt haben, ziemlich viel manuelle Arbeit leisten müssen, wird die Situation ganz anders sein, wenn wir unsere Website in WordPress entwickelt haben. Wenn das der Fall ist, haben wir mehrere Plugins zur Verfügung, die es uns ermöglichen, PWA-Technologie mit ein paar Klicks zu aktivieren. Die PWA-Version von SEO Alive ist tatsächlich das Ergebnis dieses Plugins, das wir empfehlen.

Beliebteste Plugins zur Implementierung von PWA in WordPress.

PWAs im Marketing

Für diejenigen von uns, die im Marketing arbeiten, können Progressive Web Apps uns helfen, Ziele zu erreichen, die jede Marketingabteilung im Sinn hat, um eine Marke wachsen zu lassen.

Loyalität und Verkäufe

Eines der am schlechtesten bearbeiteten Ziele einiger Marken. Wir alle kennen das geringe Engagement, das Mobiltelefonmarken bei der Behandlung ihrer Kunden zeigen, um ein Beispiel zu nennen.

Push-Benachrichtigungen in PWAs sind eine der Aktionen, die am besten funktionieren und zur Verkaufsgenerierung beitragen.

Eine von Gartner durchgeführte Studie zu PWAs gibt uns eine Reihe sehr interessanter Statistiken über Lancome und Alibaba; Lancome berichtet eine 17%ige Steigerung der Konversionen, 51 % bei Sitzungen von Mobilgeräten und 52 % auf iOS. Alibaba (die Gruppe, zu der Aliexpress gehört) hat seine Konversionsrate um 76 % verbessert.

Obwohl wir über 2 globale Giganten gesprochen haben, hat sich gezeigt, dass eine App auf deinem Mobiltelefon zu haben, bei der Lade- und Ausführungszeit kein Hindernis ist, plus respektvolles gutes Design, die Konversionsrate erhöht.

Zusammenfassend können wir sagen, dass PWAs sich zunehmend ausbreiten, hauptsächlich unter großen Marken. In Spanien werden wir wahrscheinlich noch ein wenig brauchen, um das enorme Potenzial dieser Technologie zu erkennen, aber früher oder später wird sie implementiert werden.

Jede Technologie, die die mobile Navigation erleichtert, hat große Bedeutung; wir verbringen viele Stunden mit unseren Smartphones, und letztendlich ist der Zugang sowohl zu Inhalten als auch zu Produkten Geschäft.

Referenzen

• ›Google-Dokumentation zu PWAs