SlideShare une entreprise Scribd logo
1
Infinite Series – Progressive Web App
sollivier@infinitesquare.com
wklein@infinitesquare.com
Novembre 2017
Infinite Series
Progressive Web App :
Pourquoi et comment se passer des stores ?
Infinite Square en quelques mots
Société de conseil, expertise, réalisation, formation, spécialisée dans
le design et le développement d’applications innovantes pour les entreprises
2
Microsoft GOLD Partner Éditeur de la solution de
gestion événementielle
11 MVPs Partenariats technologiques
Centre de
formation
agréé
Etat des lieux Web vs Natif
 Le natif permet d’avoir une expérience proche de la plateforme
Intégré à l’OS / Device
Fonctionne sans connexion
Fonctionnalité avancée (gesture, géolocalisation, etc.)
Monétisation soumise au store
Cycle de déploiement lourd
 Le web permet de cibler la totalité des devices / supports
Cycle de déploiement léger
Monétisation libre
Développement léger
SEO
Pas d’interactions avec le device
Nécessite une connexion
3
PWA : Prendre le meilleur des deux mondes
4
Avoir la souplesse et la légèreté du web
Avoir la qualité et l’intégration au device du natif
Quelques statistiques pour
démarrer
Temps d’utilisation des applications
Source: Quartz | qz.com
Data: comScore
6
Près de 80% du temps d’utilisation est
passé sur 3 applications
(YouTube, Facebook, Twitter, etc.)
=> Il ne nous reste que 20% de temps
d’utilisation disponible
Temps d’utilisation des applications
Source: Quartz | qz.com
Data: comScore
7
65,5% des utilisateurs ne téléchargent
aucune application
Taux d’abandon
8
Source: https://www.thinkwithgoogle.com/marketing-resources/experience-
design/speed-is-key-optimize-your-mobile-experience/
Une visite sur deux abandonnée au-
delà de 3 secondes de chargement.
Taille des applications
9
Les applications stores sont lourdes
Les sites web sont extrêmement légers (Facteur 1/500)
=> Environ 7 min en 3G pour l’application iOS Twitter
=> Environ 1 s en 3G pour la PWA Twitter
Temps d’utilisation App vs Browser
10
Source: Flurry Analytics, comScore, NetMarketShare
Conclusions
 Le store ne permet pas nécessairement d’avoir de la visibilité :
 Beaucoup d’applications (> 2 000 000 sur iOS & Android)
 Une grande partie de la visibilité est prise par une petite partie des apps
 Les utilisateurs ne téléchargent que très
peu d’applications
 Mais la présence sur les stores reste
encore indispensable dans beaucoup
de secteurs, surtout B2C
11
Bien mais qu’est-ce qu’une PWA ?
PWA c’est :
 Un site Web
 Un ensemble de Guidelines
 Basé sur 3 principes
13
PWA ce n’est pas :
 Une application store
 Un framework
 Une technologie
Reliable
L’application doit fonctionner quel que soit l’état du réseau
14
Fast
L’application doit être rapide et réactive
15
Engaging
L’application doit pouvoir être installée
et accessible depuis la home du device
16
En détail (basé sur la checklist de Google)
L’application doit
 Etre exposée via HTTPS
 Etre responsive
 Fonctionner sans réseau
 Charger rapidement même avec un mauvais réseau
 Fournir des metadata pour proposer l’ajout d’un raccourci
 Fonctionner sur tous les navigateurs
 Proposer des transitions entre les pages pendant les navigations
17
https://developers.google.com/web/progressive-web-apps/checklist
Et techniquement, comment ça
marche ?
ServiceWorker
 Un fichier JavaScript
 Un autre processus dans le navigateur
 Dispose d’APIs spécifiques (Cache, Fetch, Messaging, Push)
19
DEMO
Web App Manifest
 Un fichier json
 Contient des informations sur l’application
 Permet de « pinner » l’application sur mobile
21
DEMO
Push API
 Permet d’envoyer des notifications Push à une application Web
 Fonctionne même si l’application n’est pas active
 Plusieurs solutions infra pour envoyer des Push Web
23
DEMO
Conclusions
Les PWA offrent une opportunité sans précédent pour les
applications mobiles
MAIS…
le support des navigateurs n’est pas encore prêt
les usages ne sont pas encore prêts
25
Excellent aujourd’hui pour du B2B
Excellement demain pour du B2C
(en général)
Merci pour votre attention !
Pour plus d’informations, n’hésitez pas à contacter :
William KLEIN – wklein@infinitesquare.com
Sébastien OLLIVIER – sollivier@infinitesquare.com
26
Suivez l’actualité Infinite Square en direct !
27
@infinitesquareInfinite Square Infinite Squareblogs.infinitesquare.comwww.infinitesquare.com

Contenu connexe

PDF
API Management
PDF
[AWSマイスターシリーズ] リザーブドインスタンス&スポットインスタンス
PDF
[AWS Migration Workshop] 데이터베이스를 AWS로 손쉽게 마이그레이션 하기
PDF
Aurora MySQL Backtrack을 이용한 빠른 복구 방법 - 진교선 :: AWS Database Modernization Day 온라인
PPTX
Cloud computing
PDF
Unlocking the Cloud Operating Model: People, Process, Tools
PDF
Cloud computing security
PDF
MicroCPH - Managing data consistency in a microservice architecture using Sagas
API Management
[AWSマイスターシリーズ] リザーブドインスタンス&スポットインスタンス
[AWS Migration Workshop] 데이터베이스를 AWS로 손쉽게 마이그레이션 하기
Aurora MySQL Backtrack을 이용한 빠른 복구 방법 - 진교선 :: AWS Database Modernization Day 온라인
Cloud computing
Unlocking the Cloud Operating Model: People, Process, Tools
Cloud computing security
MicroCPH - Managing data consistency in a microservice architecture using Sagas

Tendances (20)

PDF
R&D Projects and Emerging Technology Due Diligence using NASA/DoD Technology ...
PDF
An Introduction to Kubernetes
PDF
Industrie 4.0 : La voie pour maintenir et renforcer la compétitivité industrie
PPTX
Lets talk about: Azure Kubernetes Service (AKS)
PDF
Red hat ceph storage customer presentation
PDF
Azure Monitor Logで実現するモダンな管理手法
PPTX
마이크로서비스 개요
PPTX
Introduction to Kubernetes
PDF
Architecture microservices avec docker
PPT
Conception d'un site web
PPTX
Introduction to kubernetes
PPTX
基礎から学ぶ? EC2マルチキャスト
PDF
Azure vm introduction
PPTX
Microservices
PPTX
ISTIO Deep Dive
PPTX
Cloud testing
PDF
Windows File Service 総復習-Windows Server 2012 R2編 第1版
PPTX
What is Cloud Native Explained?
PPTX
Microsoft Azure
PDF
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
R&D Projects and Emerging Technology Due Diligence using NASA/DoD Technology ...
An Introduction to Kubernetes
Industrie 4.0 : La voie pour maintenir et renforcer la compétitivité industrie
Lets talk about: Azure Kubernetes Service (AKS)
Red hat ceph storage customer presentation
Azure Monitor Logで実現するモダンな管理手法
마이크로서비스 개요
Introduction to Kubernetes
Architecture microservices avec docker
Conception d'un site web
Introduction to kubernetes
基礎から学ぶ? EC2マルチキャスト
Azure vm introduction
Microservices
ISTIO Deep Dive
Cloud testing
Windows File Service 総復習-Windows Server 2012 R2編 第1版
What is Cloud Native Explained?
Microsoft Azure
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
Publicité

Similaire à Progressive Web App : Pourquoi et comment se passer des stores ? (20)

PDF
Le développement mobile avec Vue.js : cross-platform et progressive web apps ...
PDF
SEO Dawa Day Progressive Web App 23 sept 2017
PDF
Construire une PWA connectée à WordPress
PDF
02_Chapitre_1_.pdf
PDF
Investir sur son API web (in French)
PDF
ExperienceNow - Découvrez comment Soitec modernise son IT et gagne en agilité...
PDF
Développer et déployer dans le cloud
PPTX
Ma stack d'outils agiles, tout un programme !
PPTX
E14 - Méthodes de tests et d_évaluation des applications Web Principes, tech...
PDF
Offre migrer vers_flutter
PPTX
Public Launch Cyclone Preview
PDF
Améliorer l’expérience utilisateur en passant aux Progressive Web App
PPTX
Bien comprendre le nouveau modèle Apps de SharePoint 2013
PPTX
Présentation Voirin Club DSI EST 150217
PDF
Comment tester une Progressive Web App
PPTX
Integration Summit 16 - Citizen Integrator / Flow - Power apps
PPTX
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
PPT
Journée Agences Web - Scénario Présence en ligne
PDF
GAB 2017 PARIS - La santé de votre environnement Azure par Manon Pernin et Ma...
PDF
Accélérez itSMF 2013
Le développement mobile avec Vue.js : cross-platform et progressive web apps ...
SEO Dawa Day Progressive Web App 23 sept 2017
Construire une PWA connectée à WordPress
02_Chapitre_1_.pdf
Investir sur son API web (in French)
ExperienceNow - Découvrez comment Soitec modernise son IT et gagne en agilité...
Développer et déployer dans le cloud
Ma stack d'outils agiles, tout un programme !
E14 - Méthodes de tests et d_évaluation des applications Web Principes, tech...
Offre migrer vers_flutter
Public Launch Cyclone Preview
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Bien comprendre le nouveau modèle Apps de SharePoint 2013
Présentation Voirin Club DSI EST 150217
Comment tester une Progressive Web App
Integration Summit 16 - Citizen Integrator / Flow - Power apps
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Journée Agences Web - Scénario Présence en ligne
GAB 2017 PARIS - La santé de votre environnement Azure par Manon Pernin et Ma...
Accélérez itSMF 2013
Publicité

Plus de Sébastien Ollivier (6)

PPTX
Comment créer une application Angular performante ?
PPTX
ngParis - Rendu cote serveur
PPTX
Microsoft experiences azure et asp.net core
PPTX
Le développement mobile multiplateforme avec cordova
PPTX
JavaScript Open Day - Migration Web To App
PPTX
Frameworks JavaScript en environnement MS
Comment créer une application Angular performante ?
ngParis - Rendu cote serveur
Microsoft experiences azure et asp.net core
Le développement mobile multiplateforme avec cordova
JavaScript Open Day - Migration Web To App
Frameworks JavaScript en environnement MS

Progressive Web App : Pourquoi et comment se passer des stores ?

  • 1. 1 Infinite Series – Progressive Web App [email protected] [email protected] Novembre 2017 Infinite Series Progressive Web App : Pourquoi et comment se passer des stores ?
  • 2. Infinite Square en quelques mots Société de conseil, expertise, réalisation, formation, spécialisée dans le design et le développement d’applications innovantes pour les entreprises 2 Microsoft GOLD Partner Éditeur de la solution de gestion événementielle 11 MVPs Partenariats technologiques Centre de formation agréé
  • 3. Etat des lieux Web vs Natif  Le natif permet d’avoir une expérience proche de la plateforme Intégré à l’OS / Device Fonctionne sans connexion Fonctionnalité avancée (gesture, géolocalisation, etc.) Monétisation soumise au store Cycle de déploiement lourd  Le web permet de cibler la totalité des devices / supports Cycle de déploiement léger Monétisation libre Développement léger SEO Pas d’interactions avec le device Nécessite une connexion 3
  • 4. PWA : Prendre le meilleur des deux mondes 4 Avoir la souplesse et la légèreté du web Avoir la qualité et l’intégration au device du natif
  • 6. Temps d’utilisation des applications Source: Quartz | qz.com Data: comScore 6 Près de 80% du temps d’utilisation est passé sur 3 applications (YouTube, Facebook, Twitter, etc.) => Il ne nous reste que 20% de temps d’utilisation disponible
  • 7. Temps d’utilisation des applications Source: Quartz | qz.com Data: comScore 7 65,5% des utilisateurs ne téléchargent aucune application
  • 9. Taille des applications 9 Les applications stores sont lourdes Les sites web sont extrêmement légers (Facteur 1/500) => Environ 7 min en 3G pour l’application iOS Twitter => Environ 1 s en 3G pour la PWA Twitter
  • 10. Temps d’utilisation App vs Browser 10 Source: Flurry Analytics, comScore, NetMarketShare
  • 11. Conclusions  Le store ne permet pas nécessairement d’avoir de la visibilité :  Beaucoup d’applications (> 2 000 000 sur iOS & Android)  Une grande partie de la visibilité est prise par une petite partie des apps  Les utilisateurs ne téléchargent que très peu d’applications  Mais la présence sur les stores reste encore indispensable dans beaucoup de secteurs, surtout B2C 11
  • 12. Bien mais qu’est-ce qu’une PWA ?
  • 13. PWA c’est :  Un site Web  Un ensemble de Guidelines  Basé sur 3 principes 13 PWA ce n’est pas :  Une application store  Un framework  Une technologie
  • 14. Reliable L’application doit fonctionner quel que soit l’état du réseau 14
  • 15. Fast L’application doit être rapide et réactive 15
  • 16. Engaging L’application doit pouvoir être installée et accessible depuis la home du device 16
  • 17. En détail (basé sur la checklist de Google) L’application doit  Etre exposée via HTTPS  Etre responsive  Fonctionner sans réseau  Charger rapidement même avec un mauvais réseau  Fournir des metadata pour proposer l’ajout d’un raccourci  Fonctionner sur tous les navigateurs  Proposer des transitions entre les pages pendant les navigations 17 https://developers.google.com/web/progressive-web-apps/checklist
  • 19. ServiceWorker  Un fichier JavaScript  Un autre processus dans le navigateur  Dispose d’APIs spécifiques (Cache, Fetch, Messaging, Push) 19
  • 20. DEMO
  • 21. Web App Manifest  Un fichier json  Contient des informations sur l’application  Permet de « pinner » l’application sur mobile 21
  • 22. DEMO
  • 23. Push API  Permet d’envoyer des notifications Push à une application Web  Fonctionne même si l’application n’est pas active  Plusieurs solutions infra pour envoyer des Push Web 23
  • 24. DEMO
  • 25. Conclusions Les PWA offrent une opportunité sans précédent pour les applications mobiles MAIS… le support des navigateurs n’est pas encore prêt les usages ne sont pas encore prêts 25 Excellent aujourd’hui pour du B2B Excellement demain pour du B2C (en général)
  • 26. Merci pour votre attention ! Pour plus d’informations, n’hésitez pas à contacter : William KLEIN – [email protected] Sébastien OLLIVIER – [email protected] 26
  • 27. Suivez l’actualité Infinite Square en direct ! 27 @infinitesquareInfinite Square Infinite Squareblogs.infinitesquare.comwww.infinitesquare.com

Notes de l'éditeur

  • #4: Seb
  • #5: Seb
  • #6: William
  • #7: William
  • #8: William
  • #9: William
  • #10: William
  • #11: William
  • #12: William
  • #13: Seb
  • #14: Seb
  • #15: Seb
  • #16: Seb
  • #17: Seb
  • #18: Seb
  • #19: William
  • #20: William
  • #21: William Montrer le fonctionnement du blog sans connexion Montrer le service worker avec cache offline simple Montrer l’enregistrement du sw Montrer le fonctionnement du blog sans connexion
  • #22: William
  • #23: William Montrer le manifest Montrer (sur device) le pinnage
  • #24: Seb
  • #25: Seb Montrer le code pour souscrire aux push notifs Montrer le code pour envoyer un push (via postman) Montrer le résultat de la notif
  • #26: Seb