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.

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

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

19. 19#seocamp
Sommaire
Améliorer l’UX via les Progressive Web App
Intro Enjeux Showcase Implementation Futur

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

24. 24#seocamp
Sommaire
Améliorer l’UX via les Progressive Web App
Intro Enjeux Showcase Implementation Futur

25. 25#seocamp
Démo
Autovisual.com

26. 26#seocamp
Démo
Autovisual.com

27. 27#seocamp
Sommaire
Améliorer l’UX via les Progressive Web App
Intro Enjeux Showcase Implementation Futur

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”

38. 38#seocamp
Sommaire
Améliorer l’UX via les Progressive Web App
Intro Enjeux Showcase Implementation Futur

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