Progressive Web Apps (PWA) A l'heure où le téléchargement d'applications est en baisse constante, comment émerger sur les stores d'applications ? Découvrez également l'avenir des app stores avec l'avènement des Progressive Web Apps (PWA) : Que sont ces apps qui ressemblent aux apps classiques et qui peuvent prendre la forme d'apps natives ? Où et comment fonctionnent-elles ? hors-ligne/devices/service workers/pas de pub Comment s'en servir pour fidéliser sur son site ? Cas concrets Que projette Google et autres gros acteurs du web sur le sujet ? AMP + PWA

1. Découverte des Progressive Web Apps (PWA) :
quel avenir pour les app stores ?
Audrey
SCHOONWATER

2. Qui suis-je ?
2
Qui ?
Quoi ?
Quand ?
Démo
Comment ?
Audience
Audrey SCHOONWATER
• @witamine
• SEO lover since 2003
TOULOUSE
• Développeur / admin système
• Responsable technique à Toulouse pendant 8 ans.
PARIS
• Consulting, formation SEO
• Responsable Veille / Méthodo & Innovation
• Membre fondateur SEOCAMP
• L’association des référenceurs est née d’une discussion entre
David Degrelle et Alexandre Villeneuve après l’émission de
webradio « Witamine » sur l’échec des associations Search
• De retour au CA du SEOCAMP depuis peu

3. Quoi ?
3
Qui ?
Quoi ?
Quand ?
Démo
Comment ?
Audience
Qui a entendu parler des Progressive Web Apps (PWA) ?

4. Quoi : Portée web mobile
5
Portée des sites mobiles
• 3 fois celle des apps
• se développe plus vite
Utilisateurs
• trouvent la saisie d’une URL fastidieuse
• préfèrent ouvrir une app
• puis ne reviennent pas plus tard…
4.0
11.4
Visiteurs uniques par mois (M)
App web vs. Web mobile
Top 1 000
Mobile webApps
Source : Google I/O 2017

5. Quoi : Engagement mobile
6
Temps passé sur l’app
• Plus élevé que sur le web (contenu identique)
Utilisateurs vs. apps
• reçoivent des notifications push
• les ouvrent via l’icône sur l’écran d’accueil
• s’engagent davantage…
188,6
9.3
Nombre de minutes moyen par visiteur
App web vs. Web mobile
Top 1 000
Mobile webApps
Source : Google I/O 2017

6. Quoi : Taux d’abandon des app natives
7
Le pourcentage de personnes qui arrêtent d’utiliser des applications continue
de croître.
Courbe de rétention moyenne pour les applications Android

7. Quoi : des apps aux PWA
8
Comment fournir une expérience plus engageante
aux utilisateurs qui arrivent sur notre site via mobile ?
Faut-il inciter à installer l’application native
• NON
Faut-il proposer une expérience d’app native sur le web ?
• OUI !

8. Quoi : des apps aux PWA
9
Comment engager davantage ?
• Notification push (web push)
• Emplacement sur l’écran d’accueil
• Fiabilité des technologies spécifiques
(service workers)
« A Progressive Web App uses modern web
capabilities to deliver an app-like user experience. »
Google Developers
Les applications web qui tirent partie de ces technologies s’appellent des
Progressive Web Apps

9. Quoi : des apps aux PWA
10
Site web qui peut être transformé en application traditionnelle ou application mobile (native) :
URL
Mise en
favoris
 Notification via le navigateur
 Icône sur l’écran d’accueil
 Site offline
 Apparence d’une app
Version HTML Fichier CSS et JS URL Google Bot
identique identique identique Googlebot-mobile
Côté technique

10. Quoi : Firefox
11
• PWA Pokedex sur Firefox pour Android (Beta)

11. Quoi : Opéra
12
• PWA Pokedex sur Opéra pour Android

12. Quoi : Avantages des PWA
13
Qualificatifs pour les PWA :
• Progressive
• Découverte
• Liens
• Sensible
• App-like
• Connectivité indépendante
• Re-engageable
• Installable
• Actualisée
• Sûre
Mais aussi :
• Fonctionnent partout sur le web, installées ou
non
• Réduisent le coût de maintenance d’une app
• Pas limitées aux règles d’un store (modèle éco)
PWA

13. Quoi : Inconvénients des PWA
14
Inconvénients des PWA
• nouvelle technologie donc moins d’exemples à suivre,
• pas encore disponibles partout
Bonne nouvelle : ce n’est pas un frein !
• Amélioration progressive : les PWA bénéficient à toute personne qui visite notre site indépendamment de
l’appareil qu’on choisit d’utiliser.

14. Démo : Ajout à l’écran d’accueil
15
Demo de 2015 sur le blog de Alex Russell, un développeur web sous ChromeQui ?
Quoi ?
Quand ?
Démo
Service Workers
AMP
Comment ?

15. Démo : AliExpress (mai 2016)
16
Motto de AliExpress : “Smarter shopping, better living”
Objectif : créer une expérience mobile de qualité alors que le m-
commerce augmente 3 fois plus vite que le e-commerce
Résultats, sur tous navigateurs :
• Hausse du taux de conversion de 104% pour les nouveaux
utilisateurs
• 82% d’augmentation du taux de conversion iOS
• 2X plus de pages visitées par session par utilisateur
• Hausse de 74% du temps passé par session

16. Démo : L’Equipe
17
Le site de l’Equipe est devenu une progressive web apps :
une 1ère pour un site media français !
• 2,6 millions de visiteurs uniques quotidien
• 1,6 millions uniquement depuis un mobile (en
progression).
Aux États-Unis, plusieurs médias ont déjà adopté la PWA.
 Forbes,
 Financial Times,
 Washington Post.

17. Démo : L’Equipe
18
Le design de l’app est repris ainsi que certaines des fonctionnalités comme : 1/ le mode hors ligne, 2/ la
création d’une icône sur l’écran d’accueil et 3/ un temps de chargement très rapide.
Site mobile PWA App

18. Démo : L’Equipe
19
Notification de la demande
d’ajout en écran d’accueil
Coûts
• Budget de création de PWA plus important
qu’une refonte de site mobile.
• Investissement qui sera rapidement amorti.
• Des mises à jour à venir sur la même base
que l’app.
Gains :
• Taux d’ouverture, d’engagement, de clics et
de conversion en hausse
• Diminution du taux de rebond.
Etude de cas L’Equipe

19. Démo : L’Equipe
20
Les médias avec PWA constatent des hausses du nombre de
pages consultées et du temps passé sur le site.
Ils disposent également d’une augmentation du nombre de
visites grâce à la diminution du temps de chargement des
pages.

20. Service Workers
21
Qui ?
Quoi ?
Quand ?
Démo
Service
Workers
AMP
Comment ?
Que sont les Service Workers ?
• Scripts exécutés par les navigateurs en tâche de fond, séparément de la page
web, sans interaction utilisateur.
• Permettent aux PWA de se charger instantanément quel que soit l'état du
réseau : fiabilité et performance.

21. Service Workers
22
Proxy côté client, écrit en JavaScript
Cache
Service Workers
PWA
+ Serveur web
Sites traditionnels
Serveur web
Aller plus loin : Jake Archibald, Service Workers designer @ Google I/O 2016
• Les Services Workers sont bien implémentés sur Chrome et Firefox mais non pris en charge par IE ou Safari.
• Cela limite leur utilisation en production.

22. Service Workers
23
Demo sur le site de Marmelab par Alexis Janvier (mars 2017)
Fondamentaux pour se lancer dans l’utilisation
des Service Workers:
• Compatibilité selon navigateur
• Cycle de vie dans un processus indépendant
• Fonctionnement asynchrone pour ne pas
bloquer l’exécution de l’application
• HTTPS obligatoire
Aller plus loin
• Bien réfléchir l'interface utilisateur
• Possibilité de stratégies de cache complexes

23. AMP (Accelerated Mobile Pages)
24
Que fait AMP ?
C’est une méthode de création de pages Web pour du
contenu statique permettant un rendu rapide.
 AMP HTML : restrictions pour une performance
accrue et des extensions pour du contenu enrichi
plus élaboré
 AMP JS : bibliothèque JavaScript pour un rendu
rapide des pages AMP HTML.
 Système de cache : comme Google AMP Cache (en
option) qui permet de fournir les pages AMP HTML.
Source : Wikipédia
Qui ?
Quoi ?
Quand ?
Démo
Service Workers
AMP
Comment ?

24. AMP et PWA
25
Cas du Washington Post
• 1 000 articles AMP par jour
• Temps de chargement moyen : 400 ms soit 88% d’amélioration suite à la mise
en œuvre d’AMP
• Grâce à AMP, le Washington Post a obtenu 23% de visiteurs supplémentaires
qui reviennent sur mobile.
Mixer AMP + PWA
Leur PWA s’installe en arrière-plan pendant que les visiteurs consultent les
pages AMP dans les SERP.
• Augmentation de 12% de visites en provenance des SERP grâce à AMP.
• Passage d’articles de 8 secondes à se charger en 2013 à 80 millisecondes
dans la PWA en 2016.

25. Quand ?
26
Qui ?
Quoi ?
Quand ?
Démo
Service Workers
AMP
Comment ?
Le format PWA est adapté aux médias pour FIDELISER
• Engager : en diminuant le taux de rebond et en augmentant le taux de conversion
Mais les PWA peinent à arriver en France :
• Les médias préfèrent AMP (Accelerated Mobile Pages)
• Visibilité croissante dans le carrousel Google Actualités
• AMP déjà coûteux et chronophage
• PWA + AMP = améliorer l’UX en réduisant le temps de chargement mobile.

26. Démo : Lighthouse
27
Qui ?
Quoi ?
Quand ?
Démo
Service Workers
AMP
Comment ?
Lighthouse
 Outil automatique
 Open-source d'audit de performance
 Permet d’améliorer la qualité d’une PWA
 Restreint une partie des tests manuels précédemment requis
 Utilisable dans les systèmes d’intégration continus pour observer les régressions.
Et aussi Preact, une alternative légère (3K) à la bibliothèque React JavaScript UI

27. Démo : checklist basique
28
A tester via Lighthouse
 Site en HTTPS
 Responsive sur tablettes et mobiles
 L’URL de départ charge Hors-Ligne
 Metadata pour Ajouter à l’écran d’accueil
 1er chargement rapide même en 3G
 Compatibilité multinavigateurs du site
 Transitions de page ne donnent pas l’impression d’être
bloquées sur le réseau
 Chaque page possède une URL

28. Démo : checklist basique
29
Exemple d’extension Chrome Lighthouse
lancé sur twitter.com

29. Démo : Twitter Vs. Lighthouse
30
Résultats :

30. Démo : Twitter Vs. Lighthouse
31

31. Démo : Twitter Vs. Lighthouse
32

32. Démo : Twitter Vs. Lighthouse
33

33. Démo : Twitter Vs. Lighthouse
34

34. Démo : checklist basique
35
Checklist manuelle (pas sur Lighthouse)
 Contenu du site indexé par Google
 Metadata Schema.org renseignées si pertinentes
 Metadata sociales si pertinentes
 URL canoniques si nécessaires
 Les pages utilisent l’API History
 Le contenu ne saute pas lors du chargement de la page
 Appuyer sur le bouton Précédent depuis une page de détail conserve la
position du scroll de la page précédente
 Les zones de saisies ne sont pas recouvertes par le clavier virtuel
 Le contenu est facilement partageable une fois l’app installée sur l’écran
d’accueil depuis la version autonome comme en plein écran
 Site responsive depuis différentes tailles d’appareils (mobile, tablette,
ordinateur)
… 1/2

35. Démo : checklist basique
36
...2/2
Checklist manuelle (pas sur Lighthouse)
 Vérifier que l’interstitiel d’installation de la PWA n’est pas chargé
intempestivement
 Le message d’ajout à l’écran d’accueil est intercepté
 1er chargement très rapide même en 3G (<5s)
 Le cache rend une expérience similaire en offline comme en online
 Le site informe de façon appropriée que l’utilisateur est offline
 Préciser clairement à quoi vont servir les notifications au moment de
l’autorisation
 Pas de messages agressifs invitant l’utilisateur à activer les notifications push
 Le site redimensionne l’écran quand la demande d’autorisation est affichée
 Les notifications push doivent être configurables pour l’utilisateur à un moment
précis, de façon pertinente
 Permettre d’activer et désactiver les notifications
 Si le site dispose d’un espace utilisateur, la gestion de sa connexion est assurée par
Credential Management API
 Les utilisateurs peuvent payer facilement depuis UI native : Payment Request API

36. Futur
37
Quelles motivations derrière les Progressive Web Apps ?
Les navigateurs ne feront pas la promotion des PWA simplement parce que ce
sont les technologies les plus récentes et utiles. Il faut qu’elles représentent
les meilleures pratiques pour développer des sites web et des applications.
Il faut qu’il s’écoule cinq minutes ou plus entre les deux visites pour que la
bannière d’installation PWA apparaisse.
Ce critère changera quand les navigateurs comprendront mieux quand les
gens installent des PWA.
Se lancer
• Support Google
• « Hacker News readers as Progressive Web Apps » : exemples et
ressources de PWA avec Angular, React et Vue.js.
Limitations
• Les notifications Push ne sont pas la panacée pour garantir la fidélité à une
application (gare aux notifications de SPAM…)
• La technologie n’est pas encore complètement aboutie mais les PWA ne
sont pas un frein.

37. Merci !
Audrey SCHOONWATER
• @witamine
• @resoneo
• @seocamp