Progressive Web Apps, oder PWAs, sind ein neues Schlagwort in der Welt der Webentwicklung. Sie sind einer normalen mobilen App sehr ähnlich, aber für die Verwendung auf einem mobilen Gerät oder Desktop konzipiert. In diesem Blog wird erklärt, was eine progressive Web-App ist, wie sie sich von einer normalen Web-App unterscheidet und vieles mehr.
In den letzten Jahren hat Google versucht, das mobile Web zu beschleunigen, um ein besseres Benutzererlebnis zu bieten. Der erste Schritt auf diesem Weg war die Einführung von beschleunigte mobile Seiten.
Obwohl diese „abgespeckten“ mobilen Webseiten schnell waren, stießen Publisher bei der Einrichtung von Analysen, Zuordnung und Monetarisierung über Display-Anzeigen auf eine Hürde.
Während AMP ständig verbessert wird, um es verlegerfreundlicher zu machen, hat Google ein völlig anderes Framework für Web-Verleger namens „ Progressive Web-Apps (PWA).
PWAs haben sich als äußerst vorteilhaft erwiesen Forschung aus Simicart-Ergebnissen dass nach der Installation einer PWA die durchschnittliche Verweildauer vor Ort um 119 % steigt. Darüber hinaus erhöht sich die durchschnittliche Lesedauer einer Seite um 68.8 %.
In diesem Beitrag erklären wir die Bedeutung von PWA, wie diese Apps funktionieren, welche Vorteile sie haben, wie sie sich von AMP und nativen Apps unterscheiden und welche Monetarisierungsoptionen es gibt.
Was ist eine Progressive Web App?
Progressive Web Apps sind normale Webseiten oder Websites, die Aussehen, Fühlen und Verhalten Google Trends, Amazons Bestseller natives Mobiltelefon Anwendungen lassen sich auf vielfältige Weise nutzen. „Eine PWA ermöglicht die Installation der Anwendung direkt im Browserfenster, ist auf dem Smartphone wie eine native App verfügbar und funktioniert offline, genau wie eine native App“, sagt Shruti Kapoor, Softwareingenieurin bei PayPal.
Der Grund, warum diese Apps als „progressiv“ bezeichnet werden, liegt darin, dass sich die Benutzeroberfläche je nach verfügbarer Geräte- und Browsertechnologie verbessert.
Sie könnten also eine PWA auf ein einfaches Telefon laden und es wird trotzdem funktionieren. Aber seine Funktionalität und Benutzererfahrung werden sich verbessern, wenn Sie auf neuere Smartphones mit der neuesten Hardware umsteigen.
Dadurch können Verlage skalierbare Erlebnisse für das Web erstellen, ohne viel in eine herkömmliche mobile App investieren zu müssen.
Die folgenden Merkmale definieren PWAs laut Google-Entwicklern:
- progressiv: Funktioniert für jeden Benutzer, unabhängig von der Browserwahl.
- Reaktionsschnell: Passend für jeden Formfaktor: Desktop, Mobilgerät, Tablet oder noch zu entwickelnde Formen.
- Konnektivitätsunabhängig: Servicemitarbeiter ermöglichen die Arbeit offline oder in Netzwerken geringer Qualität.
- App-ähnlich: Fühlen Sie sich für den Benutzer wie eine App mit Interaktionen und Navigation im App-Stil.
- frisch
: Immer auf dem neuesten Stand dank Service-Worker-Update-Prozess.
- Sicher: Wird über HTTPS bereitgestellt, um Snooping zu verhindern und sicherzustellen, dass der Inhalt nicht manipuliert wurde.
- Erkennbar: Diese sind dank der W3C-Manifeste und des Service-Worker-Registrierungsbereichs, der es Suchmaschinen ermöglicht, sie zu finden, als „Anwendungen“ identifizierbar.
- Wiedereinschaltbar: Erleichtern Sie die erneute Interaktion durch Funktionen wie Push-Benachrichtigungen.
- Installierbar: Ermöglichen Sie Benutzern, Apps, die sie am nützlichsten finden, auf ihrem Startbildschirm zu „behalten“, ohne den Aufwand eines App Stores.
- Verknüpfbar: Einfache Weitergabe über eine URL und keine komplexe Installation erforderlich.
Das war also alles, was Sie über eine progressive Web-App wissen müssen. Sehen wir uns nun an, wie es funktioniert.
Wie funktionieren Progressive Web Apps?
Progressive Web Apps nutzen die Vorteile neuer Funktionen, die von modernen Browsern unterstützt werden, darunter Web-App-Manifeste und Service-Arbeiter. Jede Website/App muss die vier Mindestbedingungen erfüllen damit es als Progressive Web App klassifiziert werden kann.
- A Web-Manifest Stellt Metainformationen zu einer Anwendung (z. B. Name, Autor, Symbol und Beschreibung) in einer JSON-Textdatei bereit. Herausgeber können das Web-Manifest selbst schreiben oder die Datei mit einem Web-App-Manifest-Generator generieren.
- Ein Service Worker ist ein JavaScript-Code, der wie ein Proxyserver fungiert, der zwischen der App, dem Browser und dem Netzwerk sitzt. Sie werden verwendet, um effektive Offline-Erlebnisse bereitzustellen, indem Netzwerkanfragen abgefangen und Informationen im Hintergrund zwischengespeichert werden.
- Ein Symbol fungiert als App-Symbol, wenn ein Benutzer eine PWA in seiner Anwendungsschublade behält. Jedes JPEG-Bild mit der Größe 512×512 Pixel funktioniert einwandfrei.
- Sie müssen die App über a bereitstellen sichere HTTPS-Verbindung. Die meisten Hosting-Anbieter bieten gegen Aufpreis ein HTTPS-Zertifikat an. Sie können diese auch bei einem Drittanbieter sichern. Eine sichere Website ist auch besser für Ihre Marke.
Was ist der Unterschied zwischen Progressive Web Apps und Native Apps?
Es gibt viele Unterschiede zwischen diesen beiden. Nachfolgend haben wir einige der wichtigsten aufgeführt.
Kosten
Unter vielen progressiven Web-App-Funktionen ist die Kosteneffizienz einer der größten Vorteile.
Zwischen diesen beiden besteht ein erheblicher Kostenunterschied. Beim Entwerfen nativer Apps müssen Sie die erforderliche Sprache gut beherrschen. Ganz zu schweigen davon, dass Sie Apps für beide Betriebssysteme erstellen müssen – Android und IOS.
Andererseits sind progressive Web-Apps viel kostengünstiger zu erstellen. Sie müssen keine Programmiersprachen erlernen und benötigen keine zusätzlichen Ressourcen, um jede Version der App zu warten oder zu aktualisieren.
Im Gegensatz zu nativen Apps sind progressive Web-Apps eine großartige Möglichkeit, beim Erstellen und Aktualisieren Ihrer App Zeit und Geld zu sparen. Sie können eine einzige Codebasis für verschiedene Plattformen haben, was bedeutet, dass Sie sich nicht um die Erstellung separater Versionen für jede Plattform kümmern müssen.
Auffindbarkeit
Da progressive Web-Apps mithilfe von Webtechnologien wie HTML, Javascript, .CSS usw. erstellt werden, können sie von Suchmaschinen indiziert werden. Sie funktionieren wie eine Website, können also mit den richtigen Suchmaschinenoptimierungstechniken auch in den Suchmaschinen gelistet werden.
Native Apps funktionieren anders. Sie sind im Allgemeinen für Android und IOS konzipiert und können nur in den entsprechenden Stores – Play Store und App Store – gerankt werden.
Sicherheit
Was die Sicherheit betrifft, sind PWAs sicherer als herkömmliche Web-Apps, da sie unter HTTPS ausgeführt werden müssen, einem Sicherheitsprotokoll, das vor Manipulationen beim Austausch zwischen Client und Server schützt.
Mit einer nativen App können Sie mehrere Sicherheitsmaßnahmen integrieren, beispielsweise Multi-Faktor-Authentifizierung und Zertifikat-Pinning.
Die Vorteile progressiver Web-Apps
Progressive Web Apps haben viele deutliche Vorteile gegenüber regulären Websites. Genau wie Apps, sie Erfahren Sie mehr über den Benutzer bei jedem Besuch, auch wenn sie nicht eingeloggt sind.
Wenn also jemand die Website ein paar Mal besucht, kann die App dies tun eine Download- oder Web-Benachrichtigungsaufforderung auslösen. Darüber hinaus sind sie online zugänglich und können Inhalte dynamisch aktualisieren, wodurch ein nahtloseres Benutzererlebnis entsteht.
Noch wichtiger als all das ist, Progressive Web Apps sind schnell. „Unsere eigenen Untersuchungen haben ergeben, dass PWAs zwei- bis viermal schnellere Seitengeschwindigkeiten liefern und so dafür sorgen, dass Ihre hart verdienten Benutzer engagiert bleiben und konvertieren“, sagt Igor Faletsky, CEO von Mobify. „Progressive Web Apps ermöglichen App-ähnliche Erlebnisse mit der Reichweite des Webs.
Das Benutzererlebnis ist beeindruckend und lädt sofort, selbst bei schlechten Netzwerkbedingungen. Stellen Sie es sich wie eine mobile App vor, aber ohne den App- oder Play Store aufrufen zu müssen.
Progressive Web Apps haben tolle Ergebnisse geliefert für Hunderte von Web-Publishern und E-Commerce-Anbietern. Nehmen Sie den Fall von Pinterest, das letztes Jahr seine Website in eine Progressive Web App umgewandelt hat.
Seitdem verzeichnete die Website einen Anstieg der Kern-Engagement-Kennzahlen um 60 %, einen Anstieg der Anzeigenklicks um 50 % und einen Anstieg der Werbeeinnahmen um 44 %.
Die meisten Vorteile von PWAs sind die gleichen wie bei Apps: Schneller, bessere Benutzererfahrung und erhöhte Benutzerbindung.
Nachdem Sie nun verstanden haben, was PWAs sind und wie sie funktionieren, vergleichen wir sie mit AMPs.
PWAs und AMPs weisen einige Gemeinsamkeiten auf, es gibt jedoch auch einige wesentliche Unterschiede zwischen den beiden.
Werfen wir einen Blick darauf, was das ist, damit Sie besser verstehen, wie die einzelnen Funktionen funktionieren.
PWA vs. AMP: Was ist der Unterschied?
Progressive Web Apps sind eigentlich eine Ableger des Accelerate Mobile Pages-Projekts. Während AMP verwendet wird, um die Seitenladezeiten auf Mobilgeräten zu verkürzen, werden PWAs genauso schnell geladen, bieten jedoch zusätzliche Funktionalität. Für beide Frameworks wird derzeit an der Entwicklung gearbeitet, sodass die Auswahl eines Frameworks eine Frage des Anwendungsfalls und der Präferenz ist.
Publisher gehen davon aus, dass AMP einen SEO-Vorteil hat. Aber Graeme Caldwell bei Erweiterter Web-Ranking-Blog erklärt, dass PWAs keinerlei Nachteile haben. „Vor nicht allzu langer Zeit waren clientseitige Webanwendungen ein SEO-Albtraum.
Heutzutage können Unternehmen Progressive Web Apps und andere JavaScript-Webanwendungen bedenkenlos nutzen, ohne dass sich dies negativ auf die Suchmaschinenoptimierung auswirkt“, sagt er.
Monetarisierung progressiver Web-Apps
Hier haben Progressive Web Apps einen leichten Vorteil gegenüber Accelerated Mobile Pages, wenn auch mit höheren anfänglichen Einrichtungskosten.
AMP ist ein ehrgeiziges Projekt, das sein Kernversprechen erfüllt hat, das Laden mobiler Webseiten zu beschleunigen. Allerdings hatte es Schwierigkeiten, die Erwartungen der Publisher zu erfüllen, nämlich hinsichtlich der Monetarisierungsoptionen und der Werbeeinnahmen.
„PWAs können genauso monetarisiert werden wie progressive Websites und native Apps. Tatsächlich können Ihre Einnahmen am Ende sogar höher ausfallen, da keine Verpflichtung zur Zahlung einer Provision aus Verkäufen an Drittanbieter besteht (im Fall nativer Apps. Dies wäre der App Store oder Google Play, die eine Kürzung vornehmen). aller Verkäufe)“, schreibt Alexandra Soroka im GoodBarber-Blog.
Angenommen, Werbung ist die Monetarisierungsmethode Ihrer Wahl. In diesem Fall sind alle Möglichkeiten vorhanden, d. h. Sie haben die Möglichkeit, mit einem externen Werbenetzwerk zusammenzuarbeiten und Ihre eigenen internen Werbekampagnen zu erstellen, wenn Sie eigene Partnerschaften oder Vereinbarungen haben.
Progressive Web Apps eignen sich gut zur Monetarisierung, da die Umsatzgenerierung mithilfe von „Apps“ ein gelöstes Problem ist. Genau wie Apps bieten PWAs mehrere Orte zum Anzeigen von Werbung, verschiedene Anzeigenformate und Verbindungen zu mehreren Werbenetzwerken. Zu den gängigsten Formaten gehören: Bannerwerbung und Interstitial-Anzeigen.
Sie können Anzeigen in der Startansicht, Listenansicht und Anzeigeansicht Ihrer PWA anzeigen. Einfache Integration mit beliebten Werbetechnologien wie z DFP ist ein zusätzlicher Vorteil.
So erstellen Sie progressive Web-Apps?
Der Einstieg in PWAs ist einfach – Sie brauchen nur ein paar wichtige Zutaten und schon kann es losgehen! Dieses kleine Tutorial für progressive Apps hilft Ihnen dabei, die Voraussetzungen für den Beginn der PWA-Entwicklung zu kennen.
Zubehör
Es gibt viele verschiedene Technologien, die Sie zur Entwicklung von PWAs verwenden können. Die beliebteste und bekannteste Option ist jedoch AngularJS. Darüber hinaus können Sie auch ReactJS und Polymer verwenden.
HTTPS
Der zweite Schritt besteht darin, Ihre progressive App sicher zu machen. Hierzu empfiehlt es sich, Ihre Website auf einem Server mit HTTPS-Verbindung zu hosten. Dadurch wird der Schutz der Daten Ihrer Benutzer gewährleistet. Es verleiht Ihrer Website ein zusätzliches Maß an Sicherheit.
Anwendungs-Shell
Die Anwendungs-Shell ist das, was der Benutzer zuerst sieht, wenn er Ihre App öffnet. Mit anderen Worten: Es handelt sich um den ersten Eindruck, den Ihre App hinterlässt.
Die Shell schafft die Grundlage für die Erfahrung des Benutzers mit Ihrer App, indem sie einen Ausgangspunkt für die Navigation und Interaktion mit der App bietet.
Manifestdatei
Diese JSON-Datei wird mit einem bestimmten Zweck generiert – um alle Informationen zu enthalten, die das Aussehen und die Funktion Ihrer PWA steuern.
In dieser Datei können Sie beispielsweise den Namen, die Beschreibung, das Symbol, die Farben und viele Funktionen Ihrer progressiven Web-App festlegen.
Dadurch haben Sie die volle Kontrolle darüber, wie Ihre App aussieht und sich verhält, was es einfacher macht, ein einzigartiges und personalisiertes Erlebnis für Ihre Benutzer zu schaffen.
Servicemitarbeiter
Eine der grundlegenden Technologien, die PWAs ermöglichen, ist der Einsatz von Servicemitarbeitern.
Servicemitarbeiter ermöglichen den Offlinebetrieb Ihrer App und unterstützen erweiterte Funktionen, indem sie Assets zwischenspeichern und Hintergrundvorgänge verwalten. Darüber hinaus kann es Aufgaben auch dann ausführen, wenn Ihre Progressive Web-App inaktiv ist.
Zusammenfassung
Es sollte offensichtlich sein, dass Progressive Web Apps die Zukunft sind. In den letzten Monaten haben wir viele Ankündigungen und Änderungen gesehen, die wirklich spannend sind.
Google hat große Anstrengungen unternommen, um PWAs zur ersten Wahl für Entwickler zu machen, und Microsoft ist diesem Beispiel mit der Ankündigung progressiver Web-Apps für Windows gefolgt. Wir sind sehr gespannt, wie sich die Zukunft von PWAs entfaltet.
Wir hoffen, dass Ihnen der Blog dabei geholfen hat, zu verstehen, was eine progressive Web-App ist, wie sie funktioniert, progressive Web-Apps und native Web-Apps usw. Vielen Dank fürs Lesen.
Häufig gestellte Fragen – Progressive Web Apps
Ja, jetzt ist es soweit. Facebook war eines der ersten Unternehmen, das 2018 damit begann, Progressive Web Applications (PWAs) zu testen – gerade als PWAs zu einem wichtigen Schlagwort in der Technologiebranche wurden. Daher spielte Facebook eine große Rolle dabei, dass PWAs immer mehr zum Mainstream wurden.
Eines der besten Beispiele für progressive Web-Apps ist das neue Bestellsystem von Starbucks. Tatsächlich haben Sie es möglicherweise auch verwendet.
Starbucks hat ein innovatives neues Bestellsystem entwickelt, das über die Progressive Web App funktioniert. Sie bietet Benutzern ein ähnliches Erlebnis wie die bestehende native App, bietet jedoch zusätzlich die Möglichkeit, sie im Offline-Modus auszuführen.
Das bedeutet, dass Kunden das Menü durchsuchen, ihre Bestellungen anpassen und Artikel in ihren Einkaufswagen legen können, ohne eine Internetverbindung zu benötigen.
Progressive Web App (PWA) verfügt über eine Reihe von Funktionen. Diese Apps wurden eingeführt, um die Weiterentwicklung des mobilen Internet-Ökosystems zu unterstützen.
Die wichtigsten Funktionen sind die Möglichkeit, im Offline-Modus zu arbeiten, Push-Benachrichtigungen, Startbildschirmsymbole und Desktop-Unterstützung.
Shubham ist ein digitaler Vermarkter mit umfangreicher Erfahrung in der Werbetechnologiebranche. Er verfügt über umfassende Erfahrung in der Programmbranche und leitet Geschäftsstrategien und Skalierungsfunktionen, einschließlich, aber nicht beschränkt auf, Wachstum und Marketing, Betrieb, Prozessoptimierung und Vertrieb.
3 Kommentare
Pingback: AdPushup auf Twitter: „Was sind progressive Web-Apps und wie funktionieren sie? https://t.co/jlObYXFvWr“
Ich verstehe, dass Google AdSense for Content nicht für PWAs geeignet ist, da Sie über Text verfügen müssen, den AdSense zum Generieren kontextbezogener Anzeigen verwenden kann.
Die AdSense-Anzeigen in meiner Webanwendung wurden in letzter Zeit immer wieder gestoppt (obwohl kein Grund angegeben wurde), daher suche ich nach Anzeigenoptionen, die gut für PWAs geeignet sind.
Adsense kann nicht für PWA verwendet werden.