Que sont les Progressive Web Apps et comment fonctionnent-elles ?

Applications Web progressives, ou PWA, sont un nouveau mot à la mode dans le monde du développement Web. Ils sont très similaires à une application mobile classique, mais conçus pour être utilisés sur un appareil mobile ou un ordinateur de bureau. Ce blog explique ce qu'est une application Web progressive, en quoi elle diffère d'une application Web classique, et plus encore.

Au cours des dernières années, Google a tenté d'accélérer le Web mobile afin d'offrir une meilleure expérience utilisateur. La première étape de ce voyage a été le lancement de pages mobiles accélérées.

Bien que ces pages Web mobiles "simplifiées" aient été rapides, les éditeurs se sont heurtés à un obstacle lors de la configuration de l'analyse, de l'attribution et de la monétisation via des annonces graphiques.

Même si des améliorations continues sont apportées à AMP pour le rendre plus convivial pour les éditeurs, Google a lancé un cadre entièrement différent pour les éditeurs Web appelé Applications Web progressives (PWA).

Les PWA se sont avérées extrêmement bénéfiques, avec recherche de Simicart conclusion qu'après l'installation d'une PWA, le temps moyen passé sur site augmente de 119%. Non seulement cela, mais la durée moyenne passée à lire une page augmente de 68.8 %.

Dans cet article, nous expliquerons la signification de PWA, le fonctionnement de ces applications, leurs avantages, leurs différences par rapport aux applications AMP et natives, ainsi que les options de monétisation.

Qu'est-ce qu'une application Web progressive?

Les applications Web progressives sont des pages Web régulières ou des sites Web qui regarder, sentir et se comporter comme mobile natif Les applications peuvent être utilisées de multiples façons. « Une PWA vous permet d'installer l'application directement depuis la fenêtre du navigateur, elle est disponible sur votre téléphone comme une application native et fonctionne hors ligne, tout comme une application native », explique Shruti Kapoor, ingénieure logiciel chez PayPal.

La raison pour laquelle ces applications sont dites "progressives" est que l'UX s'améliore en fonction de la technologie disponible sur les appareils et les navigateurs.

Vous pouvez donc charger un PWA sur un téléphone de base, et cela fonctionnera toujours. Mais sa fonctionnalité et son expérience utilisateur s'amélioreront au fur et à mesure que vous passerez aux nouveaux smartphones dotés du matériel le plus récent.

Cela permet aux éditeurs de créer des expériences évolutives pour le Web sans investir massivement dans une application mobile traditionnelle.

Les caractéristiques suivantes définissent les PWA selon les développeurs de Google :

• Progressive: Fonctionne pour chaque utilisateur, quel que soit le navigateur choisi.
  
• Service: s'adapte à n'importe quel facteur de forme : ordinateur de bureau, mobile, tablette ou formulaires à venir.
  
• Indépendant de la connectivité: les techniciens de service autorisent le travail hors ligne ou sur des réseaux de faible qualité.
  
• Comme une application: Sentez-vous comme une application pour l'utilisateur avec des interactions et une navigation de style application.
  
• Frais: Toujours à jour, grâce au processus de mise à jour du service worker.
  
• Safe: servi via HTTPS pour empêcher l'espionnage et s'assurer que le contenu n'a pas été falsifié.
  
• Identifiable: Ceux-ci sont identifiables en tant qu'"applications" grâce aux manifestes W3C et à la portée d'enregistrement des services worker permettant aux moteurs de recherche de les trouver.
  
• Réenclenchable: Facilitez le réengagement grâce à des fonctionnalités telles que les notifications push.
  
• installable: Autoriser les utilisateurs à "conserver" les applications qu'ils trouvent les plus utiles sur leur écran d'accueil sans les tracas d'une boutique d'applications.
  
• Linkable: Facilement partagé via une URL et ne nécessite pas d'installation complexe.

C'était donc tout ce dont vous aviez besoin pour savoir ce qu'est une application Web progressive. Voyons maintenant comment cela fonctionne.

Comment fonctionnent les applications Web progressives ?

Les Progressive Web Apps tirent parti des nouvelles fonctionnalités prises en charge par les navigateurs modernes, notamment manifestes d'application Web et une travailleurs de service. N'importe quel site Web/application doit remplir les quatre conditions minimales pour qu'elle soit classée comme Progressive Web App.

1. A manifeste Web fournit des méta-informations sur une application (telles que son nom, son auteur, son icône et sa description) dans un fichier texte JSON. Les éditeurs peuvent rédiger eux-mêmes le manifeste Web ou générer le fichier à l'aide d'un générateur de manifeste d'application Web.
   
2. Un service worker est un code JavaScript qui agit comme un serveur proxy qui se situe entre l'application, le navigateur et le réseau. Ils sont utilisés pour offrir des expériences hors ligne efficaces en interceptant les requêtes réseau et en mettant en cache les informations en arrière-plan.
   
3. Une icône est utilisée pour fonctionner comme icône d'application lorsqu'un utilisateur conserve une PWA dans son tiroir d'application. Toute image JPEG de taille 512 × 512 pixels fonctionnera correctement.
   
4. Vous devez diffuser l'application sur un connexion HTTPS sécurisée. La plupart des hébergeurs proposent un certificat HTTPS moyennant des frais supplémentaires. Vous pouvez également les sécuriser auprès d'un fournisseur tiers. Avoir un site Web sécurisé est également meilleur pour votre marque.

Quelle est la différence entre les applications Web progressives et les applications natives

Il existe de nombreuses différences entre ces deux. Ci-dessous, nous avons mentionné quelques-uns des principaux.

Prix

Parmi de nombreuses fonctionnalités d'applications Web progressives, la rentabilité est l'un des meilleurs avantages.

Il y a une différence de coût importante entre ces deux. Lors de la conception d'applications natives, vous devez maîtriser parfaitement le langage requis. Sans oublier que vous devez créer des applications pour les deux systèmes d'exploitation - Android et IOS.

D'un autre côté, les applications Web progressives sont beaucoup plus abordables à créer. Vous n'avez pas besoin d'apprendre de langages de codage et vous n'avez pas besoin de ressources supplémentaires pour maintenir ou mettre à jour chaque version de l'application.

Contrairement aux applications natives, les applications Web progressives sont un excellent moyen d'économiser du temps et de l'argent lorsqu'il s'agit de créer et de mettre à jour votre application. Vous pouvez avoir une seule base de code pour différentes plates-formes, ce qui signifie que vous n'avez pas à vous soucier de créer des versions distinctes pour chaque plate-forme.

Découvrabilité

Étant donné que les applications Web progressives sont construites à l'aide de technologies Web telles que HTML, Javascript, .CSS, etc., elles peuvent être indexées par les moteurs de recherche. Ils fonctionnent comme un site Web, ce qui signifie qu'ils peuvent également être répertoriés dans les moteurs de recherche avec les bonnes techniques d'optimisation des moteurs de recherche.

Les applications natives fonctionnent différemment. Ils sont généralement conçus pour Android et IOS et ne peuvent être classés que dans leurs boutiques dédiées – Play Store & App Store.

Sûreté

En matière de sécurité, les PWA sont plus sécurisées que les applications Web traditionnelles car elles doivent fonctionner sous HTTPS, un protocole de sécurité qui protège contre toute altération des échanges entre le client et le serveur.

Une application native vous permet d'inclure plusieurs mesures de sécurité, telles que l'authentification multifacteur et l'épinglage de certificat.

Les avantages des applications Web progressives

Les applications Web progressives présentent de nombreux avantages distincts par rapport aux sites Web classiques. Tout comme les applications, ils en savoir plus sur l'utilisateur à chaque visite, même lorsqu'ils ne sont pas connectés.

Donc, si quelqu'un visite le site Web plusieurs fois, l'application peut déclencher une invite de téléchargement ou de notification Web. De plus, ils sont accessibles en ligne et peuvent mettre à jour le contenu de manière dynamique, créant une expérience utilisateur plus transparente.

Plus important que tout cela, Les applications Web progressives sont vite. "Nos propres recherches ont révélé que les PWA offrent des vitesses de page deux à quatre fois plus rapides, garantissant que vos utilisateurs durement gagnés restent engagés et convertissent", déclare Igor Faletsky, PDG de Mobify. « Les applications Web progressives permettent des expériences de type application avec la portée du Web.

L'expérience utilisateur est immersive et se charge instantanément, même dans de mauvaises conditions de réseau. Considérez-le comme une application mobile, mais sans avoir à accéder à l'App ou au Play Store.

Les applications Web progressives ont livré d'excellents résultats pour des centaines d'éditeurs Web et de fournisseurs de commerce électronique. Prenons le cas de Pinterest, qui a converti son site Web en Progressive Web App l'année dernière.

Depuis lors, le site Web a enregistré une augmentation de 60 % des principaux indicateurs d'engagement, une augmentation de 50 % des clics publicitaires et une augmentation de 44 % des revenus publicitaires.

La plupart des avantages des PWA sont les mêmes que ceux des applications : plus rapide, meilleure expérience utilisateur et adhésion accrue des utilisateurs.

Maintenant que vous savez ce que sont les PWA et comment elles fonctionnent, comparons-les aux AMP.

Les PWA et les AMP partagent certaines similitudes, mais il existe également des différences clés entre les deux.

Jetons un coup d'œil à ce qu'ils sont afin que vous puissiez mieux comprendre comment chacun fonctionne.

PWA vs AMP : Quelle est la différence ?

Les Progressive Web Apps sont en fait un issu du projet Accelerate Mobile Pages. Alors que AMP est utilisé pour réduire les temps de chargement des pages sur mobile, les PWA se chargent tout aussi rapidement mais avec des fonctionnalités supplémentaires. Le travail de développement est en cours pour les deux frameworks, donc en choisir un devient une question de cas d'utilisation et de préférence.

Les éditeurs supposent que AMP a un avantage SEO. Mais Graeme Caldwell à Blog de classement Web avancé explique que les PWA ne sont pas désavantagés. "Il n'y a pas si longtemps, les applications Web côté client étaient un cauchemar pour le référencement.

Aujourd'hui, les entreprises peuvent adopter en toute sécurité les applications Web progressives et d'autres applications Web JavaScript sans affecter négativement le référencement », déclare-t-il.

Monétiser les applications Web progressives

C'est là que les applications Web progressives ont un léger avantage sur les pages mobiles accélérées, bien qu'à un coût initial de configuration plus élevé.

AMP est un projet ambitieux qui a tenu sa promesse principale d'accélérer le chargement des pages Web mobiles. Cependant, il a eu du mal à répondre aux attentes des éditeurs, à savoir, les options de monétisation et les revenus publicitaires.

« Les PWA peuvent être monétisés tout autant que les sites Web progressifs et les applications natives. En fait, vos revenus peuvent même finir par être plus élevés en raison du fait qu'il n'y a aucune obligation de payer une commission sur les ventes à des joueurs tiers (dans le cas d'applications natives. Ce serait l'App Store ou Google Play qui prend une part de toutes les ventes) », écrit Alexandra Soroka au Blog GoodBarber.

Supposons que la publicité soit votre méthode de monétisation de choix. Dans ce cas, les options sont toutes là, ce qui signifie que vous avez la possibilité de travailler avec un réseau publicitaire externe et de créer vos propres campagnes publicitaires internes si vous avez vos propres partenariats ou accords en cours.

Les applications Web progressives sont bien adaptées à la monétisation car la génération de revenus à l'aide d'"applications" est un problème résolu. Tout comme les applications, les PWA offrent plusieurs endroits pour afficher des publicités, divers formats publicitaires et des connexions à plusieurs réseaux publicitaires. Deux des formats les plus courants incluent bannières publicitaires et annonces interstitielles.

Vous pouvez afficher des publicités sur la vue d'accueil, la vue de liste et la vue d'affichage de votre PWA. Intégration facile avec les technologies publicitaires populaires telles que DFP est un avantage supplémentaire.

Comment créer des applications Web progressives?

Commencer avec les PWA est facile - tout ce dont vous avez besoin, ce sont quelques ingrédients clés, et vous serez prêt à partir ! Ce petit tutoriel sur les applications progressives vous aidera à connaître les prérequis pour commencer le développement de PWA.

Outils

Il existe de nombreuses technologies différentes que vous pouvez utiliser pour développer des PWA. Mais l'option la plus populaire et la plus connue est AngularJS. En dehors de cela, vous pouvez également utiliser ReactJS et Polymer.

HTTPS

La deuxième étape consiste à sécuriser votre application progressive. Pour cela, il est conseillé d'héberger votre site web sur un serveur avec une connexion HTTPS. Cela garantit la confidentialité des données de vos utilisateurs. Il donne à votre site Web un degré de sécurité supplémentaire.

Shell d'application

Le shell de l'application est ce que l'utilisateur voit en premier lorsqu'il ouvre votre application. En d'autres termes, c'est la première impression que fait votre application.

Le shell prépare le terrain pour l'expérience de l'utilisateur avec votre application en fournissant un point de départ pour naviguer et interagir avec l'application.

Fichier manifeste

Ce fichier JSON est généré dans un but précis - contenir toutes les informations qui contrôleraient l'apparence et le fonctionnement de votre PWA.

Dans ce fichier, vous pourrez déterminer des éléments tels que le nom, la description, l'icône, les couleurs et de nombreuses fonctionnalités de votre application Web progressive.

Cela vous permet d'avoir un contrôle total sur l'apparence et le comportement de votre application, ce qui facilite la création d'une expérience unique et personnalisée pour vos utilisateurs.

Travailleurs de service

L'une des technologies fondamentales qui permettent aux PWA est l'utilisation de travailleurs de service.

Les techniciens de service permettent à votre application de fonctionner hors ligne et de prendre en charge des fonctionnalités avancées en mettant en cache les ressources et en gérant les opérations en arrière-plan. De plus, il peut effectuer des tâches même lorsque votre application Web progressive est inactive.

Mot de la fin

Il devrait être évident que les Progressive Web Apps sont l'avenir. Au cours des derniers mois, nous avons vu beaucoup d'annonces et de changements vraiment excitants.

Google a fait des progrès pour faire des PWA le premier choix des développeurs, et Microsoft a emboîté le pas avec son annonce d'applications Web progressives sur Windows. Nous sommes ravis de voir l'avenir des PWA se dérouler.

Nous espérons que le blog vous a aidé à comprendre ce qu'est une application Web progressive, son fonctionnement, les applications Web progressives et les applications Web natives, etc. Merci d'avoir lu.

Foire aux questions – Applications Web progressives