Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Améliorer l’expérience utilisateur en passant aux Progressive Web App

4,704 views

Published on

Notre consultante Audrey vous explique les enjeux de cette technologie innovante, son fonctionnement et sa mise en place. Elle vous montre les avantages techniques d’une PWA par rapport au SEO et vous parle des fonctionnalités de l’outil Lighthouse de Google, notamment en lien avec la PWA.
RESONEO a récemment accompagné Laurent Debricon, fondateur d’AutoVisual – comparateur de prix du marché automobile – dans sa réflexion pour la mise en place de la PWA pour son site web. Laurent partage avec vous son retour d’expérience.

Published in: Internet
  • Be the first to comment

Améliorer l’expérience utilisateur en passant aux Progressive Web App

  1. 1. 1#seocamp Améliorer l’expérience utilisateur en passant aux Progressive Web App
  2. 2. 2#seocamp Audrey Schoonwater Laurent Debricon SEO @ RESONEO, cabinet de conseil et stratégie en marketing pour l’e-business co-fondateur @ AutoVisual.com, comparateur de prix de la voiture d’occasion @witamine @resoneo @triiif @auto_visual
  3. 3. 3#seocamp Sommaire Améliorer l’UX via les Progressive Web App Intro Enjeux Showcase Implementation Futur
  4. 4. 4#seocamp Sommaire Améliorer l’UX via les Progressive Web App Intro Enjeux Showcase Implementation Futur
  5. 5. 5#seocamp L’UX first De l’application web à la Progressive Web App
  6. 6. 6#seocamp Mobile et Chrome Dans le monde… 8 milliards - 2017 APPAREILS CONNECTES 40 milliards - 2020 1 milliard CHROME SUR MOBILE +150% UTILISATEURS MENSUELS YOY 7,5 milliards POPULATION
  7. 7. 7#seocamp Mobile vs. Desktop #Google #PWARoadshow Source : Nombre d’utilisateurs globaux (en millions)
  8. 8. 8#seocamp Web mobile vs. apps natives #Google #PWARoadshow Source : comScore Mobile Metrix, U.S., Age 18+, June 2017
  9. 9. 9#seocamp Utilisateurs ● se servent seulement de quelques apps ● trouvent que les apps occupent beaucoup de place, temps, argent ● ZERO app installée en moyenne par mois ! Les apps natives ...en chiffres 78% du temps passé Top 3 des apps Source: comScore MobiLens, U.S., Age 13+, 3 Month Average Ending June 2017
  10. 10. 10#seocamp Mobile web vs. Apps #Google #PWARoadshow Nombre d’utilisateurs impactés Capacités
  11. 11. 11#seocamp Mobile web vs. Apps #Google #PWARoadshow Nombre d’utilisateurs impactés Capacités
  12. 12. 12#seocamp Qu’est-ce qu’une Progressive Web App ? Site web qui peut être transformé en application traditionnelle Rapide EngageanteFiableIntégrée
  13. 13. 13#seocamp 53% des utilisateurs abandonnent les sites qui chargent en +3s Rapide
  14. 14. 14#seocamp Comme une app native Ecran d’accueil, liste des tâches, accès au hardware natif Integrée
  15. 15. 15#seocamp Fiabilité de la connexion On s’est habitué à être toujours online mais... Fiable Lie-Fi
  16. 16. 16#seocamp Se rappeler au bon souvenir des utilisateurs Notifications push Engageantes
  17. 17. 17#seocamp Sur ~1 000 utilisateurs mobile, ~20% des utilisateurs s’arrêtent à chaque étape de l’installation d’une app. Progressive Web App Pas de store nécessaire pour installer une PWA
  18. 18. 18#seocamp Fondamentaux pour les Service Workers : ● Compatibilité selon navigateur (Service Worker pas encore sur tous les navigateurs) ● Cycle de vie dans un processus indépendant ● Fonctionnement asynchrone pour ne pas bloquer l’exécution de l’application ● HTTPS obligatoire Progressive Web App Schéma de fonctionnement d’un Service Worker Aller plus loin : ● Bien réfléchir l'interface utilisateur ● Possibilité de stratégies de cache complexes
  19. 19. 19#seocamp Sommaire Améliorer l’UX via les Progressive Web App Intro Enjeux Showcase Implementation Futur
  20. 20. 20#seocamp PWA Twitter Améliorations +65% DE PAGES PAR SESSION +75% DE TWEETS ENVOYES
  21. 21. 21#seocamp PWA Améliorations -15% DE TAUX DE REBOND 8% conversion SUR NOTIFICATIONS PUSH +17% EN CONVERSIONS +53% SESSIONS MOBILE SUR IOS
  22. 22. 22#seocamp ● Une navigation plus rapide : un temps de chargement très réduit et indépendant de la qualité du réseau, possibilité d’utilisation hors connexion via les Service Workers*. ● Une ergonomie optimisée : orientation mobile-first, à l’évidence avec un responsive design, expérience immersive plein écran (sur n’importe quelle taille d’écran), navigation tactile facilitée. ● Mieux qu’une application native : accessible depuis une URL ou depuis une icône sur l’écran d’accueil mobile, moins lourde, occupant peu d’espace, actualisation automatique lors du chargement, coûts de productions réduits. Enjeux des PWA Avantages pour les mobinautes
  23. 23. 23#seocamp ● Des guidelines faciles à suivre : https://developers.google.com/web/progressive-web-apps/ ● Une indépendance vis-à-vis des web stores ● Des technologies abouties et une prise en main facile des outils : utilisation du framework Ionic, Angular et ReactJS Constat des médias ● Hausse du nombre de pages consultées et du temps passé sur le site avec PWA ● Augmentation du nombre de visites grâce à la diminution du temps de chargement des pages. Enjeux des PWA Avantages pour les développeurs et les éditeurs
  24. 24. 24#seocamp Sommaire Améliorer l’UX via les Progressive Web App Intro Enjeux Showcase Implementation Futur
  25. 25. 25#seocamp Démo Autovisual.com
  26. 26. 26#seocamp Démo Autovisual.com
  27. 27. 27#seocamp Sommaire Améliorer l’UX via les Progressive Web App Intro Enjeux Showcase Implementation Futur
  28. 28. 28#seocamp Implémentation Chrome LightHouse extension
  29. 29. 29#seocamp Implémentation Le manifest.json Dans notre HTML, on y fait référence dans la balise <head> : <link rel="manifest"href="/manifest.json">
  30. 30. 30#seocamp Implémentation Le service worker minimal pour passer le test Mais il est complexe d’écrire un service worker car cela intercepte toutes les requêtes faites avec notre site. Les concepts sont compliqués, d’où l’arrivée d’une librairie pour nous aider : Google Workbox Dans votre page HTML sw.js
  31. 31. 31#seocamp ● Version maximale grâce à la librairie Google Workbox qui aide à la génération d’un Service Worker puissant ○ Mise en cache de contenu en avance ■ Workbox s'intègre dans votre build avec gulp//grunt//cli pour garder à jour une liste de fichiers statiques à précharger ● A la prochaine visite, le service worker du navigateur va regarder ce fichier contenant ces empreintes ● Si certaines sont différentes de ce qu’il a dans son cache, alors il va les mettre à jour Implémentation Le service worker, avec Google Workbox
  32. 32. 32#seocamp Implémentation Implémentation avancée : la ‘AppShell’, la coquille de votre site
  33. 33. 33#seocamp build.js swSrc.js NetworkFirst pour avoir de la fraicheur CacheFirst pour les données intemporelles Plugin replay du tracking Google Analytic quand la connection reviens
  34. 34. 34#seocamp Détecter l’utilisation offline Workbox intègre un plugin de retransmission des événements Google Analytics quand la connexion revient
  35. 35. 35#seocamp Tracking GA pour observer le comportement utilisateur
  36. 36. 36#seocamp ● Implémentation Le service worker, avec Google Workbox
  37. 37. 37#seocamp Implémentation Bonus : décider quand afficher “Ajouter à l’écran d’accueil”
  38. 38. 38#seocamp Sommaire Améliorer l’UX via les Progressive Web App Intro Enjeux Showcase Implementation Futur
  39. 39. 39#seocamp ● Chrome OS ● Windows Store ● 2018 : Safari ios ● être dans les options de partage, comme les apps natives Futur tous les géants sont sur le coup !!
  40. 40. 40#seocamp Question Mug ● Sur quel app store peut-on trouver une liste des meilleures PWA françaises ?
  41. 41. 41#seocamp MERCI AUX SPONSORS

×