Support de mon intervention sur les Progressive Web Apps lors des Rencontres Nationales de la Communication Numérique du 28 septembre 2017 à Paris.

1. FredCavazza.net@fredcavazza #capcomnet
Progressive Web App,
la clé de votre
écosystème mobile
Rencontres Nationales de la Communication Numérique
28 septembre 2017

2. FredCavazza.net@fredcavazza #capcomnet
Frédéric Cavazza ?
• Marketing technologist
• Consultant et conférencier
• 20 ans d’expérience dans le web
• 1 blog : FredCavazza.net
• 2 livres :

3. FredCavazza.net@fredcavazza #capcomnet
Sommaire
• Le mobile dévore le monde
Chiffres-clés, usages et impacts
• Oubliez les applications, pensez écosystème
Pourquoi les applications ne sont plus viables ?
Quelles sont les autres solutions ?
• Le B-A-BA des PWA
Qu’est-ce qu’une Progressive Web App ?
Quelle différence avec le Responsive Web Design ?
Qui les utilisent ? Pour quels objectifs ?

4. FredCavazza.net@fredcavazza #capcomnet
Le mobile dévore le
monde (depuis 2011)

5. FredCavazza.net@fredcavazza #capcomnet
Nous vivons dans un quotidien numérique
Il y a plus de numérique que d’analogique dans
l’information, la communication, le divertissement…
notamment grâce à l’hégémonie des smartphones

6. FredCavazza.net@fredcavazza #capcomnet
Le smartphone dans la
journée des consommateurs
Source : Deloitte, septembre 2016
23% des français n’éteignent jamais leur smartphone

7. FredCavazza.net@fredcavazza #capcomnet
Mobile > Desktop
Supports de consultation :
Mobile
= 52%
Desktop
= 43%
Tablet
= 5%
Ventes mondiales :
Source : IDC, 2016
Source : StatCounter, mai 2017

8. FredCavazza.net@fredcavazza #capcomnet
MOBILE > DESKTOP
Source : eMarketer, mars 2017
Source : ComScore, avril 2017
Investissements publicitaires (FR) :
Temps passé :

9. FredCavazza.net@fredcavazza #capcomnet
Le marketing doit se transformer
No Parking, No Business No Mobile, No Business
Les dogmes du XXe siècle sont des anachronismes

10. FredCavazza.net@fredcavazza #capcomnet
Oubliez les applications
mobiles, pensez
écosystème mobile

11. FredCavazza.net@fredcavazza #capcomnet
Android > 2.000.000.000
Les 3/4 des smartphones en circulation sont sous Android, une
application iPhone ne touchera q’une petite partie des utilisateurs

12. FredCavazza.net@fredcavazza #capcomnet
Les applications mobiles sont reines,
mais malheureusement pas la vôtre !
😃
😳
Source : Flurry Analytics, avril 2017
Social + divertissement + jeux + utilitaires = 95% du temps passé

13. FredCavazza.net@fredcavazza #capcomnet
Nombre moyen d’applications mobiles utilisées par jour (source : AppAnnie, Q1 2017)
Moins de 10 applications
sont régulièrement utilisées
Les mobinautes ont déjà développé leurs habitudes
😩

14. FredCavazza.net@fredcavazza #capcomnet
Moins de 10 M de mobinautes français ont
téléchargé une app. ou + (sur 35 M)
Source : MMA FR
Un réel phénomène d’app fatigue
1 mobinaute US sur 2 ne télécharge plus d’application
Source : Comscore
3/4 des mobinautes français ne téléchargent plus de nouvelles applications
mars- 17

15. FredCavazza.net@fredcavazza #capcomnet
Une application mobile ne couvre
qu’une petite partie des cas d’usages
🤗

16. FredCavazza.net@fredcavazza #capcomnet
Une application mobile ne couvre
qu’une petite partie des cas d’usages
🤗
🤔

17. FredCavazza.net@fredcavazza #capcomnet
Une application mobile ne couvre
qu’une petite partie des cas d’usages
🤗
🤔
🙂

18. FredCavazza.net@fredcavazza #capcomnet
Une application mobile ne couvre
qu’une petite partie des cas d’usages
🤗
🤔
🙂
😕

19. FredCavazza.net@fredcavazza #capcomnet
Une application mobile ne couvre
qu’une petite partie des cas d’usages
🤗
🤔
🙂
😕
☹

20. FredCavazza.net@fredcavazza #capcomnet
Une application mobile ne couvre
qu’une petite partie des cas d’usages
🤗
🤔
🙂
😕
☹
😠

21. FredCavazza.net@fredcavazza #capcomnet
Une application mobile ne couvre
qu’une petite partie des cas d’usages
🤗
🤔
🙂
😕
☹
😠
😖

22. FredCavazza.net@fredcavazza #capcomnet
Tout est question de contexte
Toucher la bonne personne, au bon endroit, au bon moment…
sans l’obliger à télécharger une application de 28 Mo !

23. FredCavazza.net@fredcavazza #capcomnet
Votre objectif est de couvrir le
plus de micro-moments possibles
S’insérer de façon élégante dans le quotidien des mobinautes
Source : BCG, mai 2015

24. FredCavazza.net@fredcavazza #capcomnet
Les différents formats de présence
• Application native / hybride
• Site responsive / RESS
• Site mobile dédié
• Pages AMP / Instant Articles
• Bannières / publicités natives
• Résultats sponsorisés
• Promotions géolocalisées / in-store
• Notifications (in app, assistants…)
• Chatbot (Messenger, Kik, Viber…)
• Assistants personnels (Siri, Google…)
Les smartphones offrent de nombreuses possibilités de toucher vos clients

25. FredCavazza.net@fredcavazza #capcomnet
Progressive Web App,
la solution ultime ?

26. FredCavazza.net@fredcavazza #capcomnet
Les limites du RWD
Le responsive web design est une transition pour
mieux appréhender les terminaux mobiles
☹ Poids des pages
😖 Temps de chargement
😥 Complexité du code
😱 Adéquation au contexte mobile
« Naaaaan c’est booooon, notre site est responsive… »

27. FredCavazza.net@fredcavazza #capcomnet
La révolution des PWA
Les Progressive Web Apps offrent tous les avantages des sites
mobiles et des applications natives sans les inconvénients
• Accès immédiat
• Icône sur l’écran d’accueil
• Fonctionnement hors-ligne
• Stockage persistent
• Mises à jour transparentes
• Accès aux ressources syst.
• Interface uniforme…

28. FredCavazza.net@fredcavazza #capcomnet
Concrètement, c’est quoi une PWA ?
• Un site web (accessible librement depuis une URL et non une
app store, et peut donc être référencé sur Google)
• Optimisé pour les smartphones (mise en page adaptative,
compatible avec les Accelerated Mobile Pages…)
• Qui reproduit l’expérience d’une application (icône sur l’écran
d’accueil, cadre du navigateur pas affiché…)
• Qui offre le même niveau de service (fluidité, rapidité,
consultation hors ligne, utilisation du GPS, de l’appareil photo…)
• Mais qui est utilise les technologies web (pas besoin de recruter
un nouveau développeur ou d’avoir recours à un prestataire)
Avec les Progressive Web Apps , vous n’avez aucun compromis à faire

29. FredCavazza.net@fredcavazza #capcomnet
Ex : Forbes

30. FredCavazza.net@fredcavazza #capcomnet
Ex : Forbes
Icône sur l’écran d’accueil
Même prise en charge par
l’OS qu’une appli native

31. FredCavazza.net@fredcavazza #capcomnet
Ex : Financial Times
Ajout à l’écran d’accueil
à la seconde visite
Stockage des articles
pour lecture hors-ligne

32. FredCavazza.net@fredcavazza #capcomnet
Ex : Lancôme
Notifications push Géolocalisation

33. FredCavazza.net@fredcavazza #capcomnet
Ex : Wego
Récupération
automatique du profil
Recherches en arrière plan

34. FredCavazza.net@fredcavazza #capcomnet
Ex : Voice Recorder
Utilisation du micro
Édition et stockage des
mémos vocaux

35. FredCavazza.net@fredcavazza #capcomnet
Ex : Utilitaires
Utilisation du micro Utilisation de l’appareil photo

36. FredCavazza.net@fredcavazza #capcomnet
Ex : 2048
Icône sur l’écran d’accueil Manipulation fluide

37. FredCavazza.net@fredcavazza #capcomnet
Ex : Rio Run
Stockage des
enregistrements audio
Géolocalisation Fonctionnement hors-ligne

38. FredCavazza.net@fredcavazza #capcomnet
Tous les avantages des applications
natives sans les inconvénients
• Accès immédiat aux contenus, services et offres
• Icône sur l’écran d’accueil
• Fonctionnement hors-ligne
• Mises à jour transparentes sans passer par le processus
d’approbation des app stores
• Accès aux ressources systèmes (GPS, appareil photo,
contacts, micro, notifications…)
• Fonctionnalités équivalents à une applications native
(notifications, sauvegarde des données…)
Les PWA sont la clé de voute de votre écosystème mobile

39. FredCavazza.net@fredcavazza #capcomnet
Conclusion

40. FredCavazza.net@fredcavazza #capcomnet
Making smartphone great again!
😜

41. FredCavazza.net@fredcavazza #capcomnet
Merci de votre attention