Im Jahr 2016 übertrafen mobile Benutzer erstmals diejenigen, die über Desktop-Geräte auf das Internet zugreifen. Seitdem zeigt mobile keine Anzeichen einer Verlangsamung.
Da jeder darauf aus ist, wie Websites und Web-Apps mobiler gestaltet werden können, werden Sie zunehmend auf den Begriff "progressive Web-App" stoßen. Heute untersuchen wir, was das ist, wie es sich von anderen Technologien wie AMP unterscheidet und wie Sie damit beginnen können.
Mobile wird nicht langsamer
Eine Studie von Stone Temple zeigt, wie diese Kluft mit jedem Jahr weiter wächst. So haben sich diese Nutzungstrends allein in den USA von 2016 bis 2017 verändert:
Und mobil scheint bei globalen Nutzern noch beliebter zu sein:
Als solches müssen wir uns fragen: Wie verbessern wir die mobile Erfahrung, so wie sie ist? Haben wir den Gipfel der mobilen Freundlichkeit erreicht?
Google hat es sich zur Aufgabe gemacht, diese Frage mit der Einführung der progressiven Web-App im Jahr 2015 zu beantworten. Lassen Sie uns herausfinden, wie die Zukunft des mobilen Webs mit progressiven Web-Apps aussieht und warum Sie sich darum kümmern sollten.
Was ist eine progressive Web-App?
Eine progressive Web-App (PWA) schließt die Lücke zwischen mobilen Websites und mobilen Apps. Es ist zwar einfach, eine PWA als mobile Website zu beschreiben, die in einer App-Shell eingeschlossen ist, aber es gibt noch viel mehr.
Im Wesentlichen braucht es die mobilen Benutzer, die die Benutzer möchten, und verstärkt sie mit all dem Guten, das von einer eigenen, reaktionsschnellen, nativen App ausgeht. Sie können Folgendes von einer progressiven Web-App erwarten:
- App-ähnliche Benutzeroberfläche und Navigation
- Seitenzahl
- Zuverlässigkeit
- Startbildschirm Präsenz
- Offline-Fähigkeiten
- Telefoniefunktionen (wie Push-Benachrichtigungen und Geolocation)
Es gibt viele Arten von Websites, die von einer PWA profitieren können. Soziale Netzwerke wie Twitter haben bereits den Wandel vollzogen.
Medienunternehmen wie Forbes, Immobilienseiten wie Housing.com und Hospitality-Services wie Ele.me haben ebenfalls erfolgreich PWAs eingeführt.
Jeder hatte unterschiedliche Ergebnisse, obwohl das Ergebnis immer das gleiche ist: schnellere Ladezeiten, verbesserte Benutzeroberfläche und großer Komfort und Zugriff. Was alle zu mehr engagierten Benutzern führt.
Wie erstellen Sie eine progressive Webanwendung?
Im Gegensatz zu nativen Apps, für die normalerweise App-Entwickler eingestellt werden müssen, um den Prozess zu steuern, und umfangreiche Mittel dafür investiert werden, sind progressive Web-Apps viel einfacher und in der Regel kostengünstiger zu erstellen.
Eine progressive Web-App besteht aus zwei Teilen: einem Web-App-Manifest und Service-Mitarbeitern. Lassen Sie mich noch weiter erklären.
Manifest für Webanwendungen
Dies ist eine JSON-Datei, die die app-ähnlichen Elemente einer PWA definiert. Es beinhaltet Dinge wie:
- Name der App
- App-Symbol
- Navigationsdesign und Elemente für die Kopf- und / oder Fußzeile
- Design des Startbildschirms
- Andere Metadaten
Servicemitarbeiter
Es sind die Servicemitarbeiter, die fortschrittlichen Web-Apps ihre Macht über das Standard-Web-Erlebnis verleihen.
Service-Mitarbeiter werden über eine JavaScript-Datei konfiguriert. Sie machen Ihre App so effizient und blitzschnell wie möglich. Unabhängig davon, ob Ihre Benutzer online oder offline sind, haben sie immer Zugriff auf Ihre Inhalte, da Service-Worker wie Caching-Proxies funktionieren.
Beim Erstellen einer progressiven Web-App stehen Ihnen mehrere Optionen zur Verfügung.
Die erste Option besteht darin, die Entwicklerdokumentation von Google zu verwenden und Ihre eigene PWA zu schreiben. Für diese Option sind jedoch noch Zeit und Ressourcen erforderlich.
Wenn Sie nicht bereit sind, dieses Arbeitsniveau zu bewältigen oder Ihre Energie lieber an anderer Stelle konzentrieren möchten, können Sie ein Tool wie die Duda-Webdesign-Plattform verwenden, um Ihre Website einfach in eine progressive Web-App umzuwandeln.
Sie brauchen nur einen Klick, um die Funktion zu aktivieren, und nur ein paar mehr, um sie nach Ihren Wünschen zu konfigurieren!
Wie unterscheidet sich eine progressive Web-App von einer Website?
Wie Sie dem comScore-Bericht für 2017 Mobile Mobile App 2017 entnehmen können, verbringen mobile Benutzer die meiste Zeit auf ihren Handys mit Apps und nicht mit browserbasierten Websites.
Es gibt sehr gute (und gültige) Gründe, warum mobile Benutzer die App-ähnliche Erfahrung dem einfachen Browser vorziehen. Und da der PWA Benutzern hilft, diesen Sprung zu vollziehen, ohne einen weiteren ressourcenintensiven Download aus dem App Store vornehmen zu müssen, sollten Sie die folgenden Unterschiede und Vorteile genau beachten.
Progressive Web-Apps sind die optimale Wahl über das mobile Web, weil:
- Ein PWA ist so gestaltet, dass es ansprechender ist, da es einfach zu findende Symbolleisten und Elemente verwendet.
- Benutzer fügen Ihr Symbol Ihrem Startbildschirm hinzu. Dadurch wird die Sichtbarkeit erhöht, sodass die Wahrscheinlichkeit besteht, dass Sie mit Ihrer App interagieren.
- Android-Browser fordern Benutzer automatisch zur Installation auf. PWAs zu ihren Startbildschirmen, was den Komfortfaktor erhöht.
- PWAs führen zu unglaublich schnellen Ladezeiten.
- Servicemitarbeiter erhöhen die Zuverlässigkeit des Zugriffs auf PWAs, da sie unabhängig von der Konnektivität sind.
- PWAs lassen sich nahtlos in die Telefoniefunktionen der Benutzer integrieren. vor allem Push-Benachrichtigungen, Click-to-Call- und Geolocation-Dienste.
- HTTPS ist eine Voraussetzung für alle PWAs, wodurch diese von Natur aus sicherer sind als das Web.
- JavaScript zum Rendern blockieren
- Gewichtige Dateien
- Externe Skripte
- Aufgeblähtes CSS
- Ressourcenintensive Animationen
- Das mobile Web ist zu einschränkend und funktioniert nicht über die Grenzen des Browsers hinaus.
- AMP eignet sich hervorragend für inhaltsgesteuerte Websites, aber nicht viel anderes.
- Native Apps sind eine gute Lösung für bestimmte Geschäftsmodelle, können jedoch teuer zu bauen, schwer zu verwalten sein und die Nutzer nicht zufrieden stellen.
Mynet war eines dieser Unternehmen, das den drastischen Unterschied zwischen der Erfahrung mit mobilen Websites und seiner mobilen App zur Kenntnis nahm.
Während 85% des Verkehrsaufkommens, das Mynet erhielt, aus dem mobilen Internet stammten, verbrachten die Benutzer doppelt so viel Zeit mit dem Gegenstück der mobilen App. Als die türkische Medienmarke ihre PWA (mit Hilfe von AMP-gestützten Inhalten) auf den Markt brachte, sah Mynet, dass sich die Seitenzugriffe und die Vor-Ort-Zeit erheblich verbesserten.
Wie unterscheidet sich eine progressive Webanwendung von beschleunigten mobilen Seiten?
Was wollen mobile Benutzer? Geschwindigkeit, Bequemlichkeit und Benutzerfreundlichkeit - Dinge, die sowohl von PWAs als auch von AMP-Artikeln außergewöhnlich gut sind. Allerdings gibt es einen deutlichen Unterschied zwischen den beiden von Google entwickelten mobile Plattformen.
Mit AMP oder Accelerated Mobile Pages bleiben die Benutzer im mobilen Browser. Es reduziert jedoch die Ladezeiten erheblich, indem Elemente entfernt oder optimiert werden, die dazu neigen, die Ladegeschwindigkeit des Browsers zu beeinträchtigen.
Im Grunde genommen werden all diese Elemente aus dem Backend genommen, die das Frontend-Erlebnis beeinträchtigen, und machen sie zu etwas leichterem und überschaubarem. Aus diesem Grund gibt es einige Bereiche der mobilen Nutzung, die gefährdet sind. Aus diesem Grund ist AMP ideal für inhaltsintensive Websites, bei denen Lesbarkeit der Funktionalität Priorität einräumt.
Auf der anderen Seite sind PWAs genauso schnell wie AMP, verzichten aber nicht auf Features. Deshalb gibt es eine größere Auswahl an Möglichkeiten für PWAs.
Was viele Benutzer vielleicht nicht wissen, ist, dass dies nicht die Wahl des einen oder des anderen sein muss. Google hat diese Lösungen so entwickelt, dass sie gemeinsam arbeiten können. Ein typisches Beispiel ist Wego.
AMP wurde mit PWA-Servicemitarbeitern für superschnelle Ladegeschwindigkeiten (unter 1 Sekunde) kombiniert. Dies führte zu erheblichen Verbesserungen bei organischen Besuchen (um 12%) und Konversionen (95% mehr). Wego stellte auch fest, dass das schnellere Laden von Seiten mehr Engagement (dreimal mehr) für die monetarisierten Elemente der App bedeutet.
Wie unterscheidet sich eine progressive Web-App von einer nativen App?
Eine Localytics-Studie aus dem Jahr 2016 zeigt, wie schwierig es für native Apps sein kann, einen bestimmten Platz auf den mobilen Geräten der Benutzer zu beanspruchen:
Sobald sich eine App bewährt hat und die Benutzer sich fast ein Dutzend Mal einloggen und einloggen, sehen diese Retentionsraten ziemlich solide aus. Aber was ist hier los? Warum lieben Benutzer mobile Apps, können sich jedoch nicht dazu verpflichten?
Wenn Sie eine native App mit einer progressiven Web-App vergleichen, sehen Sie einen deutlichen Unterschied, warum das mobile Web immer mehr in Richtung PWA wechselt:
Kosten
Der Bau einer PWA ist wesentlich kostengünstiger, wodurch sie für mehr Unternehmen zugänglich ist.
Durchsuchbarkeit
PWAs können genauso bewertet werden wie jede normale mobile Website bei der Suche. Dies bedeutet, dass die Wahrscheinlichkeit höher ist, dass Benutzer auf sie treffen, als diejenigen, die den dedizierten App Store ihres Geräts besuchen müssen.
Ressourcen
PWAs neigen dazu, dank Service-Mitarbeitern schlank zu werden. Native Apps, da es sich um Bandbreite und Speicherplatzierung handelt, können damit nicht mithalten. Laut dem Bericht von comScore besteht der Hauptgrund dafür, dass Benutzer eine App löschen, darin, wie viel Speicherplatz verbraucht wird:
Flexibilität
Im Allgemeinen werden native Apps für ein Gerät über ein anderes erstellt: iOS oder Android. Die Wartung eines Produkts erfordert also in den meisten Fällen mindestens die doppelte Arbeit. Mit PWAs, die im Browser leben und auch außerhalb davon existieren können, sind sie mit allen Browsern und Geräten kompatibel.
Shareability
PWAs haben URLs, die leicht mit anderen geteilt werden können. Native Apps nicht.
Dies bedeutet natürlich nicht, dass Sie es vermeiden sollten, eine native App für Ihr Unternehmen zu erstellen, wenn dies sinnvoll ist. Native Apps eignen sich hervorragend für sehr spezifische Anwendungsfälle. Zum Beispiel:
Soziale Netzwerke, Chat- und Unterhaltungsplattformen dominieren die Liste der beliebtesten mobilen Apps. Sie finden auch eine Vielzahl von Spielen, Produktivität und belohnungsorientierten Konzepten in App-Form.
Andererseits haben PWAs normalerweise keine so strengen Einschränkungen hinsichtlich der Art der Unternehmen, die am besten für sie arbeiten.
Zusammenfassung
Warum ist irgendetwas davon überhaupt wichtig? Wenn Sie gehofft haben, einen besseren Weg zu finden, um sich mit Ihren mobilen Benutzern zu befassen und mit ihnen in Kontakt zu treten, haben die anderen verfügbaren Optionen dies möglicherweise nicht beeinträchtigt.
Die progressive Web-App nutzt die Stärken jeder dieser Plattformen und verbindet sie mit etwas, was unsere mobilen Benutzer wollen und brauchen. Dies ist die Zukunft des mobilen Webs.