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

Les applications web progressives (PWA) sont un terme à la mode dans le monde du développement web. Elles ressemblent beaucoup aux applications mobiles classiques, mais sont conçues pour être utilisées sur un appareil mobile ou un ordinateur. Cet article explique ce qu'est une application web progressive, en quoi elle diffère d'une application web classique, et bien 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.

Alors même que des améliorations continues sont apportées à AMP pour le rendre plus convivial pour les éditeurs, Google a lancé un framework entièrement différent pour les éditeurs web appelé Progressive Web Apps (PWA).

Les PWA se sont révélées extrêmement bénéfiques : une étude de Simicart a démontré qu’après l’installation d’une PWA, le temps moyen passé sur un site web augmente de 119 %. De plus, la durée moyenne de lecture d’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 (PWA) sont des pages web ou des sites web classiques qui ressemblent, à bien des égards, à des applications mobiles natives , tant au niveau de l'apparence que du fonctionnement. « Une PWA permet d'installer l'application directement depuis le navigateur, 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.
  
• Coffre-fort: 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 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écurité

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 par rapport aux sites web classiques. À l'instar des applications, elles en apprennent davantage sur l'utilisateur à chaque visite, même lorsqu'il n'est pas connecté.

Ainsi, si un utilisateur consulte le site web à plusieurs reprises, l'application peut déclencher un téléchargement ou une notification web . De plus, elle est accessible en ligne et son contenu peut être mis à jour dynamiquement, offrant ainsi une expérience utilisateur plus fluide.

Plus important encore, les applications web progressives (PWA) sont rapides . « Nos recherches ont démontré que les PWA offrent une vitesse de chargement des pages deux à quatre fois plus rapide, garantissant ainsi l'engagement et la conversion de vos utilisateurs », explique Igor Faletsky, PDG de Mobify. « Les applications web progressives offrent une expérience utilisateur similaire à celle des applications mobiles, 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 (PWA) ont permis à des centaines d'éditeurs web et de sites de commerce électronique d'obtenir d'excellents résultats . Prenons l'exemple de Pinterest, qui a transformé son site web en application web progressive 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 applications web progressives (PWA) sont en réalité un dérivé du projet Accelerate Mobile Pages (AMP) . Si AMP est utilisé pour réduire le temps de chargement des pages sur mobile, les PWA se chargent tout aussi rapidement, tout en offrant des fonctionnalités supplémentaires. Le développement de ces deux frameworks se poursuit ; le choix de l’un ou de l’autre dépend donc du cas d’utilisation et des préférences de chacun.

Les éditeurs supposent qu'AMP présente un avantage en matière de référencement. Mais Graeme Caldwell, du blog Advanced Web Ranking, explique que les PWA ne sont pas désavantagées. « Il n'y a pas si longtemps, les applications web côté client étaient un véritable 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ées au même titre que les sites web progressifs et les applications natives. En réalité, vos revenus peuvent même être supérieurs, car vous n'avez aucune obligation de verser de commission sur les ventes à des plateformes tierces (contrairement aux applications natives, où l'App Store ou Google Play prélèvent une commission sur chaque vente) », écrit Alexandra Soroka sur le blog de 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 (PWA) se prêtent parfaitement à la monétisation, car la génération de revenus via les applications est une problématique bien établie. À l'instar des applications classiques, les PWA offrent de multiples emplacements publicitaires, différents formats publicitaires et la possibilité de se connecter à plusieurs régies publicitaires. Parmi les formats les plus courants figurent les bannières publicitaires et les publicités interstitielles.

Vous pouvez afficher des publicités sur la page d'accueil, la liste et la vue d'ensemble de votre PWA. L'intégration facile avec les technologies publicitaires populaires telles que DFP constitue un atout 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