🤦🏾 🌘 👨🏿‍🔧 Progressive Webanwendungen. Leitfaden zum Handeln 🐽 👊🏾 🥦

Hallo Habr! Wir prüfen die Möglichkeit, ein Buch über PWA (Progressive Web Applications) zu veröffentlichen. Zu diesem Thema gibt es bereits viele Veröffentlichungen zu Habré. Von besonderem Interesse ist das Material aus dem Blog des RUVDS-Unternehmens, aus dem wir die Definition von PWA zitieren werden:

... ist eine mobile Anwendung, die von einer Webanwendung heruntergeladen wurde. Wie Sie sehen, müssen Sie zur Installation einer solchen Anwendung nicht mit dem Play Market interagieren. Dadurch ist die Installation solcher Anwendungen so einfach wie möglich. Dies ist jedoch alles andere als interessant. Durch das Starten solcher Programme erhalten Sie die Möglichkeit, mit den angezeigten Daten auch ohne Internetverbindung zu arbeiten. Mit ihnen können Sie offline mit Webseiten interagieren.

Manchmal stellt sich die Frage: In welcher Beziehung stehen progressive Webanwendungen zu nativen? Lohnt es sich, PWA zu entwickeln, wenn Sie bereits Muttersprachler sind? Zuallererst wird diese und viele andere Fragen durch den Artikel von Jason Grigsby von der Website „A List Apart“ beantwortet, den wir heute für Sie übersetzt haben. Der Artikel ist ein Auszug aus dem Buch von 2018. Bitte vergessen Sie nicht abzustimmen.

Stellen Sie sich zwei Fragen, um festzustellen, ob Ihre Organisation eine eigene progressive Webanwendung (PWA) entwickeln sollte:

Hat Ihre Organisation eine Website? Wenn ja, dann wird eine progressive Webanwendung wahrscheinlich nützlich sein. Es klingt kitschig, aber es ist: Es ist ratsam, fast jede Website in eine progressive Webanwendung zu verwandeln, da sie die Best Practices des Web enthält.
Verdient Ihre Organisation Geld durch die Website durch elektronischen Verkauf, Werbung oder auf andere Weise? Wenn ja, dann brauchen Sie definitiv eine progressive Webanwendung, da dies den Umsatz erheblich steigern kann.

Dies bedeutet nicht, dass die Site alle vorhandenen Funktionen progressiver Webanwendungen implementieren muss. Möglicherweise müssen Sie keine Offline-Funktionen, Push-Benachrichtigungen oder sogar die Möglichkeit bereitstellen, Ihre Site auf dem Startbildschirm eines Benutzergeräts festzulegen. Es ist wahrscheinlich, dass ein absolutes Minimum ausreicht: eine sichere Site, ein Servicemitarbeiter, der seine Arbeit beschleunigt, eine Manifestdatei - solche Dinge werden auf jeder Site nützlich sein.

Natürlich können Sie entscheiden, dass Ihre persönliche Website oder Ihr Nebenprojekt nicht die Ressource ist, für die es sich lohnt, eine fortschrittliche Webanwendung zu entwickeln, und zusätzliche Zeit und Mühe darauf verwendet. Dies ist verständlich, und auf lange Sicht werden sogar persönliche Websites mit den Funktionen fortschrittlicher Webanwendungen überwachsen, wenn die Unterstützung für diese Funktionen zu den Content-Management-Systemen hinzugefügt wird, auf denen diese Websites basieren. Zum Beispiel hatten Magento und WordPress zum Zeitpunkt des Schreibens dieses Textes bereits Pläne angekündigt, ihren Plattformen erweiterte Webanwendungsfunktionen hinzuzufügen. Andere werden voraussichtlich folgen.

Wenn Sie jedoch eine Website betreiben, die in irgendeiner Weise einen Gewinn für Ihr Unternehmen bringt, sollten Sie daraus eine progressive Webanwendung machen und planen, wie dies jetzt geschehen soll. Unternehmen, die fortschrittliche Webanwendungen bereitgestellt haben, erhalten höhere Conversions, mehr Nutzerinteraktion, höhere Umsätze und höhere Werbeeinnahmen. Zum Beispiel stieg Pinterest durch die Einführung von PWA, das Hauptpublikum um 60 Prozent und die von Nutzern generierten Werbeeinnahmen um 44 Prozent. Die Nutzer von West Elm verbrachten etwa 15 weitere Zeit auf der Website. Die Einnahmen aus einem Besuch stiegen um 9 Prozent .

Zeichnung: Eddie Osmani, Google, schrieb eine Fallstudie über die progressive Webanwendung von Pinterest und verglich sie sowohl mit ihrer alten mobilen Website als auch mit ihrer nativen App.

Es gibt so viele Erfolgsgeschichten im Zusammenhang mit progressiven Webanwendungen, dass mein Unternehmen, Cloud Four, eine Website namens PWA Stats gestartet hat , die diese nachverfolgt . Es ist wahrscheinlich, dass es einen Fall mit einer ähnlichen Organisation wie Ihrer gibt, und mit diesem Beispiel können Sie Kollegen von der Angemessenheit einer fortschrittlichen Webanwendung für Ihr Unternehmen überzeugen.

Abbildung : PWAstats.com enthält Statistiken und Berichte, die die Wirksamkeit progressiver Webanwendungen belegen.

Und solche überzeugende Arbeit kann notwendig sein. Trotz der offensichtlichen Vorteile fortschrittlicher Webanwendungen haben sich viele Unternehmen noch nicht neu organisiert, häufig weil das Management PWA einfach noch nicht kennt. (Wenn Sie jetzt mit der Erstellung von PWA beginnen, gewinnen Sie möglicherweise Zeit!)

Es besteht jedoch auch ernsthafte Verwirrung darüber, wozu erweiterte Webanwendungen in der Lage sind, wofür sie verwendet werden können und in welcher Beziehung sie zum nativen Web stehen Anwendungen. Diese Verwirrung führt zu Angst, Unsicherheit und Zweifeln, und all dies verlangsamt die Implementierung fortschrittlicher Webanwendungen.

Wenn Sie sich für die Implementierung von PWA in Ihrer Organisation einsetzen, verstehen Sie einige möglicherweise nicht, und Sie stoßen möglicherweise sogar auf Widerstand. Lassen Sie uns einige der Argumente diskutieren, die Ihnen helfen, Ihre Position zu stärken und Ihre Kollegen zu überzeugen.

Native Anwendungen und PWA können nebeneinander existieren

Wenn Ihre Organisation bereits über eine native Anwendung verfügt, wenden sich die Stakeholder möglicherweise dagegen, dass sie keine PWA benötigen. Dies liegt insbesondere daran, dass der Hauptvorteil von PWA in der Einführung von Features und Funktionen liegt, die nativen Anwendungen eigen sind.
Es ist verlockend anzunehmen, dass progressive Webanwendungen mit nativen konkurrieren - in der Regel wird in diesem Sinne in den Medien darüber geschrieben. Tatsächlich funktioniert eine progressive Webanwendung jedoch unabhängig davon, ob das Unternehmen bereits eine native hat.

Machen Sie eine Pause von den Streitigkeiten zwischen nativen Apps und Web-Apps und konzentrieren Sie sich auf die Besonderheiten der Benutzerinteraktion mit der Website Ihres Unternehmens im Internet. Es ist ratsam, erweiterte Webanwendungen nur aufgrund ihrer eigenen Vorteile zu verwenden: Sie helfen Ihnen, Ihre Benutzergruppe zu erweitern, Ihre Website zu schützen, Gewinne zu erzielen, zuverlässigere Interaktionen mit Benutzern bereitzustellen und sie über Aktualisierungen zu informieren - all dies ergänzt die Funktionen Ihrer nativen Anwendung.

Benutzerdefinierte Zielgruppenerweiterung

Nicht alle Ihrer aktuellen Benutzer haben Ihre native Anwendung installiert - und Ihre potenziellen Benutzer haben sie überhaupt nicht. Wahrscheinlich ist die Anwendung bei den meisten typischen Benutzern nicht einmal installiert, aber diejenigen, die sie noch installiert haben, können von einem PC dorthin gehen.

Durch die Verbesserung der Qualität der Interaktionen mit der Website erhöhen Sie die Wahrscheinlichkeit, dass Ihre aktuellen und zukünftigen Benutzer Ihre Inhalte lesen oder Ihre Produkte kaufen (oder sogar Ihre native Anwendung herunterladen!). Sie können die Qualität der Arbeit mit der Website mithilfe einer progressiven Webanwendung verbessern.

Ungeachtet dessen, was technische Blogs Ihnen versichern, wächst das mobile Web schneller als native Anwendungen. Die comScore-Website verglich die 1000 besten mobilen Apps mit den 1000 meistplatzierten Websites und kam zu dem Schluss, dass „Das Publikum im mobilen Web ist fast dreimal so groß wie das mobiler Apps und wächst doppelt so schnell . “

Obwohl es stimmt, dass Benutzer mehr Zeit in ihren bevorzugten mobilen Anwendungen als im Internet verbringen, sollten Sie bedenken, dass es manchmal sehr schwierig ist, eine Person davon zu überzeugen, Ihre Anwendung auf ihrem Gerät zu installieren. Ungefähr die Hälfte der Smartphone-Nutzer in den USA installiert in der Regel nicht einmal eine Anwendung pro Monat .

Wenn sich Ihre native Anwendung im Anwendungsspeicher befindet, kann dies nicht garantieren, dass Benutzer sie installieren. Es ist teuer, die Anwendung zu bewerben und die Benutzer zur Installation zu ermutigen. Laut Liftoff, einem Marketingunternehmen für mobile Apps,Die durchschnittlichen Kosten, die für die Installation der Anwendung durch einen Benutzer erforderlich sind, betragen 4,12 USD und steigen auf bis zu 8,21 USD pro Benutzer, wenn eine Person ein Konto in Ihrer Anwendung erstellen soll.

Wenn Sie das Glück haben und jemand mit der Installation Ihrer Anwendung beginnt, tritt das folgende Hindernis auf: Sie müssen die Benutzer davon überzeugen, die Anwendung nicht zu beenden. Als ein Spezialist, Andrew Chen, Daten zur Benutzerbindung auf dem Material von 125 Millionen Mobiltelefonen analysierte, stellte er fest, dass die durchschnittliche Anwendung 3 Tage nach der Installation 77% der DAU (täglich aktive Benutzer) verliert . Innerhalb von 30 Tagen gehen 90% der DAUs verloren. Innerhalb von 90 Tagen gehen mehr als 95% der DAUs verloren.

Zeichnung: Die Loyalität mobiler Benutzer bleibt sehr kurzlebig. Die durchschnittliche Anwendung verliert innerhalb von 90 Tagen 95% ihrer aktiven Benutzer.

Progressive Webanwendungen stehen nicht vor solchen Herausforderungen. Das Verständnis einer progressiven Webanwendung ist für eine Person nicht schwieriger als auf Ihrer Website, da dies Ihre Website ist. Alle Funktionen einer progressiven Webanwendung sind ebenfalls sofort verfügbar. Sie müssen keine Zwischenschritte ausführen: Gehen Sie zuerst zum Anwendungsspeicher und laden Sie die Anwendung von dort herunter. Die Installation ist schnell: Sie erfolgt im Hintergrund, wenn Sie die Site zum ersten Mal besuchen, und es kommt buchstäblich darauf an, dem Hauptbildschirm ein Symbol hinzuzufügen.

Wie Alex Russell 2017 in seinem Artikel über Medium schrieb :

Der Schlupf bei der Installation von PWA ist viel geringer. Unsere internen Kennzahlen bei Google zeigen, dass PWA-Banner bei vergleichbaren Mengen an PWA-Bannern und nativen Anwendungsbannern (der Vergleich ist fast der gleiche wie bei Äpfeln und Äpfeln) 5-6-mal häufiger konvertieren. Mehr als die Hälfte der Benutzer, die sich beim Navigieren durch solche Banner für die Installation der nativen Anwendung entschieden haben, beenden den Installationsvorgang nicht, während die PWA-Installation fast sofort erfolgt.

Kurz gesagt, ein erheblicher und dennoch wachsender Anteil Ihrer Benutzer kommuniziert mit Ihnen über das Internet. Progressive Webanwendungen können den Umsatz steigern, die Benutzerinteraktion sowie deren Anzahl erhöhen.

Schützen Sie Ihre Website

Wenn Sie Kreditkarteninformationen oder andere geschützte Informationen sammeln, müssen Sie Ihren Benutzern lediglich eine gut geschützte Website zur Verfügung stellen. Aber selbst wenn vertrauliche Daten auf Ihrer Site nicht verarbeitet werden, ist es dennoch sinnvoll, das HTTPS-Protokoll zu verwenden und dem Benutzer eine sichere Interaktion mit der Site zu ermöglichen. Der scheinbar unschuldigste Netzwerkverkehr kann Signale enthalten, die die Benutzeridentifikation und das potenzielle Hacken ihrer Daten vereinfachen. Was können wir zu den Bedenken hinsichtlich einer möglichen staatlichen Überwachung sagen?

Zuvor war der Betrieb eines sicheren Servers teuer, kompliziert und lief (wie es schien) langsamer als gewöhnlich. Heute hat sich alles geändert. Früher kosteten SSL / TLS-Zertifikate Hunderte von Dollar, heute jedoch der Let's Encrypt- Anbietergibt sie kostenlos weg. Viele Hosting-Anbieter arbeiten mit Zertifikatanbietern zusammen, sodass Sie HTTPS mit einem Klick konfigurieren können. Außerdem stellt sich heraus, dass HTTPS nicht mehr so langsam ist, wie es einmal schien .

HTTPS-Sites können auch auf eine neue Version von HTTP namens HTTP / 2 aktualisieren. Der Hauptvorteil von HTTP / 2 ist, dass es deutlich schneller als HTTP / 1 ist. Viele Hosting-Anbieter und Content Delivery Networks (CDNs) bieten an, dass Sie beim Wechsel zu HTTPS ohne zusätzliche Maßnahmen mit HTTP / 2 verbunden sind.

Auch wenn ein solcher Anreiz nicht ausreicht, um auf HTTPS umzusteigen, verwenden Browserhersteller die Zuckerbrot-Peitschen-Methode, um Websites dazu zu bewegen, Änderungen einzuführen. Als "Peitsche"Chrome warnte die Nutzer, dass sie ihre Daten auf einer Website eingeben, die nicht mit HTTPS ausgestattet ist . Andere Browser werden wahrscheinlich diesem Beispiel folgen und Websites kennzeichnen, die ohne Verschlüsselung funktionieren, sodass Benutzer erkennen, dass ihre Daten abgefangen werden können.

Als HTTPS-Lebkuchenbrowser benötigen Browser zunehmend HTTPS-Funktionen von der Website als obligatorisch. Wenn Sie die neuesten und besten Webtechnologien verwenden möchten, können Sie nicht auf HTTPS verzichten . Einige Funktionen, die früher über ungesichertes HTTP funktionierten, wirken sich jetzt auf vertrauliche Daten aus. Dies ist beispielsweise die Geolokalisierung. In HTTPS sind sie begrenzt. Nach einigem Überlegen scheint dies auch eine kleine Peitsche zu sein. Lebkuchenpeitsche?

In Anbetracht dessen ist es ratsam, Ihren Benutzern eine sichere Site zur Verfügung zu stellen. So sind schreckliche sinnlose Warnungen sofort ausgeschlossen. Sie erhalten Zugriff auf neue Browserfunktionen. Holen Sie sich die Geschwindigkeitsgewinne von HTTP / 2. Und außerdem: Stellen Sie die Voraussetzungen für eine fortschrittliche Webanwendung.
Um Service Worker einsetzen zu können, eine Schlüsseltechnologie für progressive Webanwendungen, müssen Sie HTTPS auf der Site ausrüsten. Wenn Sie also alle PWA-Leckereien gleichzeitig genießen möchten, müssen Sie zunächst einige ernsthafte Vorbereitungsarbeiten durchführen.

Gewinne zu steigern

Es gibt zahlreiche Studien, die einen Zusammenhang zwischen der Geschwindigkeit einer Website und der Bereitschaft und dem Geld zeigen, die Menschen bereit sind, dafür auszugeben. Laut DoubleClick "werden 53% der vom Benutzer unterbrochenen Besuche auf mobilen Websites unterbrochen, wenn die Download-Seite länger als 3 Sekunden dauert ." Das Unternehmen Walmart hat festgestellt, dass alle 100 Millisekunden zur Optimierung der Seitenladegeschwindigkeit 1% des zusätzlichen Umsatzes sinken .

Am Ende die hohe Software Die Geschwindigkeit der Interaktion mit der Site bedeutet viel. Leider beträgt die durchschnittliche Dauer des Ladens der Seiten mobiler Sites bei der Verbindung über 3G 19 Sekunden . Dies ist das Problem, mit dem wiederum eine progressive Webanwendung fertig wird.

Mit Servicemitarbeitern bieten PWAs unglaublich schnelle Interaktionen. Mithilfe von Servicemitarbeitern kann der Entwickler explizit angeben, welche Dateien der Browser im lokalen Cache speichern soll und unter welchen Umständen nach Updates für zwischengespeicherte Dateien suchen soll. Auf Dateien, die im lokalen Cache gespeichert sind, kann viel schneller zugegriffen werden als auf Dateien, die aus dem Netzwerk abgerufen wurden.

Wenn eine neue Seite in einer progressiven Webanwendung angefordert wird, befinden sich die meisten Dateien, die zum Anzeigen dieser Seite erforderlich sind, bereits im lokalen Cache des Geräts. Somit kann die Seite fast sofort geladen werden, da der Browser nur zusätzliche Informationen auf dieser Seite herunterladen muss.

In vielerlei Hinsicht sind es diese Faktoren, die eine hohe Arbeitsgeschwindigkeit mit nativen Anwendungen ermöglichen. Durch die Installation der nativen Anwendung lädt der Benutzer die zum Ausführen der Anwendung erforderlichen Dateien vorab herunter. Danach muss die native Anwendung nur noch neue Daten aus dem Netzwerk abrufen. Servicemitarbeiter können bei der Interaktion mit dem Web etwas Ähnliches tun.

Progressive Webanwendungen können sich dramatisch auf die Leistung auswirken. Zum Beispiel gelang es Tinder, die Ladezeit der Seite von 11,91 Sekunden auf 4,69 Sekunden zu reduzieren, indem eine progressive Webanwendung entwickelt wurde. Außerdem ist sie 90% kleiner als ihre native Android-Anwendung. Die Hotelkette Treebo hat eine eigene progressive Webanwendung gestartet und die Conversion im Laufe des Jahres vervierfacht;; Die Conversion-Raten für wiederkehrende Benutzer haben sich verdreifacht, und die mittlere Benutzerinteraktionszeit mit einer mobilen Site ist auf 1,5 Sekunden gesunken.

Stellen Sie die Netzwerkzuverlässigkeit sicher

Mobilfunknetze funktionieren nicht reibungslos. Sie hatten gerade eine Hochgeschwindigkeits-LTE-Verbindung und kriechen jetzt bereits mit 2G-Tempo oder sind im Allgemeinen offline. Wir alle befanden uns in solchen Situationen. Die meisten Websites werden jedoch weiterhin mit der Erwartung erstellt, dass die Zusammenarbeit mit ihnen in einem zuverlässigen Netzwerk erfolgt.

Mit dem PWA-Ansatz können Sie eine Anwendung erstellen, mit der Sie offline weiterarbeiten können. Um die Offline-Arbeit mit Anwendungen sicherzustellen und die Interaktion mit Webseiten zu beschleunigen, wurde dieselbe Technologie verwendet: Servicemitarbeiter.
Wie Sie bereits wissen, können Servicemitarbeiter dem Browser explizit mitteilen, welche Daten lokal zwischengespeichert werden sollen. Diese Kategorie von Dateien kann erweitert werden: Es handelt sich nicht nur um die Ressourcen, die zum Herunterladen der Anwendung erforderlich sind, sondern auch um den Inhalt von Webseiten, damit Benutzer ihre Anzeige auch im Offline-Modus nicht unterbrechen können.

Abbildung : Die Titelleiste in der progressiven Housing.com-Webanwendung ändert die Farbe von lila (links) in grau (rechts), wenn sie offline ist. Der Inhalt, den der Benutzer zuvor angesehen oder zu seinen Favoriten hinzugefügt hat, ist offline verfügbar (rechts). Dies ist sinnvoll, da die Housing.com-Anwendung auf den indischen Markt ausgerichtet ist und in Indien die Netzwerkverbindung langsam und unzuverlässig sein kann.

Mit einem Servicemitarbeiter können Sie die Anwendungsshell sogar vorab zwischenspeichern, indem Sie dies „hinter den Kulissen“ tun. Wenn ein Besucher zum ersten Mal zu einer progressiven Webanwendung kommt, kann er die gesamte Anwendung herunterladen, im Cache speichern - und das ist alles, Sie können offline damit arbeiten, ohne dass der Benutzer zusätzliche Aktionen ausführen muss.

Lassen Sie Benutzer nicht los

Vielleicht sind Push-Benachrichtigungen der beste Weg, um Benutzer in die Arbeit mit der Anwendung einzubeziehen. Push-Benachrichtigungen verführen eine Person und ermutigen sie, zur Anwendung zurückzukehren, um leckere Informationen zu erhalten - von dringenden Nachrichten bis zu Chat-Nachrichten.

Warum sollten Push-Benachrichtigungen dann nur für diejenigen implementiert werden, die die native Anwendung installiert haben? Wenn Sie beispielsweise eine Messenger-Anwendung haben oder diese für die Arbeit mit sozialen Netzwerken entwickelt wurde, ist es sehr hilfreich, Benutzer über neue Nachrichten zu informieren.

Abbildung : Eine progressive Twitter-Anwendung namens Twitter Lite sendet dieselben Benachrichtigungen wie die native Anwendung (links). Wenn Sie eine solche Benachrichtigung auswählen, wechseln Sie sofort zu Twitter Lite zu dem Tweet, auf den sie verweist (rechts).

Dank fortschrittlicher Webanwendungen und insbesondere von Servicemitarbeitern, die wir lieben, können wir Push-Benachrichtigungen auf jeder Website verwenden. Benachrichtigungen sind in einer progressiven Webanwendung keine erforderliche Funktion, sie verbessern jedoch häufig die Wiedereingliederung der Benutzer und das Umsatzwachstum.

Unabhängig davon, ob Sie eine native Anwendung haben, stört Sie eine progressive Webanwendung nicht. Jeder Schritt bei der Entwicklung einer solchen Anwendung ist ein Schritt zur Verbesserung der Website. Websites müssen sicher sein. Muss schnell sein. Es wäre schön, wenn sie offline verfügbar wären und bei Bedarf Benachrichtigungen an Benutzer senden könnten.
Benutzer, die Ihre native Anwendung nicht haben (oder nicht verwenden), werden die Tatsache genießen, dass die Arbeit mit Ihrer Website wesentlich komfortabler geworden ist. Ein großes Plus für Ihr gesamtes Unternehmen. So einfach.