🎓 🤰🏼 👩🏾‍⚕️ Applications Web progressives. Guide d'action 📿 🏒 🕝

Bonjour, Habr! Nous étudions la possibilité de publier un livre sur PWA (Progressive Web Applications). Il existe déjà de nombreuses publications sur Habré sur ce sujet, le matériel du blog de la société RUVDS présente un intérêt particulier , dont nous citerons la définition de la PWA:

... est une application mobile qui a été téléchargée à partir d'une application Web. De plus, comme vous pouvez le voir, pour installer une telle application, vous n'avez pas besoin d'interagir avec le Play Market. En conséquence, l'installation de telles applications est aussi simple que possible. Cependant, c'est loin d'être le plus intéressant. En lançant de tels programmes, vous avez la possibilité de travailler avec les données qu'ils affichent, même sans connexion Internet. Ils vous permettent d'interagir avec des pages Web hors ligne.

La question se pose parfois: comment les applications Web progressives sont-elles liées aux applications natives? Vaut-il la peine de développer PWA si vous avez déjà natif? Tout d'abord, cette question, ainsi que beaucoup d'autres, trouve sa réponse dans l'article de Jason Grigsby du site «A List Apart», que nous avons traduit pour vous aujourd'hui. L'article est un extrait du livre de 2018. N'oubliez pas de voter.

Pour déterminer si votre organisation est sage de développer sa propre application Web progressive (PWA), posez-vous deux questions:

Votre organisation a-t-elle un site Web? Si c'est le cas, une application Web progressive sera probablement utile. Cela semble ringard, mais ça l'est: il est conseillé de transformer presque n'importe quel site Web en une application Web progressive, car ils contiennent les meilleures pratiques du Web.
Votre organisation gagne-t-elle de l'argent grâce au site par le biais de ventes électroniques, de publicité ou d'une autre manière? Si c'est le cas, alors vous avez certainement besoin d'une application Web progressive, car elle peut augmenter considérablement les revenus.

Cela ne signifie pas que le site doit implémenter toutes les fonctionnalités existantes des applications Web progressives. Vous n'aurez peut-être pas besoin de fournir des fonctionnalités hors ligne, des notifications push ou même la possibilité de configurer votre site sur l'écran d'accueil d'une machine utilisateur. Il est probable qu'un minimum absolu suffira: un site sécurisé, un technicien qui accélère son travail, un fichier manifeste - de telles choses seront utiles sur n'importe quel site.

Bien sûr, vous pouvez décider que votre site Web personnel ou projet parallèle n'est pas la ressource pour laquelle il vaut la peine de développer une application Web progressive, en y consacrant plus de temps et d'efforts. Cela est compréhensible et, à long terme, même les sites personnels seront envahis par les capacités des applications Web progressives, lorsque la prise en charge de ces fonctionnalités sera ajoutée aux systèmes de gestion de contenu sur lesquels ces sites sont basés. Par exemple, Magento et WordPress au moment de la rédaction de ce texte avaient déjà annoncé des plans pour ajouter des capacités avancées d'applications Web à leurs plateformes. D'autres devraient emboîter le pas.

Cependant, si vous gérez un site qui génère en quelque sorte un profit pour votre organisation, vous devez le transformer en une application Web progressive et planifier comment le faire maintenant. Les entreprises qui ont déployé des applications Web avancées reçoivent des conversions, un engagement des utilisateurs, des ventes et des revenus publicitaires accrus. Par exemple, Pinterest suite à l'introduction de PWA, le public principal a augmenté de 60% et les revenus publicitaires générés par les utilisateurs ont augmenté de 44%. Les utilisateurs de West Elm ont commencé à passer environ 15 heures de plus sur le site, les revenus d'une visite ont augmenté de 9% .

Dessin: Eddie Osmani, Google, a écrit une étude de cas sur l'application Web progressive de Pinterest, la comparant à la fois à leur ancien site mobile et à leur application native.

Il y a tellement d'histoires de réussite associées aux applications Web progressives que mon entreprise, Cloud Four, a lancé un site appelé PWA Stats qui en assure le suivi. Il est probable qu'il y aura un cas concernant une organisation similaire à la vôtre, et avec cet exemple, vous pouvez convaincre vos collègues de la pertinence d'une application Web progressive pour votre entreprise.

Figure : PWAstats.com contient des statistiques et des histoires qui témoignent de l'efficacité des applications Web progressives.

Et un tel travail de persuasion peut être nécessaire. Malgré les avantages évidents des applications Web progressives, de nombreuses entreprises ne se sont pas encore réorganisées pour elles, souvent parce que la direction ne connaît tout simplement pas encore le PWA. (Par conséquent, lorsque vous commencez à créer PWA en ce moment, vous gagnez peut-être du temps!)

Cependant, il existe également une grande confusion quant aux fonctionnalités des applications Web avancées, à quoi elles peuvent être utilisées et à la façon dont elles se rapportent au Web natif. applications. Une telle confusion provoque la peur, l'incertitude, les doutes, et tout cela ralentit la mise en œuvre d'applications Web progressives.

Si vous préconisez la mise en œuvre de la PWA dans votre organisation, certains peuvent ne pas vous comprendre et vous pouvez même rencontrer des résistances. Discutons donc de certains des arguments qui vous aideront à renforcer votre position et à être utiles pour convaincre vos collègues.

Les applications natives et PWA peuvent coexister

Si votre organisation dispose déjà d'une application native, les parties prenantes peuvent objecter qu'elles n'ont en outre pas besoin de PWA - en particulier parce que le principal avantage de PWA est l'introduction de fonctionnalités et de fonctionnalités inhérentes aux applications natives.
Il est tentant de supposer que les applications Web progressives rivalisent avec les applications natives - en règle générale, c'est dans cette veine qu'elles sont écrites dans les médias. Mais en fait, une application Web progressive fonctionne indépendamment du fait que l'entreprise en ait déjà une native ou non.

Faites une pause dans les conflits entre les applications natives et les applications Web et concentrez-vous sur les spécificités des interactions des utilisateurs avec le site Web de votre organisation sur Internet. Il est conseillé d'utiliser des applications Web avancées simplement en raison de leurs propres avantages: elles vous aident à élargir votre audience d'utilisateurs, à protéger votre site, à réaliser des bénéfices, à fournir des interactions plus fiables avec les utilisateurs et à les informer des mises à jour - tout cela complétera les capacités de votre application native.

Extension d'audience personnalisée

Tous vos utilisateurs actuels n'ont pas installé votre application native - et vos utilisateurs potentiels ne l'ont pas du tout. Probablement, l'application n'est même pas installée chez la majorité des utilisateurs typiques, mais ceux qui l'ont encore installée peuvent y aller depuis un PC.

En améliorant la qualité des interactions avec le site, vous augmentez les chances que vos utilisateurs actuels et futurs lisent votre contenu ou achètent vos produits (ou même téléchargent votre application native!) Vous pouvez améliorer la qualité de travail avec le site en utilisant une application web progressive.

Malgré ce que les blogs techniques vous assurent, le Web mobile se développe plus rapidement que les applications natives. Le site Web de comScore a comparé les 1 000 meilleures applications mobiles avec les 1 000 premiers sites les mieux placés et a conclu que «l'audience du Web mobile est près de trois fois supérieure à celle des applications mobiles et croît deux fois plus vite . "

Bien qu'il soit vrai que les gens passent plus de temps dans leurs applications mobiles préférées que sur le Web, gardez à l'esprit qu'il est parfois très difficile de convaincre une personne d'installer votre application sur son appareil. Aux États-Unis, environ la moitié des utilisateurs de smartphones n'installent généralement pas une seule application par mois .

Si votre application native se trouve dans le magasin d'applications, cela ne garantit pas que les gens l'installeront. La promotion de l'application et l'encouragement des utilisateurs à l'installer coûtent cher. Selon Liftoff, une société de marketing d'applications mobiles,le coût moyen requis pour installer l'application par un utilisateur est de 4,12 $ et monte jusqu'à 8,21 $ par utilisateur, si vous voulez qu'une personne crée un compte dans votre application.

Si vous avez la chance et que quelqu'un commence à installer votre application, l'obstacle suivant se présente: vous devez convaincre les gens de ne pas cesser d'utiliser l'application. Lorsqu'un spécialiste, Andrew Chen, a analysé les données sur la rétention des utilisateurs sur le matériel de 125 millions de téléphones mobiles, il a constaté que l' application moyenne perd 77% des DAU (utilisateurs actifs quotidiens) 3 jours après l'installation . En 30 jours, 90% des DAU sont perdus. En 90 jours, plus de 95% des DAU sont perdues.

Dessin: La fidélité des utilisateurs mobiles reste très éphémère. L'application moyenne perd 95% de ses utilisateurs actifs en 90 jours.

Les applications Web progressives ne sont pas confrontées à de tels défis. Comprendre une application web progressive n'est pas plus difficile pour une personne que sur votre site, puisque c'est votre site. Toutes les fonctionnalités d'une application web progressive sont également disponibles immédiatement. Vous n'avez pas à effectuer d'étapes intermédiaires: allez d'abord dans le magasin d'applications, puis téléchargez l'application à partir de là. L'installation est rapide: elle se déroule en arrière-plan lors de votre première visite sur le site et se résume littéralement à l'ajout d'une icône à l'écran principal.

Comme Alex Russell l'a écrit dans son article sur Medium en 2017:

Le glissement lors de l'installation de PWA est beaucoup plus faible. Nos mesures internes sur Google montrent qu'avec des volumes comparables de bannières PWA et de bannières d'applications natives (la comparaison est presque la même qu'avec des pommes et des pommes), les bannières PWA donnent une conversion 5-6 fois plus souvent. Plus de la moitié des utilisateurs qui ont décidé d'installer l'application native lors de la navigation dans ces bannières ne terminent pas le processus d'installation, tandis que l'installation PWA se produit presque instantanément.

En bref, une proportion importante et croissante de vos utilisateurs communique avec vous via le Web. Les applications Web progressives peuvent augmenter les revenus, augmenter l'engagement des utilisateurs, ainsi que leur nombre.

Protégez votre site

Si vous collectez des informations de carte de crédit ou d'autres informations exclusives, vous êtes simplement tenu de fournir à vos utilisateurs un site Web bien protégé. Mais même si des données confidentielles ne sont pas traitées sur votre site, il est toujours judicieux d'utiliser le protocole HTTPS et de fournir à l'utilisateur une interaction sûre avec le site. Le trafic réseau apparemment le plus innocent peut contenir des signaux qui simplifient l'identification des utilisateurs et le piratage potentiel de leurs données. Que dire des inquiétudes concernant une éventuelle surveillance de l'État.

Auparavant, le fonctionnement d'un serveur sécurisé était coûteux, compliqué et aussi (il semblait) qu'il fonctionnait plus lentement que d'habitude. Aujourd'hui, tout a changé. Les certificats SSL / TLS coûtaient des centaines de dollars, mais aujourd'hui le fournisseur Let's Encryptles donne gratuitement. De nombreux hébergeurs travaillent avec des fournisseurs de certificats, vous pouvez donc configurer HTTPS en un seul clic. De plus, il s'avère que HTTPS n'est pas aussi lent qu'il le semblait .

Les sites HTTPS peuvent également mettre à niveau vers une nouvelle version de HTTP appelée HTTP / 2. Le principal avantage de HTTP / 2 est qu'il est nettement plus rapide que HTTP / 1. De nombreux hébergeurs et réseaux de diffusion de contenu (CDN) prévoient que lorsque vous passez en HTTPS, vous êtes connecté à HTTP / 2 sans aucune action supplémentaire de votre part.

Même si une telle incitation ne suffit pas pour passer au HTTPS, les fabricants de navigateurs utilisent la méthode de la carotte et du bâton, poussant les sites à introduire des changements. En tant que «fouet»Chrome a commencé à avertir les utilisateurs qu'ils entraient leurs données sur un site qui n'est pas équipé de HTTPS . D'autres navigateurs vont probablement emboîter le pas et signaler les sites qui fonctionnent sans cryptage, afin que les utilisateurs se rendent compte que leurs données peuvent être interceptées.

En tant que navigateur HTTPS Gingerbread, les navigateurs commencent à exiger des capacités HTTPS du site comme obligatoires. Si vous souhaitez utiliser les technologies Web les plus récentes et les plus performantes, vous ne pouvez pas vous passer de HTTPS . En fait, certaines fonctionnalités qui fonctionnaient auparavant via HTTP non sécurisé sont désormais considérées comme affectant les données sensibles. Telle est, par exemple, la géolocalisation. Dans HTTPS, ils sont limités. Après réflexion, il semble que ce soit aussi un petit fouet. Fouet en pain d'épice?

Compte tenu de tout cela, il est conseillé de fournir à vos utilisateurs un site sécurisé. De si terribles avertissements insensés sont immédiatement exclus. Vous avez accès à de nouvelles fonctionnalités de navigateur. Obtenez les gains de vitesse fournis par HTTP / 2. Et aussi: préparez le terrain pour une application Web progressive.
Pour utiliser les techniciens de maintenance, une technologie clé liée aux applications web progressives, vous devez équiper HTTPS sur le site. Par conséquent, si vous souhaitez profiter de tous les goodies PWA à la fois, vous devez d'abord effectuer un travail préparatoire sérieux.

Augmentez vos profits

De nombreuses études démontrent une corrélation entre la vitesse d'un site et le temps et l'argent que les gens sont prêts à y consacrer. Selon le DoubleClick, " 53% des visites sur les sites Web mobiles interrompues initiées par l'utilisateur si la page de téléchargement prend plus de 3 secondes ." La société Walmart a constaté que pour chaque 100 millisecondes d'optimisation, la vitesse de chargement des pages tombe à 1% des revenus supplémentaires .

Au final, le logiciel haut de gamme la vitesse d'interaction avec le site est très importante. Malheureusement, la durée moyenne de chargement des pages des sites mobiles lors de la connexion via 3G est de 19 secondes . Encore une fois, cette application web progressive permet de faire face à ce problème.

En utilisant des travailleurs de service, les PWA fournissent des interactions incroyablement rapides. À l'aide de techniciens de service, le développeur peut indiquer explicitement quels fichiers le navigateur doit stocker dans le cache local et dans quelles circonstances doit rechercher les mises à jour des fichiers mis en cache. Les fichiers stockés dans le cache local sont accessibles beaucoup plus rapidement que les fichiers récupérés sur le réseau.

Lors de la demande d'une nouvelle page dans une application web progressive, l'utilisateur a déjà dans le cache local de l'appareil la plupart des fichiers nécessaires à l'affichage de cette page. Ainsi, la page peut se charger presque instantanément, car le navigateur n'a besoin que de télécharger des informations supplémentaires sur cette page.

À bien des égards, ce sont ces facteurs qui permettent une grande vitesse de travail avec les applications natives. En installant l'application native, l'utilisateur pré-télécharge les fichiers nécessaires pour exécuter l'application. Après cela, l'application native ne doit récupérer que les nouvelles données du réseau. Les travailleurs des services peuvent faire quelque chose de similaire lorsqu'ils interagissent avec le Web.

Les applications Web progressives peuvent avoir un effet spectaculaire sur les performances. Par exemple, Tinder a réussi à réduire le temps de chargement des pages de 11,91 secondes à 4,69 secondes en développant une application web progressive, de plus, elle est 90% plus compacte que leur application Android native. La chaîne hôtelière Treebo a lancé sa propre application Web progressive et a quadruplé sa conversion au cours de l'année; les taux de conversion pour les utilisateurs de retour ont triplé et le temps d'interaction médian des utilisateurs avec un site mobile est tombé à 1,5 seconde.

Assurer la fiabilité du réseau

Les réseaux mobiles ne fonctionnent pas correctement. Vous veniez de disposer d'une connexion LTE à haut débit, et maintenant vous êtes déjà en train de ramper à un rythme 2G ou vous êtes généralement hors ligne. Nous nous sommes tous retrouvés dans de telles situations. Mais la plupart des sites sont toujours en cours avec l'espoir que le travail avec eux se fera sur un réseau fiable.

L'approche PWA vous permet de créer une application avec laquelle vous pouvez continuer à travailler hors ligne. En fait, pour assurer un travail hors ligne avec les applications et accélérer l'interaction avec les pages Web, la même technologie a été utilisée: les employés de service.
Comme vous le savez déjà, les techniciens de maintenance vous permettent d'indiquer explicitement au navigateur les données à mettre en cache localement. Cette catégorie de fichiers peut être étendue: qu'il s'agisse non seulement des ressources nécessaires au téléchargement de l'application, mais aussi du contenu des pages Web afin que les utilisateurs ne puissent pas interrompre leur visualisation, même hors ligne.

Figure : La barre de titre de l'application Web progressive housing.com change de couleur du violet (gauche) au gris (droite) lorsqu'elle est hors ligne. Le contenu que l'utilisateur a vu plus tôt ou ajouté aux favoris est disponible hors ligne (à droite), ce qui est raisonnable, car l'application housing.com est destinée au marché indien, et en Inde, la connexion réseau peut être lente et peu fiable.

En utilisant un technicien de service, vous pouvez même pré-mettre en cache le shell de l'application en le faisant «en arrière-plan». Ainsi, lorsqu'un visiteur accède pour la première fois à une application Web progressive, il pourra télécharger l'intégralité de l'application, l'enregistrer dans le cache - et c'est tout, vous pouvez travailler avec elle hors ligne sans aucune action supplémentaire de la part de l'utilisateur.

Ne lâchez pas les utilisateurs

Les notifications push sont peut-être le meilleur moyen d'inciter les utilisateurs à travailler avec l'application. Les notifications push séduisent une personne, l'encourageant à revenir à l'application pour des informations savoureuses - des nouvelles urgentes aux messages de chat.

Pourquoi alors implémenter les notifications push uniquement pour ceux qui ont installé l'application native? Par exemple, si vous avez une application de messagerie, ou si elle est conçue pour fonctionner avec les réseaux sociaux, il serait très utile d'avertir les utilisateurs de nouveaux messages.

Figure : Une application Twitter progressive appelée Twitter Lite envoie les mêmes notifications que l'application native (à gauche). Lorsque vous sélectionnez une telle notification, vous accédez immédiatement à Twitter Lite sur le tweet auquel elle se réfère (à droite).

Les applications Web progressives et, en particulier, les travailleurs de service que nous aimons, nous permettent d'utiliser des notifications push sur n'importe quel site. Les notifications ne sont pas une fonctionnalité requise dans une application Web progressive, mais elles sont souvent efficaces pour améliorer le réengagement des utilisateurs et la croissance des revenus.

Que vous ayez une application native ou non, une application web progressive ne vous dérange pas. Chaque étape du développement d'une telle application est une étape vers l'amélioration du site Web. Les sites doivent être sûrs. Doit être rapide. Ce serait bien s'ils étaient disponibles hors ligne et, si nécessaire, pouvaient envoyer des notifications aux utilisateurs.
Les utilisateurs qui n'ont pas votre application native (ou qui ne l'utilisent pas) apprécieront le fait que travailler avec votre site est devenu beaucoup plus pratique. Un gros plus pour toute votre entreprise. Si simple.