Progressive Web App, futur du web ?
Chez Testing Digital nous sommes régulièrement approchés par les agences, startup et autres entreprises pour tester toutes sortes de sites Internet et Applications Mobiles. Ainsi une majorité d’entre eux développe sur des technologies connues. Alors la stratégie de tests à adopter est éprouvée.
Mais régulièrement on vient nous voir avec de nouvelles technologies, de nouvelles fonctionnalités. Celles-ci sont encore toutes jeunes, peu de développeurs les maitrises. Nous trouvons encore peu de documentation disponible sur Internet. Mais elles sont souvent portées par des leaders de la tech américaine : Facebook, Google et Apple… ce qui les rend attirantes pour beaucoup de développeurs.
Hier c’était ReactJS, aujourd’hui la curiosité se porte sur les Progressives Web App. La technologie a l’avantage d’être portée par Google. Encore confidentiel il y a quelques mois, l’attrait est de plus en plus fort pour cette technologie suite à l’adoption par Apple de plusieurs fonctionnalités clés fin Q1 2018.
C’est quoi une Progressive Web App ?
Une Progressive Web App est, pour ses évangélisateurs, le meilleur des Web App et des App Mobiles. Le site Google Developers donne la définition suivante :
Une Progressive Web App utilise les fonctionnalités modernes des navigateurs web pour délivrer une expérience proche d’une application mobile
Plusieurs gros sites ont commencé à l’adopter dans le monde dont le journal L’Equipe en France. Les PWA ont l’avantage de demander qu’un seul développement pour desktop, iOS et android. Les avantages les plus importants qui permettent de porter le succès des PWA sont :
- le support du mode hors-ligne
- L’ajout de l’application à l’écran principal du téléphone et de pouvoir l’ouvrir en mode plein écran comme une app.
Comment on teste une Progressive Web App ?
Qui dit nouvelle technologie, nouvelle interface ou nouvelle fonctionnalité, dit nécessairement nouvelle façon de tester. Testing Digital a donc réfléchi sur la stratégie de tests à mettre en place pour exécuter les tests fonctionnels sur une PWA.
Déjà pour bien tester une PWA il faut des testeurs technico-fonctionnel. Tester une Progressive Web App c’est :
- Connaitre les fonctionnalités disponibles sur les différents OS et navigateurs
- Savoir utiliser les débuggeurs des navigateurs sur desktop (easy) et sur mobile
- Savoir lire les informations du Service Worker et du manifest
- Vérifier le cache
- Tester obligatoirement sur de vrais mobiles
Développer une Progressive Web App, c’est penser Offline First. Généralement sur Desktop le mode offline n’est pas utile. Mais il prend tout son sens dans un usage en mobilité. Pouvoir lire son blog favori dans le métro, accéder à des informations comme un billet d’avion ou de train même sans réseau disponible ou à l’étranger.
Tester sur de vrais mobiles (et non des émulateurs) est une nécessité… un prérequis. Il faut pouvoir vérifier le comportement de l’App avec différents réseaux/débit et ainsi 
Les points-clés à vérifier lors de vos tests manuels sont les suivants :
- Exécuter des tests poussés avec les « outils pour les développeurs » intégrés aux navigateurs web. Objectif : inspecter et débugger les « Service Workers » et le cache ;
- 2 types de caches à vérifier : le cache Storage (stocke les ressources) et le IndexedDB (stocke les données dans le cache) ;
- L’expérience utilisateur : Navigation fluide et quasi instantanée ;
- La compatibilité multi-devices ;
- Fonctionnalités mobile native ;
- Référencement SEO ;
- Payment request API ;
- Google Analytics (Vérifier l’enregistrement des données en mode hors connexion) ;
Ok. C’est sympa les tests manuels mais on ne peut pas automatiser tout ça ?
Bien sur que si ! Google propose « Google Lighthouse« . L’outil est disponible directement dans les outils pour développeurs, onglet « audit ». L’outil permet de générer un premier rapport simple à partir de l’url d’une page. Grâce à lui vous pouvez vérifier les éléments de base essentiels comme le https…
Et pour aller plus loin vous pouvez coder votre propre script avec un outil Open Source comme Selenium couplé à Appium (pour les tests sur mobile).
Les points clés à vérifier avec un test automatisé sont :
- Temps de chargement
- Réponses 200
- Affichage immédiat des images
- Existence du Manifeste, récupération en lecture si besoin
- Tester automatiquement toutes les url sur le sitemap.xml
- Affichage complet et conforme des pages (comparaison des ressources entre les modes en ligne et hors-ligne, balises/scripts ou autres …)
- La sécurité
- Le SEO
Comme on est sympa chez Testing Digital, on vous partage une base de scripts sous Selenium pour lancer les tests sur android : https://github.com/TestingDigitalAutomation/ProgressiveWebApp-Example
Ci-dessous la présentation reprenant tout ce qu’on vient de se dire…
