Comment développer une PWA?
Le mobile est en plein développement depuis des années. Actuellement, 43 millions de français sont équipés d’un smartphone avec 88,7% d’entre eux qui l’utilisent, presque tous les jours ou 1 à 2 fois par semaine (source : Baromètre 2020 Mobile Marketing Association France). L’impact accru de l’usage du mobile pousse de nombreuses entreprises à revoir leur expérience utilisateur. Ce n’est plus un secret, une expérience utilisateur réussie = conversion optimisée.
Il y a plus d’un an, nous vous présentions un comparatif entre la PWA et les applications mobiles natives.
Aujourd’hui, nous vous expliquons comment développer une PWA en fonction de différents cas de figures.
Comment démarrer ? Que faire d’un site WordPress ou HTML si je souhaite passer sur une PWA ? Faut-il repartir de zéro ? Existe-t-il des solutions à intégrer ?
Nous nous sommes intéressés au sujet ces derniers mois, voici le fruit de nos recherches.
Pourquoi développer une PWA ?
Vous doutez ou vous ignorez encore la part du trafic sur mobile de vos utilisateurs, faites le test avec Google Analytics, le résultat est probant. D’après les chiffres indiqués plus haut, il devient impératif d’offrir à ses utilisateurs une expérience sur mobile fluide et rapide ; ça tombe bien c’est le but de la PWA. La PWA permet également de libérer de l’espace de stockage pour l’utilisateur soucieux d’optimiser ses gigas. La mise en place d’une PWA peut être un véritable gain de temps pour l’utilisateur, celui-ci peut directement vivre une expérience applicative sur le web sans passer par la case recherche sur les stores. La transformation de votre site web en PWA offrira donc de nombreux avantages (expérience utilisateur optimisée, meilleur classement Google, performance accrue et accès hors ligne). En résumé, le passage à la PWA aura un effet bénéfique pour votre site web. Vous aurez donc beaucoup à gagner en sautant le pas.
Il ne s’agit plus ici de démontrer les avantages de la PWA mais plutôt de découvrir comment la mettre en place.
Cas 1 : Je n’ai ni site web ni application
Cas de figure simple, la PWA nécessite un développement unique. Pour simplifier, nous pouvons découper la création d’une PWA en 4 étapes.
1/ L’app shell
Première étape, la création d’un shell d’application, autrement dit le code. Rappelons que pour les PWA, on parle de développement web, on retrouve donc des fonctionnalités HTML et CSS. Mais l’expérience « application » s’opère via l’ajout de fonctionnalités Javascript.
2/ Les Services Workers
On retrouve ensuite l’intégration de Services Workers. Ce sont des scripts ou des programmes ou bouts de programme permettant d’exécuter une tâche. Ceux-ci se comportent comme des « proxy » ; leur rôle est donc de faire le lien entre l’application et le réseau en restant indépendants. Ainsi, ils tournent constamment en arrière-plan lorsque le site qui les a créés n’est pas ouvert dans le navigateur. Via cette indépendance au réseau, ces scripts mettent en cache l’app shell. Ils sont également présents pour gérer la mise à jour du contenu en arrière-plan et la mise en cache du contenu. Grace à ce système de services workers, l’utilisateur peut parcourir les données en cache lorsqu’il est hors ligne. Il récupère les dernières données envoyées par le serveur tout en attendant le retour de la connexion. De plus, les services workers gèrent les notifications push (uniquement sous Android).
3/ Définir un manifeste
Le manifeste de l’application regroupe son nom, son auteur, une icône ainsi qu’une description au sein d’un document texte JSON. Celui-ci permet d’avoir accès à l’application directement sur l’écran d’accueil de l’appareil. Le but étant de se rapprocher au plus près d’une expérience native. Les applications android native utilisent elles aussi un manifeste (AndroidManifest.xml) qui permet de définir entre autres les écrans, l’icône; il est déployé dans la page HTML via une balise. Pour le navigateur, c’est donc ce fichier JSON qui lui permet de faire la différence entre un site web classique et une PWA.
4/ Le protocole HTTPS
La mise en place d’un protocole HTTPS est nécessaire pour développer une PWA. Il s’avère également doublement bénéfique. En effet, HTTPS crypte les données que les utilisateurs envoient vers le serveur et empêche toute intrusion, la sécurité est donc renforcée. De surcroît, Google favorise les sites en HTTPS ce qui améliore ainsi le référencement. Le passage à HTTPS s’effectue avec un certificat SSL. Pour acquérir celui-ci, rapprochez-vous d’une autorité de certification (généralement gratuite si vous disposez de votre propre serveur). Une fois terminé, le Graal apparaîtra sous forme d’un cadenas devant votre URL.
En guise d’exemple voici une liste d’acteurs qui ont développé une PWA : Twitter Lite, Wego, Pinterest, Uber, Starbucks, Trivago, Forbes, Ali Express, Telegram, L’équipe
Cas 2 : J’ai un site web développé sur mesure (et une application)
Vous possédez un site web efficace, rapide et développé sur mesure et vous souhaitez optimiser l’expérience utilisateur sur mobile. Vous avez également une application sur les stores. Afin de compléter vos canaux de conversion, le choix de la PWA peut s’avérer judicieux.
Concernant le développement du site web vers la PWA, migrer vers le référentiel PWAs Clone GitHub. Vous pourrez alors développer un répertoire Migrate to PWA avec le code détaillé pour chaque étape. Ce code spécifique pourra être ensuite modifié à votre guise. Une fois votre code extrait, utilisez ‘Simple HTTP Server Application’ pour sécuriser le site web, vous aurez alors accès à l’URL. Pour terminer la migration vers la PWA la définition d’un manifeste et l’intégration de Services Workers seront de mise.
Cas 3 : Passer d’un site WordPress à une PWA
WordPress propose aujourd’hui différents plugins pour passer d’un site WordPress à une PWA. En l’occurrence, il s’agit de Super Progressive Web Apps qui permet de transformer rapidement un site web en PWA. Dès lors que le plugin est installé, les fonctionnalités propres aux PWA seront disponibles pour l’utilisateur. Sur leur site officiel, WordPress indique que SuperPWA est très facile à configurer. Seul prérequis, avoir un site qui tourne sur le protocole HTTPS. Une fois activé, il suffit de se rendre depuis le menu WordPress sur SuperPWA afin de remplir le nom de l’application, la description, le logo, et la page d’accueil.
Les avantages du plugin SuperPWA :
- Ajouter votre application sur l’écran d’accueil de vos utilisateurs
- Envoyer des notifications push aux utilisateurs d’Android
- Installation et paramétrage simples, vous pouvez le configurer dans WordPress en quelques minutes
- La page des paramètres est claire et simple à comprendre
Les limites du plugin :
- Les notifications push ne fonctionnent pas sur iOS
- Pas de paramètres de Google Analytics
- Pas de barre de progression pour le chargement de la page en haut ou en bas de la page comme dans un navigateur
- Pas d’options d’interface graphique pour que la PWA ressemble davantage à une application native
- Vitesse moins performante qu’une véritable PWA
Super Progressive Web Apps est un bon compromis (gratuit) si vous cherchez à offrir rapidement aux utilisateurs de votre site web une meilleure expérience mobile. Cependant, il ne crée pas une véritable expérience mobile native. Cette approche sera particulièrement privilégiée pour les projets en mode POC afin d’évaluer les bénéfices d’une PWA et ensuite partir sur un développement plus optimisé.
Notre avis chez Snapp’ :
Le développement d’une PWA, bien qu’il soit moins coûteux que d’autres types de développement, nécessite des connaissances pointues en matière de codage notamment au niveau des cadres et bibliothèques Javascript principalement Angular et React. C’est pourquoi, il est souvent recommandé aux propriétaires de sites inexpérimentés d’essayer des plugins (gratuits et/ou payants) ou d’engager un développeur professionnel, car le processus de création d’une PWA n’est pas facile.
En outre, nous conseillons aujourd’hui, dans la mesure du possible, d’opter à la fois pour le développement d’une PWA et d’une application native. La première optimisera votre expérience web mobile et les performances vs un site web en responsive. La deuxième vous assurera une expérience optimisée notamment sur iOS ou les services workers ne sont pas encore complets. La combinaison des deux vous offrira une plus grande visibilité ainsi qu’une expérience utilisateur maximisée.