Obtenez plus de conversions

Vous en avez déjà entendu parler ? Alors ne faites pas l’erreur de passer à côté. Une progressive web app est une opportunité majeure pour votre business. Prenez quelques minutes pour découvrir comment augmenter vos conversions.

Services
La meilleur stratégie

User experience

Services Cloud

Développement Mobile

Développement Web

Qualité Premium

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

En résumé

Nouvelle norme d’interaction online, elle a été présentée par Google en 2015 comme “ le meilleur du web et le meilleur des applications”. Elle constitue un mix idéal entre l’application à télécharger et le site internet ou mobile. C’est une alternative plus légère. Pour faire simple, c’est un site internet qui se comporte comme une application mobile.

L’objectif premier est de toucher de nouveaux internautes qui passent sur votre site et cliquent par curiosité. La progressive web app raccourcit considérablement le temps d’accès à votre service. Elle vous évite donc de perdre des clients potentiels par la rapidité d’accès à votre contenu.

 

PWA mobileElle permet aussi de toucher des publics nouveaux, qui n’ont pas forcément accès à la 3G, ou qui sont dans des zones mal couvertes, instables, blanches. Avec une progressive web app, vous pouvez élargir votre audience, augmenter votre zone de chalandise, toucher des zones géographiques émergentes.

La progressive web app est tellement polyvalente qu’elle est compatible avec presque tous les systèmes d’exploitation mobiles (IOS, android, BlackBerry OS, et Windows 10 mobile), et peut être utilisée par tout type d’appareils. Cela démultiplie d’autant vos possibilités de business, et vous permet d’améliorer l’expérience utilisateur.

Pourquoi créer sa progressive web app ?

Une opportunité

Vous le savez, le mobile a supplanté l’ordinateur de bureau comme moyen d’accès à internet en 2 014. Pour accéder à internet par le biais d’un mobile, il faut passer par un navigateur. Mais le site doit être mobile responsive, léger à télécharger sous peine de fuite de l’internaute, et il ne s’affiche pas si la connexion est mauvaise ou nulle.

 

Par ailleurs, accéder à internet par le biais d’une application implique un téléchargement (risque de sécurité), et fait perdre 20 % d’utilisateurs entre le moment du téléchargement et l’utilisation de l’appli. On sait qu’en moyenne, en France, seulement 6 applis sur 26 sont utilisées.

 

Fait nouveau dans cette tendance de fond, de plus en plus d’internautes accèdent à internet uniquement par leur smartphone (on ne parle plus de mobile first mais de mobile only). Problème, 60 % des internautes mobiles dans le monde passent par des connexions 2G. Plus généralement, la principale caractéristique des réseaux mobiles est l’instabilité.

 

m

De plus, Google a suivi l’évolution des utilisations, avec l’adoption en 2 016 du principe “mobile-first indexing”, qui donne la priorité dans les résultats de recherche aux sites qui ont une version mobile, et lancé sa technologie AMP (accelerate mobile page). Ceci pour améliorer la vitesse de chargement des pages, et diminuer le taux d’abandon.

 

Rand Fishkin, expert mondialement reconnu du SEO, dans ses prédictions 2 018 (il est toujours assez proche de ce qu’il advient), a envisagé une percée fulgurante des PWA.

Voyez-la comme une solution économique pour répondre à un besoin d’interface mobile interactive fluide. Un outil de complément à proposer à votre utilisateur une fois qu’il a découvert votre site web.

La progressive web app cumule les avantages

Les bénéfices

Vous le savez probablement, le problème numéro un, c’est le faible engagement de l’internaute sur le site internet. Mais le principal problème de l’appli native, c’est le faible nombre d’utilisateurs.

 

En outre, une étude américaine a été réalisée en 2 017 (effectuée sur les 1000 premières applis mobiles téléchargées et sur les 1000 premiers sites consultés). Elle indique que pour les applis, seulement 4 millions d’utilisateurs uniques sont répertoriés, contre 11.4 millions pour les sites. Et confirme que l’engagement n’est pas le même : l’utilisateur reste en moyenne 188 minutes sur l’appli, contre 9 sur la version mobile du site.

Vous comprenez l’avantage comparatif évident : créer votre progressive web app vous permet de cumuler les points positifs du site et de l’appli native, puisqu’elle cumule les avantages des deux. Elle vous fait bénéficier de l’audience large de la version mobile de votre site, et de l’engagement fort de l’appli.

 

De plus, vous réalisez des économies de développement, car elle s’appuie sur les normes des navigateurs. Vous n’avez pas à créer de multiples versions adaptées aux différentes plateformes. Et, autre avantage, vous n’avez pas besoin d’attendre la validation des boutiques en ligne pour la publier, vous le faites quand vous voulez.

 

m

Côté mobinautes, elle améliorera l’expérience utilisateur et augmentera votre taux de conversion. Concrètement, cela veut dire pour vous : un utilisateur qui reste parce que le téléchargement de votre contenu est rapide (moins de 3 secondes). Votre entreprise qui est joignable tout le temps, quel que soit l’état du réseau. Un design d’interface de même niveau d’une appli native, et des interfaces de même qualité. Et surtout, pas de risque que le mobinaute l’enlève pour gagner de la place sur son smartphone, elle est très légère.

Notifications push et poids plume sur le smartphone

Le web au service du mobile

La progressive web app a toutes les fonctionnalités du site. Ou presque. Elle est plus légère, mais reste toutefois riche de ce côté. Pour rappel, son utilité est d’accrocher l’internaute avec un temps d’accès à vos services raccourcit. On sait qu’une visite sur deux est abandonnée si le chargement met plus de 3 secondes à se faire. Autre avantage, elle peut coexister avec votre site ou appli native. L’internaute fidélisé pourra être invité à télécharger la vraie appli plus tard.

 

Mais son principal attrait est que vous pouvez l’utiliser pour envoyer des alertes en temps réel. Vous profitez des notifications push pour développer votre business, elles sont reçues même si l’internaute a fermé son navigateur. Attention cependant, tous les navigateurs ne permettent pas encore l’envoi des notifications push. Cela devrait rapidement être corrigé. Sous Androïd, Chrome, Firefox et Opéra. Sous IOS, cela n’est pour l’instant pas possible, mais Safari devrait intégrer cette fonctionnalité incessamment.

 

mPar ailleurs, son URL est sécurisée HTTPS, elle est indexée par les moteurs de recherche, et permet d’améliorer l’expérience utilisateur avec du SEO. Son coût de revient est moins élevé qu’une appli native (pas de droit d’entrée à payer sur un store par exemple, pas de frais pour les mises à jour).

 

Pour l’utilisateur, la progressive web app ne prend pas d’espace sur la mémoire du smartphone, peut fonctionner hors connexion, et s’affiche en plein écran. Il peut la trouver sur les moteurs de recherche, la partager sur les réseaux sociaux, n’a pas à s’occuper de la mettre à jour (automatique). S’’il se connecte au heures de pointe à votre site, et si vous avez pensé à l’intégrer, il pourra passer par elle pour accéder plus facilement à vos contenus.

Comment intégrer une progressive web app sur Android et IOS ?

100% compatible tous supports

La progressive web app peut se lire directement depuis le bureau, sans passer par un navigateur. C’est une vraie innovation, puisqu’elle fournit à l’utilisateur cette fonctionnalité propre aux applis, sans alourdir la mémoire du téléphone.

 

Sous Androïd, il faut mettre en place un fichier manifest qui permettra à la progressive web app d’apparaître sur le système de l’utilisateur et de définir comment elle se lancera (il doit indiquer le nom à afficher sur le bureau, le short_name, une URL chargeable à afficher, et une icône de taille minimum 192×192 pixels).

Sur votre site, vous devez créer un Service Worker (qui permet l’affichage d’une simple page améliorée en cas de hors ligne). Cela devrait aussi permettre l’affichage de la pop-up.

 

Sous IOS, c’est aussi le fichier manifest.json qui permet d’ajouter le raccourci vers la progressive web app sur l’écran d’accueil du smartphone. Mais la différence avec Androïd, c’est que la pop-up de peut pas être générée. Il faudra que le mobinaute se rende dans Safari, et qu’il clique sur le bouton qui correspond à votre web app.

 

mCependant, avant de vous lancer, demandez-vous si c’est adapté à votre entreprise. Qui sont vos prospects ? Quelles sont les barrières qui vous empêchent de les atteindre ? Une progressive web app s’appuie sur les navigateurs, c’est par leur URL qu’elle peut être partagées. Elle peut être utilisée sur le web, sous Androïd, et sous Apple.

 

Enfin, l’icône et le look sont importants, faites preuve d’imagination et de créativité. Mais pensez aussi à l’usage, qui doit impérativement être mobile friendly, et pouvoir se faire même si la connexion est mauvaise. Et n’oubliez pas qu’une progressive web app s’affiche en entier sur l’écran du smartphone, sans les bordures du navigateur, comme une appli native.

Les dessous de la progressive web app

Techniquement

Une progressive web app c’est : une icône sur le dashboard pour y accéder rapidement. Un splash screen pour charger les éléments d’arrière-plan. Une expérience en ligne et hors ligne avec du contenu stocké dans la mémoire cache. Et des notifications push.

 

Pour le smartphone, la progressive web app est donc gérée par le fichier manifest.json qui se trouve à la racine. C’est ce qui lui permet d’être visible depuis l’écran d’accueil du smartphone et d’être utilisée en mode plein écran. Il lui faut une interface système (app shell), et une optimisation du chargement du contenu en gérant le cache par le biais de service worker (pour mettre en service les fichiers CSS, JS et images à la place d’un serveur distant).

 

En résumé, la progressive web app repose essentiellement sur la combinaison de l’architecture application shell (architecture d’appli web qui utilise un service worker pour remplir hors ligne la coque de l’appli avec JS) et des services workers (pour les expériences hors ligne et les notifications push). Elle s’appuie sur les standards ouverts du Web, écrite via CSS et JavaScript, en langage HTML.

 

m

Pour les développeurs, la progressive web app est synonyme de légèreté, plus accessible que les applis natives. Ils n’ont pas à apprendre un énième nouveau langage. Google a mis à disposition des outils de développement en open source (Polymer et Angular), et une extension, Chrome Lighthouse (pour tester sa performance).

 

Mais un certain nombre d’autres framework sont utilisables. Angular semble néanmoins conseillé, adapté pour gérer les applications web un peu complexes.

Ce que vous devez retenir, c’est que la progressive web app n’a besoin que d’un seul développement pour accéder à tous les supports. Et qu’elle peut s’intégrer à n’importe quel code sans le casser.

Progressive Web App et WordPress

API

Les deux plus gros CMS du marché – WordPress et Drupal – s’ouvrent aux PWA. Ils ont développé une API de type REST qui permet aux deux univers (CMS et WPA) de se comprendre, par le biais d’un format spécifique (Json ou XML).

 

Pour WordPress, cette API est intégrée de base depuis la version 4.7. Pour Drupal, depuis la version 8, l’API REST est utilisable après avoir procédé à son installation (simple à faire).

Pratiquement parlant, c’est une solution “content as a service”, qui permet de dissocier création de contenu à partir de son CMS et affichage / utilisation.

En clair, vous pouvez avec une PWA, accéder aux données (pages, articles, médias) créées à partir d’un des deux CMS, depuis n’importe quelle application.

 

Mais il y a plus : des CMS “sans tête” apparaissent, adaptés, eux, aux progressive web apps. Ils ont poussé plus loin la dissociation et ne sont que des unités de stockage de données (sur le cloud), dotés d’une API de façade, pour communiquer avec le front via un web service.

 

Ils proposent un service d’administration simplifié qui stocke les données, compatible avec plusieurs interfaces pour l’affichage (PWA, site, appli native). Deux avantages pour vous : les données sont sécurisées (aucun accès possible depuis l’interface), et vous pouvez créer un projet pour plusieurs clients. 

PWA : les exemples des géants du web.

Web et mobile
m

TWITTER

Twitter est un des premiers à avoir lancé sa progressive web app : Twitter Lite. Son poids léger (1 Mo) a accéléré de 30 % le temps de chargement. Elle consomme 70 % de data en moins.

ALIBABA

Alibaba, le leader de l’e-commerce en Chine, a fait muter son site vers une PWA. Résultat, les conversions ont augmentées de 76 %, et l’interaction a été multipliée par 4.

THE GUARDIAN

Le Guardian, avec sa progressive web app, a augmenté de 44 % le nombre de ses utilisateurs connectés sur plusieurs plateformes, ce, en moins d’un an.

GEORGE.COM

George.com, leader du vêtement au Royaume-Uni, lançait en 2018 sa progressive web app. Résultat, une augmentation de 31 % de la conversion mobile (avec un taux de rebond divisé par deux, un temps de chargement de page 4 fois plus rapide)

KONGA

Au Nigéria, Konga, leader de l’e-commerce, a basculé vers ce choix et permis à plus d’utilisateurs d’accéder à sa boutique en ligne (grâce à la baisse de 92 % la consommation de données pour le chargement initial, et de 82 % pour la première transaction).

TRIVAGO

Trivago a investi les PWA depuis 2 017. La même année, l’entreprise annonçait une progression de 150 % de l’engagement des utilisateurs ayant installé leur web app, et une augmentation de leurs conversions de 97 %.

L'ÉQUIPE

L’Équipe, en 2017, aura été le premier média Français d’importance à miser sur la PWA. Le taux de rebond des utilisateurs qui l’ont testée a été divisé par 2.

APPLE

Apple annonçait en mars 2018 l’intégration des progressive web apps. Google, qui a pris les devants dès 2 015, s’apprête à intégrer les PWA dans le Google Store. Microsoft s’engage aussi à intégrer les progressive web app dans son Store en 2 018.

CONTACTEZ-NOUS

Nous vous accompagnons

Vous souhaitez obtenir plus d’informations au sujet des Progressive Web App ou vous souhaitez la conversion de votre site vers cette nouvelle opportunité ? N’hésitez pas à faire appel à nos services.