SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
Découverte des Progressive Web Apps (PWA) :
quel avenir pour les app stores ?
Audrey
SCHOONWATER
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
Quoi ?
3
Qui ?
Quoi ?
Quand ?
Démo
Comment ?
Audience
Qui a entendu parler des Progressive Web Apps (PWA) ?
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
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
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
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 !
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
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
Quoi : Firefox
11
• PWA Pokedex sur Firefox pour Android (Beta)
Quoi : Opéra
12
• PWA Pokedex sur Opéra pour Android
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
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.
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 ?
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
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.
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
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
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.
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.
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.
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
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 ?
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.
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.
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
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
Démo : checklist basique
29
Exemple d’extension Chrome Lighthouse
lancé sur twitter.com
Démo : Twitter Vs. Lighthouse
30
Résultats :
Démo : Twitter Vs. Lighthouse
31
Démo : Twitter Vs. Lighthouse
32
Démo : Twitter Vs. Lighthouse
33
Démo : Twitter Vs. Lighthouse
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
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
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.
Merci !
Audrey SCHOONWATER
• @witamine
• @resoneo
• @seocamp

Contenu connexe

Tendances

Tendances (19)

Innovations "mobile" en SEO
Innovations "mobile" en SEOInnovations "mobile" en SEO
Innovations "mobile" en SEO
 
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
TUNISEO - 2018 - Le SEO à l'heure du Mobile First par Philippe Yonnet, Direct...
 
L’Importance Des Interface
L’Importance Des InterfaceL’Importance Des Interface
L’Importance Des Interface
 
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
Progressive Web Apps PWA : quoi, comment, pour quels résultats ?
 
Kick Your App : Nos solutions mobiles professionnelles
Kick Your App : Nos solutions mobiles professionnellesKick Your App : Nos solutions mobiles professionnelles
Kick Your App : Nos solutions mobiles professionnelles
 
Développer son site internet et optimiser son référencement
Développer son site internet et optimiser son référencementDévelopper son site internet et optimiser son référencement
Développer son site internet et optimiser son référencement
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
 
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
 
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploité
 
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
 
CMSday 2013 - L'impact des performances de votre site sur votre audience
CMSday 2013 - L'impact des performances de votre site sur votre audienceCMSday 2013 - L'impact des performances de votre site sur votre audience
CMSday 2013 - L'impact des performances de votre site sur votre audience
 
Comment choisir son cms
Comment choisir son cmsComment choisir son cms
Comment choisir son cms
 
Cours information communication : Site web, Native App, Progressive Web App
Cours information communication : Site web, Native App, Progressive Web AppCours information communication : Site web, Native App, Progressive Web App
Cours information communication : Site web, Native App, Progressive Web App
 
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir..."Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
Mobile et e-commerce 2017 : Google AMP, Mobile First Index
Mobile et e-commerce 2017 : Google AMP, Mobile First IndexMobile et e-commerce 2017 : Google AMP, Mobile First Index
Mobile et e-commerce 2017 : Google AMP, Mobile First Index
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 

Similaire à SEO Dawa Day Progressive Web App 23 sept 2017

Similaire à SEO Dawa Day Progressive Web App 23 sept 2017 (20)

Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
L'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - LilleL'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - Lille
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
 
Se rendre visible sur le web mobile avec le seo
Se rendre visible sur le web mobile avec le seoSe rendre visible sur le web mobile avec le seo
Se rendre visible sur le web mobile avec le seo
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Webinar Semrush Neper - quel ROI pour les pages amp
Webinar Semrush Neper - quel ROI pour les pages  ampWebinar Semrush Neper - quel ROI pour les pages  amp
Webinar Semrush Neper - quel ROI pour les pages amp
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
Lemon Interactive SEO 2017
Lemon Interactive SEO 2017Lemon Interactive SEO 2017
Lemon Interactive SEO 2017
 
Mobile first : évitez de perdre des clients à cause d'un site trop lent
Mobile first : évitez de perdre des clients à cause d'un site trop lentMobile first : évitez de perdre des clients à cause d'un site trop lent
Mobile first : évitez de perdre des clients à cause d'un site trop lent
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEO
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - petit déjeun...
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
 
SEO mobile en 2014
SEO mobile en 2014SEO mobile en 2014
SEO mobile en 2014
 

SEO Dawa Day Progressive Web App 23 sept 2017

  • 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