Le document traite de l'importance et des avantages des Progressive Web Apps (PWA) par rapport aux applications natives, en soulignant leur légèreté, leur rapidité et leur capacité à fonctionner hors ligne. Il discute également des défis liés à la visibilité des applications sur les stores et présente des statistiques sur l'utilisation des applications. Enfin, il explique les caractéristiques techniques nécessaires pour créer une PWA efficace.

1. 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 ?

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

5. Quelques statistiques pour
démarrer

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

8. 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.

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

18. Et techniquement, comment ça
marche ?

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 – wklein@infinitesquare.com
Sébastien OLLIVIER – sollivier@infinitesquare.com
26

27. Suivez l’actualité Infinite Square en direct !
27
@infinitesquareInfinite Square Infinite Squareblogs.infinitesquare.comwww.infinitesquare.com