Guide complet du Progressive Web App : PWA

Depuis l'introduction des PWAs en 2015, de nombreuses entreprises ont tiré un grand profit de cette technologie. Elles sont en mesure d'offrir une expériences d'utilisateur  excellente. Les cas d'utilisation les plus remarquables sont ceux de grandes entreprises comme Twitter, Trivago, qui ont doublés leurs taux de conversion…ect.

Les réussites de ces géants de l'industrie en matière de PWAs séduisent logiquement diverses petites et moyennes entreprises. Grâce à l'utilisation des progressive web apps, les commerçants peuvent désormais offrir la même expérience et obtenir des taux de conversion élevée, semblable à celle d'une application native, à un public beaucoup plus large sur le mobile – ce qui en fait une technologie incontournable pour les entreprises de toute taille.

Qu'est-ce qu'une progressive web app ?

Une progressive web app (PWA) est une application web qui utilise les dernières fonctionnalités du web pour offrir aux utilisateurs une expérience de type application native. C'est la technologie qui assure la cohérence entre les applications web et les applications natives et remplace les deux.

Historiquement, les applications natives offraient une expérience beaucoup plus riche que le mobile, créant un engagement élevé avec l'utilisateur final. Une PWA est un site web qui ressemble et se comporte de la même manière qu'une application native, ce qui signifie qu'elles sont incroyablement rapides, peuvent être ajoutées à l'écran d'accueil d'un smartphone, envoyer des notifications “push” et même travailler hors connexions.

Les PWAs sont :

1. Fiable.

Elles se chargent instantanément, quel que soit l'état du réseau, ce qui élimine la dépendance à l'égard d'une connexion réseau et garantit une expérience utilisateur instantanée et fiable, même en cas de connexion internet défectueuse ou inexistante.

2. Incroyablement rapides.

Si votre site est lent, les clients s'en vont,  du coup vous passer à côté de ventes potentielles. Les PWAs se chargent très vite et répondent rapidement aux interactions des utilisateurs. L'amélioration des performances d'un site web a un effet positif sur les taux de conversion, l'expérience utilisateur et de rétention.

 3. Très attrayant.

Ils offrent une véritable expérience d'application native, y compris des fonctionnalités web telles que l'option d'envoyer des Push Notifications et d'apparaître sur l'écran d'accueil.

Pourquoi votre entreprise a besoin d'une PWA

On sait que le trafic mobile a largement dépassé  celui des ordinateurs – actuellement, 60 % du trafic provient des mobiles – il est crucial pour les e-commerçants d'offrir la meilleure expérience d'achat possible à leur clients. Si le trafic mobile est en augmentation, les taux de conversion ne le sont pas : le trafic mobile ne représente que seulement 16 % du total des conversions.

Google rapporte que lorsqu'un magasin d'e-commerce passe à une PWA, il constate généralement une augmentation de 20 % de ses recettes globales, les taux de conversion sur mobile doublant dans certains cas.

Toute boutique en ligne, nouvelle ou existante, devrait envisager de proposer ses services non seulement comme une boutique en ligne standard, mais aussi comme une PWA. La majorité des sites d'E-commerce n'ayant pas encore adopté cette nouvelle technologie, ils représentent une occasion rare et passionnante de prendre de l'avance sur la concurrence.

1. Meilleure adoption par les utilisateurs

Les PWAs offrent une expérience utilisateur très attrayante, avec les mêmes capacités que les applications natives. Elles peuvent être installées sur l'écran d'accueil, ce qui les rendent directement accessibles aux utilisateurs.

Une autre chose, le nombre d'applications téléchargées par un utilisateur de smartphone est proche de zéro certains mois. Les gens ne téléchargent pas d'applications en tout cas de moins en moins.

Avec une PWA, le “téléchargement” est aussi simple que de visiter un lien web et d'accepter une invitation. Du point de vue de l'utilisateur, le site web se transforme en une “vraie” application – donc pas un raccourci de navigateur – en étant placé sur l'écran d'accueil. On obtient ainsi le même résultat qu'en téléchargeant à partir d'un app store, mais sans les tracas liés au processus de l'app store.

De plus, une fois l'application installée sur l'écran d'accueil, aucune autre mise à jour n'est nécessaire. Les PWAs sont automatiquement mis à jour en arrière-plan, ce qui garantit à vos clients de toujours voir le contenu le plus récent.

Il n'est donc pas surprenant que les entreprises signalent que leurs utilisateurs installent leur PWA alors qu'ils ont déjà rejeté leur application native.

Flipkart a vu 60% des clients qui avaient désinstallé leur application native revenir pour utiliser le PWA de Flipkart. Pour l'adoption par les utilisateurs de n'importe quel site web, des installations rapides avec la PWA s'avèrent faire la différence sur l'engagement et le succès des utilisateurs.

2. Renforcer l'engagement des utilisateurs grâce aux notifications “push”.

Semblable à une application native, PWA offre la possibilité d'envoyer des notifications “push” à des appareils mobiles. Grâce à une méthode très intuitive, les entreprises peuvent atteindre leur public là où il est le plus nombreux : directement sur leur appareil mobile, créant ainsi une expérience utilisateur très engageante.

Environ 96 % des internautes surfent sur le web de manière anonyme, ils ne laissent pas leur email ou leurs coordonnées sur des sites web et ils ne créent pas de compte. Il s'agit là d'un gigantesque angle mort que toute entreprise rêve de transformer en un point d'attraction.

3. Réduction des coûts de développement, innovation plus rapide

Les entreprises ayant une stratégie omnicanale et multi-plateforme construisent, maintiennent et promeuvent actuellement jusqu'à 4 systèmes : leur site web (responsive), leur application Android, leurs applications iOS et dans certains cas également des applications natives Windows 10.

Bien que la création, l'optimisation et la maintenance d'un site web responsive soient déjà un processus exigeant en ressources, le développement supplémentaire d'applications natives quadruple facilement cet investissement. Cela n'est pas seulement dû à la création d'une application, mais aussi au suivi, à la maintenance, aux améliorations et aux processus de révision de l'app store (sans oublier la tristement célèbre taxe de 30 % d'Apple).

Une PWA élimine complètement le besoin de développement, de maintenance et de commercialisation de toute autre plateforme que le site web de la PWA. Cela offre une opportunité unique de servir tous les canaux à partir d'une seule plateforme, qui est construite, maintenue et entretenue par une seule équipe. Elle permet de réduire considérablement les coûts et les délais de commercialisation, tout en offrant la même expérience et les mêmes capacités à tous les clients, et en conservant la stratégie multicanale.

4. Excellentes performances

Les utilisateurs d'Internet exigent toujours plus de vitesse, surtout avec l'augmentation massive de l'utilisation du mobile et même du mobile en ligne. Les recherches montrent que 53 % des visiteurs quittent un site web après seulement 3 secondes de chargement de la page et que les taux de conversion diminuent avec 21,8 % pour chaque seconde de retard dans la vitesse de la page.

On constate souvent  que le temps de chargement moyen des pages web sur les appareils mobiles des réseaux 3G est de 19 secondes et de 14 secondes sur les réseaux 4G.

Le rapport, intitulé “The Need for Mobile Speed“, a constaté que les sites mobiles qui se chargeaient en cinq secondes avaient des performances bien meilleures que ceux qui mettaient 19 secondes à se charger : les sites qui se chargeaient en cinq secondes affichaient 25 % de publicités en plus, des sessions moyennes 70 % plus longues et un taux de rebond 35 % inférieur.

Les PWAs sont conçues pour offrir une expérience utilisateur extrêmement fluide et rapide. Tirant parti des avantages de la vitesse du web et de la mise en cache côté client “de type natif”, elles sont plus performantes que ces deux méthodes pour le chargement des pages. Les PWAs peuvent se charger en moins d'une seconde, créant une véritable expérience de vitesse “instantanée”, engageant l'utilisateur dès le début.

En outre, les PWAs utilisent beaucoup moins d'espace de disque, tant sur le serveur de l'entreprise que sur le périphérique de l'utilisateur, ce qui offre des avantages tels que des temps de chargement plus rapides, une utilisation moindre des données et un espace de stockage moins important.

Le PWA de BookMyShow se charge en moins de 3 secondes et a augmenté les taux de conversion de plus de 80 %. La PWA est 54 fois plus petit qu'une application Android et 180 fois plus petit qu'une application iOS.

5. Les PWAs peuvent améliorer votre référencement.

Parce qu'une PWA est basé sur le web, tout peut être découvert par les moteurs de recherche. Tout le contenu d'un PWA peut être lié, partager et classer par Google et Bing. Cela contraste avec les applications natives, qui ne permettent pas d'être crawlés par les robots des moteurs de recherche. En éliminant les barrières entre le web et les applications natives, les utilisateurs peuvent être directement reliés aux produits numériques les plus sophistiqués, sur n'importe quel appareil, à tout moment.

Des temps de chargement très rapides, des taux de rebond réduits, une utilisation minimale des données et des expériences très engageantes sont par défaut des facteurs de renforcement pour les classements en SEO. Les PWAs offrant des avantages comme ceux-là, il est logique de penser que l'utilisation d'une PWA se traduira automatiquement par des classements SEO plus élevés. Si cela est bien fait, Google classera les PWAs bien conçus plus haut que n'importe quel autre site web ordinaire.

Cependant, le SEO technique est très important. Il est essentiel de s'assurer que la technologie des PWAs est utilisée de la bonne manière. Les PWAs utilisent la flexibilité de JavaScript, ce qui signifie que Google considère la page publiée comme un site  en JavaScript. Google explore les sites PWAs comme il le ferait pour un site AJAX ou JavaScript, mais la capacité des moteurs de recherche à découvrir, explorer et indexer correctement le contenu – qui dépend fortement de JavaScript – a toujours été faible.

Heureusement, il n'y a pas lieu de s'inquiéter. Les développeurs qui construisent des PWAs doivent savoir comment optimiser le site pour s'assurer que la page est correctement indexée, ce qui peut facilement être fait avec des techniques telles que le rendu côté serveur – en fournissant aux PWAs la bonne architecture pour obtenir les meilleurs classements SEO qu'ils méritent.

6. Augmentation des taux de conversion.

Il va sans dire qu'une meilleure expérience utilisateur se traduit par des taux de conversion plus élevés. Je suis le premier à le dire§  Si les frictions et les frustrations sont éliminées sur e-commerce, il devient plus facile pour les clients d'atteindre leurs objectifs – et donc les objectifs de l'entreprise.

Les PWAs offrent d'énormes possibilités d'offrir de meilleures expériences, à tous égards.

Tout ce qui concerne les PWAs est plus rapide, plus mince, plus fluide et plus efficace, et l'utilisateur le ressent. Du chargement instantané en arrière-plan sur leur écran d'accueil à la navigation en plein écran, en passant par le chargement instantané des pages et l'utilisation minimale de l'espace de l'appareil. L'utilisateur bénéficie d'une bien meilleure expérience, accomplit ses tâches et reviendra volontiers à l'avenir – qu'il soit ou non déclenché par une notification push très engageante.

Anatomie d'une Progressive Web App

Au fond, une PWA est une application web qui utilise les dernières capacités du web pour offrir aux utilisateurs une expérience de type application native. Ce que j’appelle Mobile diet.

En 2015, Alex Russell a introduit le terme ” Progressive Web APP“. Il a raconté une conversation entre lui et Frances Berriman, dans laquelle ils ont “énuméré les attributs d'une nouvelle classe d'applications” basée sur l'évolution progressive et puissante des navigateurs modernes.

Ils ont créé un ensemble d'”attributs” que les PWAs devraient constituer pour être qualifiées de progressive web apps. Ces attributs sont :

1. Progressive – La PWA devrait fonctionner pour chaque utilisateur, quel que soit le choix du navigateur, car elle est construite avec une amélioration progressive comme principe de base.
2. Responsive – la PWA doit fonctionner sur n'importe quel appareil, quelle que soit sa taille : bureau, mobile, tablette ou autre.
3. Connexion Indépendante – Les PWAs ne dépendent pas de la disponibilité du réseau.
4. App-Like – L'utilisateur bénéficiera d'une véritable expérience d'application native, en termes de vitesse et d'interaction avec l'utilisateur.
5. Actualisé – La PWA est toujours à jour, aucune mise à jour n'est nécessaire.
6. Fiable– Toujours servi via HTTPS.
7. Crawlable – Contrairement aux véritables applications natives, une PWA est identifiable comme une “application” et permet aux moteurs de recherche de la trouver et de l'indexer.
8. Re-engagement – La PWA donne aux marketeurs la possibilité de se réengager facilement auprès des visiteurs grâce à des fonctionnalités telles que les notifications “push”, qui n'étaient auparavant disponibles que pour les applications natives.
9. Facile à Installer – Une PWA permet aux utilisateurs d'ajouter les applications qu'ils trouvent les plus utiles à leur écran d'accueil sans avoir à passer par une boutique d'applications.
10. Possibilité de créer des liens – Une PWA a une structure URL réelle, ce qui facilite le partage de l'application par le biais d'une URL.

Cet ensemble d'”attributs” concerne l'expérience de l'utilisateur et la manière dont nous utilisons le web : sécurité, rapidité, engagement et partage. Techniquement parlant, une PWA peut toutefois être définie par trois critères.

Les trois critères de base qu'un site doit remplir pour être considéré comme une PWA sont les suivants

1. HTTPS – une PWA doit être desservi par un HTTPS afin de garantir un environnement et une transmission de données sûrs et sécurisés.
2. Web App Manifests – une PWA a besoin d'un manifeste de l'application web, un fichier JSON contenant toutes les métadonnées que l'appareil doit connaître sur la page pour pouvoir l'installer sur l'écran d'accueil. Le fichier contient des informations telles que les icônes, les couleurs, les polices, l'URL de la page d'accueil, etc.
3. Service Worker – l'élément le plus important d'un appareil est le service worker.  C'est un petit fichier JavaScript et joue le rôle de proxy entre votre application, le réseau et le navigateur, telles que le mode hors connexion, la vitesse instantanée et la possibilité d'envoyer des notifications “Push”.

Il était auparavant impossible de faire des choses comme les notifications à distance et le mode hors connexion sur le web en raison des limitations du navigateur, mais grâce à l'utilisation des service worker, ces capacités ont été déverrouillées.

Le Service Worker est une technologie introduite par Google qui vous permet de contrôler les requêtes réseaux par programmation, ce qui vous permet de créer des expériences hors connexion et de fournir une vitesse instantanée. En outre, vous pouvez exécuter des tâches en arrière-plan, ce qui vous permet d'envoyer et d'afficher des notifications push même lorsque le navigateur est fermé.

Avez-vous besoin d'une PWA pour votre boutique ?

Toute entreprise qui vend en ligne devrait utiliser la PAW. Lorsque le temps de chargement d'une page mobile passe de 1 à 5 secondes, la probabilité de rebondissement augmente de 90 %. Lorsque les clients sont retardés par une lenteur à la caisse, la vente est en danger. Quand on améliore l'expérience utilisateur et les vitesses de page d'une PWA cela permet au client d'effectuer la tâche souhaitée rapidement et efficacement.

Mais, je tiens à faire une petite remarque en tant que marketeur.

Il est  difficile de prédire si un site d'E-commerce doublera son taux de conversion lors de la mise en œuvre d'une PWA. Une chose est sûre : grâce à cette nouvelle technologie, les entreprises peuvent désormais offrir à un public beaucoup plus large sur le web mobile la même expérience de conversion élevée, semblable à celle d'une application native.

1. Création d'une PWA.

La transformation de votre site d'E-commerce en une PWA est un processus que toute boutique en ligne devrait absolument envisager de réaliser au cours de l'année à venir. Non seulement elle vous apportera tous les grands avantages, mais elle vous permettra également de rester en tête de la concurrence.

Toutefois, une idée fausse est que si vous voulez bénéficier des capacités d'une PWA, vous devez remplacer complètement l'interface, ce qui fait croire aux entreprises que l'adoption de la PWA est un processus très intensif et coûteux.

Heureusement, c'est le contraire qui est vrai ! La technologie PWA permet une mise en œuvre modulaire, en profitant d'avantages avec un temps de mise sur le marché minimal. Par exemple, si vous souhaitez commencer par donner à votre public la possibilité d'installer votre PWA sur leur écran d'accueil, la seule chose à faire est d'installer un Web App Manifests.

Foire aux Questions :

Qu'est-ce qu'une application native ?

Les applications natives sont installées via une place de marché comme l'App Store ou Google Play et apparaissent sous forme d'icônes sur l'écran d'accueil d'un appareil. Elles sont conçues spécifiquement pour un appareil particulier et peuvent utiliser toutes ses fonctionnalités, comme le GPS, l'appareil photo, la liste de contacts, etc. Il s'agit d'applications susceptibles d'être présentes sur votre appareil, comme Google Maps, Gmail ou Instagram.

Qu'est-ce que l'AMP ?

Le projet open-source Accelerated Mobile Pages (A.M.P en abrégé) permet aux développeurs de construire des pages web qui se chargent presque instantanément avec un langage de codage unique. Ce langage est une version simplifiée de HTML et CSS qui limite l'utilisation de JavaScript. Ces pages sont hébergées sur un CDN, qui fournit une version en cache de la page lorsqu'elle est visitée par un utilisateur.

PWAs contre AMPs :

Bien que la PWA et l' AMP visent tous deux à fournir des services rapides comme l'éclair aux utilisateurs finaux, ils présentent plusieurs différences fonctionnelles. Les AMPs visent à pouvoir charger rapidement des sites sur un téléphone portable, tandis que les PWAs visent à offrir aux clients une expérience de type application sans qu'ils aient à en télécharger une, ce qui les rend adaptés à différents objectifs.

Est-il possible de charger une PWA à partir de l'AMP ?

Oui, c'est possible.

Conclusion

La PWA est une excellente solution qui suscite l'intérêt des utilisateurs, enthousiaste les développeurs et donne la chair de poule aux spécialistes du marketing digital – c'est un fait indéniable. Bien qu'elle ait déjà pris de l'ampleur, je suis sûr qu'elle continuera à se développer au cours des prochaines années.

Vous avez besoin d'aide  pour votre PWA Cliquez ici.