Bénéficier de la souplesse et la légèreté des technologies du Web, avec la qualité et l’intégration au terminal mobile du développement mobile "Natif". CC-BY-ND-4.0 https://cc.ascribe.io/app/pieces/49070

1. Version du
Progressive Web Apps
CRÉER DES APPLICATIONS WEB ET MOBILES MULTIPLATEFORMES
18/06/2018

2. 1. Introduction
Progressive Web App (PWA) ≠ Responsive Web Design (RWD)
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 2

3. Le Responsive Web Design est un bon moyen
pour faire un premier pas en direction des terminaux mobiles.
Dans un contexte totalement « mobile », il a ses limites :
poids et chargement des pages, complexité du code,
et expérience utilisateur en situation de mobilité.
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 3
Responsive Web Design

4. « Bénéficier de la souplesse et la légèreté du Web,
avec la qualité et l’intégration au terminal mobile du Natif. »
« Une Progressive Web App se doit d’être
fiable, rapide et engageante. »
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 4
Philosophie des PWA

5. 2. Forces & faiblesses
Une alternative fiable aux applications natives ?
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 5

6. Distribution hors des boutiques d’applications
Accès direct depuis une URL
Icône sur l’écran d’accueil du mobile
Mises à jour transparentes (et coût de maintenance moindre)
L’apparence et la sensation d’une application mobile « native »
Un code unique pour tous les supports (iOS/Android & Desktop)
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 6
Les avantages d’une PWA

7. « Un site internet, responsive, avec des transitions entre les pages »
Mobile-first (+ Google AMP)
SEO-Friendly (Métadonnées, données structurées, …)
Affichage plein écran (sans navigateur web)
Mode déconnecté (cache et stockage)
Protocole HTTPS
Exploitation des composants matériels et capteurs du terminal
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 7
Des technologies matures issues du web

8. Le format et sa compatibilité (mobile) avec les navigateurs
et systèmes d’exploitation sont en cours de développement.
Il manque un niveau suffisant de compatibilité avec les fonctions natives
des appareils mobiles : Contacts, Bluetooth/NFC, Audio et GPS.
… et ne figurent dans aucune boutique d’application ! 😉
(ou lire cet article : « I built a Progressive Web App and published it in 3 app stores. Here’s what I learned »)
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 8
Les freins à l’adoption des PWA

9. 3. Eléments clés
Différencier le contenant et le contenu
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 9

10. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 10
Architecture d’une PWA 1/3
APP SHELL
HTML / CSS / JavaScript
Chargement rapide
Mise en cache
Affichage dynamique du contenu

11. SERVICE WORKER + PUSH API
Fichier JavaScript
Scripts en arrière-plan du navigateur (synchronisation silencieuse)
APIs spécifiques : Cache, Data fetching, Messaging, Push…
Les Services Workers bientôt supportés par tous les navigateurs mobiles ! 😲
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 11
Architecture d’une PWA 2/3

12. APP MANIFEST + APP BANNER
Fichier JSON
Ajout de l’application sur l’écran d’accueil (bannière)
Icône (favicon) + Splashscreen (ou aplat de couleur)
Mode d’affichage portrait ou paysage (…ou les deux !)
Option plein-écran (indépendante du navigateur web)
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 12
Architecture d’une PWA 3/3

13. 4. Cas d'utilisation
Ils sont passés en Progressive Web App…
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 13

14. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 14

15. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 15

16. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 16

17. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 17

18. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 18

19. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 19
Twitter Lite

20. 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 20
…et bien d’autres !
Starbucks Coffee
KFC
Google I/O
Telegram
Flipboard
Code.NASA.gov

21. 4. Ressources
Documentation et informations
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 21

22. blog.twitter.com 06/04/2017
1and1.fr/digitalguide 06/04/2017
slideshare.net/fredcavazza 28/09/2017
slideshare.net/sebastieno 09/11/2017
fredcavazza.net 11/02/2018
slideshare.net/ovronaz 12/02/2018
visualapps.fr
18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 22
Références
developers.google.com/checklist
developers.google.com/showcase
blog.goodbarber.com
medium.freecodecamp.org
progressive-web-apps.fr
pwa.rocks
outweb.io
mobizel.com
Aller plus loin

23. Version du
Merci
18/06/2018