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. Aujourd'hui la curiosité se porte sur les Progressives Web App. 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. Dans cette présentation, Testing Digital vous partage sa vision pour une stratégie de tests adaptée au Progressive Web App.

1. Comment tester une progressive web app ?
Xavier BRICE
COO & Associé chez Testing Digital

2. Sommaire
1. Qu’est ce qu’une progressive web app ?
2. Quels profils pour les tester ?
3. Définir l’environnement de test
4. Les points clés à vérifier
5. Automatiser les tests

3. QU’EST CE QU’UNE PROGRESSIVE WEB APP ?

4. … un site Internet
consultable hors-ligne
Une Progressive Web App est…
une application mobile
installable depuis
un site Internet
?

5. Site internet App Mobile
Progressive
Web App
Le meilleur des Web App et des App mobiles
« Une Progressive Web App utilise les fonctionnalités modernes des navigateurs web pour
délivrer une expérience proche d’une application mobile »
Google Developers

6. Exemples

7. Un seul développement
pour tous les systèmes d’exploitation
Maîtrise des déploiements
Validation et contraintes des stores
Les 2 premiers avantages

8. Trop beau
pour
être vrai
?

9. Quels sont les navigateurs PWA ready ?
79,31%* des navigateurs supportent les « Service Workers »
Disponible sur Firefox, Chrome, Safari, Edge, Samsung Internet
* Au 29 mai 2018
Source : https://caniuse.com/#feat=serviceworkers

10. Apple supporte enfin les PWA sur iOS
Enfin seulement si vous utilisez Safari et depuis iOS 11.3 !
Les Services Workers ne sont pas supportés par les autres navigateurs sur iOS.
Quelles sont les fonctionnalités accessibles du coups ?
La géolocalisation
Les capteurs (boussole, accéléromètre, gyroscope)
La caméra etl’audio
Apple Pay
Le mode hors ligne
L’ajout de l'application à l'écran principal du téléphone

11. Stockage limité à 50Mo en mode hors ligne
Pas d’accès à certaines fonctionnalités hardware comme le
bluetooth
Pas de synchronisation en arrière plan
Impossible d’accéder à des données privées comme les contacts
Pas de push notification, pas de possibilité de badge de
notification
… et celles qu’on attend toujours (et qui sont déjà disponible sur android)

12. QUELS PROFILS POUR TESTER ?

13. Profils technico-fonctionnel
• Avoir une connaissance de la technologie
• Savoir si les fonctionnalités sont disponibles sur tel ou tel OS
• Utiliser les débuggeurs des navigateurs sur desktop et mobile
• Savoir lire les infos d’un Service Worker / Manifest
• Vérifier le cache
• Exécuter les tests sur de vrais mobiles
• Vérifier le cache
test leader
testeur
automaticien

14. ENVIRONNEMENT DE TESTS

15. MOBILE FIRST

16. Environnement de développement
Mobiles émulés
Gain de temps
directement disponible sur l’ordinateur du développeur
Permet de vérifier ¾ des usages
Pas de gestion de parc entre les différents développeurs

17. Environnement de test
Mobiles physiques
Avoir un parc hétérogène
Permet de tester en profondeur en fonction
du hardware du device et des surcouches constructeurs
Switcher entre les modes offline, 2G, 3G, 4G et Wifi
contrôler les temps de chargement et la fluidité des transitions

18. Accéder aux débuggeurs sur mobile
Depuis les navigateurs via les outils pour les développeurs.
Avec des logiciels tiers type GhostLab.
Essentiel pour vérifier le parfait fonctionnement
des fonctionnalités spécifiques aux WPA.

19. LES POINTS CLÉS À VÉRIFIER

20. 1. Connectez vous une 1ère fois
2. Passez en mode avion et naviguez
sur le site Internet
3. Reconnectez-vous au réseau
et vérifiez la mise à jour en arrière
plan du contenu
OFFLINE FIRST

21. Tester avec les Dev Tools des navigateurs
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.
Exemple sous Chrome,
il faut se rendre
sur l’onglet « Application »
du DevTools

22. Test des Service Workers
1. Offline mode
2. Update on reload : force le service worker à mettre à jour le contenu à
chaque chargement de la page
3. Bypass for network : Force le navigateur à accéder au réseau pour
charger les ressources demandées.
4. Push : permet de simuler une notification
5. Sync : permet de simuler une mise à jour en arrière plan
6. Errors : Si il y a des erreurs avec le Service Workers elles seront
affichées ici

23. Test
du
cache

24. Test du cache
2 types de caches
IndexedDB
Stocke les données dans le cache
(articles, produits…)
Cache Storage
Stocke les ressources
(pages html, css, images, js…)

25. EXPÉRIENCE
UTILISATEUR
Navigation fluide et quasi
instantanée.
Pas de latence dans le chargement
des pages, les transitions.
Gestion des fonctionnalités de
« gestuelle » de l’écran tactile

26. Affichage plein écran
sans barre d’adresse
Favoris
installation comme une application
APP-LIKE

27. Manifest.json
Vérifier le formatage et la bonne prise en compte des données

28. COMPATIBILITÉ
Desktop
Smartphone • Tablette
Windows • MacOS
Android • iOS
…

29. FONCTIONNALITÉS
MOBILE NATIVE
Vérifier :
Appareil photo • Notifications
Géolocalisation • Accéléromètre
Compas • Gyroscope

30. RÉFÉRENCEMENT
SEO
Vérifier :
URL canonique • index google
avec l’option [site:] • le partage sur
les réseaux sociaux [prise en
compte des balises meta
OpenGraphic et Twitter]

31. PAYMENT REQUEST
API
Vérifier l’implémentation
Plus de formulaires
« 1-tap »

32. GOOGLE
ANALYTICS
Vérifier :
Enregistrement des données
en mode hors-connexion

33. AUTOMATISATION DES TESTS

34. Google Lighthouse
Chrome > Outils pour les développeurs > Audits
Rapport simple à partir de l’url d’une page
Permet de vérifier les éléments de base essentiels
comme le https…

35. Exemple de code
d'automatisation simple
Un Scenario en deux temps
1ère partie : En-ligne
• Ergonomique et/ou fonctionnels
• Sauvegarde des ressources et données dynamiques
des pages visités
2nd partie : Hors-ligne
• Recheck Ergonomique et/ou fonctionnels
• Comparaison entre le mode hors-ligne et en ligne
avec les données précédemment sauvegardées

36. Screenshot code sous Selenium
Check du fichier
manifest.json
Mise en cache
des ressources

37. Screenshot code sous Selenium
Check du SEO
Code disponible librement sur
https://github.com/TestingDigitalAutomation/ProgressiveWebApp-Example

38. Les points clés vérifiés
• 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
mode enligne et hors-ligne, balises/scripts ou autres …)

39. Sécurité
Pages en HTTPS
Redirection HTTP vers HTTPS
Détails des réponses HTTP

40. SEO
Titre, image, description, etc
Forme Canonique définie
Social metadata
Exemple peut être applicable sur
tous type de balises (meta, img,
link, …)

41. MERCI
pour votre attention
Xavier BRICE
COO Testing Digital
xavier@testingdigital.com
Testingdigital.com