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

1. 1#seocamp Améliorer l’expérience utilisateur en passant aux Progressive Web App

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#seocamp Sommaire Améliorer l’UX via les Progressive Web App Intro Enjeux Showcase Implementation Futur

5. 5#seocamp L’UX first De l’application web à la Progressive Web App

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#seocamp Mobile vs. Desktop #Google #PWARoadshow Source : Nombre d’utilisateurs globaux (en millions)

8. 8#seocamp Web mobile vs. apps natives #Google #PWARoadshow Source : comScore Mobile Metrix, U.S., Age 18+, June 2017

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#seocamp Mobile web vs. Apps #Google #PWARoadshow Nombre d’utilisateurs impactés Capacités

11. 11#seocamp Mobile web vs. Apps #Google #PWARoadshow Nombre d’utilisateurs impactés Capacités

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#seocamp 53% des utilisateurs abandonnent les sites qui chargent en +3s Rapide

14. 14#seocamp Comme une app native Ecran d’accueil, liste des tâches, accès au hardware natif Integrée

15. 15#seocamp Fiabilité de la connexion On s’est habitué à être toujours online mais... Fiable Lie-Fi

16. 16#seocamp Se rappeler au bon souvenir des utilisateurs Notifications push Engageantes

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#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

20. 20#seocamp PWA Twitter Améliorations +65% DE PAGES PAR SESSION +75% DE TWEETS ENVOYES

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#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#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

25. 25#seocamp Démo Autovisual.com

26. 26#seocamp Démo Autovisual.com

28. 28#seocamp Implémentation Chrome LightHouse extension

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#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#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#seocamp Implémentation Implémentation avancée : la ‘AppShell’, la coquille de votre site

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#seocamp Détecter l’utilisation offline Workbox intègre un plugin de retransmission des événements Google Analytics quand la connexion revient

35. 35#seocamp Tracking GA pour observer le comportement utilisateur

36. 36#seocamp ● Implémentation Le service worker, avec Google Workbox

37. 37#seocamp Implémentation Bonus : décider quand afficher “Ajouter à l’écran d’accueil”

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#seocamp Question Mug ● Sur quel app store peut-on trouver une liste des meilleures PWA françaises ?

41. 41#seocamp MERCI AUX SPONSORS

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

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

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

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Améliorer l’expérience utilisateur en passant aux Progressive Web App (20)

Plus par RESONEO (16)

Plus récents (20)