Téléchargé parMathieu Molinaro
Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes
Les Progressive Web Apps (PWA) offrent une alternative aux applications natives en combinant les avantages du web et des fonctionnalités mobiles, tout en permettant une distribution directe sans passer par les boutiques d'applications. Elles privilégient la performance, la fiabilité et une expérience utilisateur optimale grâce à des technologies comme le service worker et les API spécifiques. Malgré leurs nombreux avantages, leur adoption est freinée par des limitations liées à la compatibilité avec les fonctionnalités natives des appareils.
Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes
- 1. Version du Progressive WebApps CRÉER DES APPLICATIONS WEB ET MOBILES MULTIPLATEFORMES 18/06/2018
- 2. 1. Introduction Progressive WebApp (PWA) ≠ Responsive Web Design (RWD) 18/06/2018PROGRESSIVE WEB APPS : Créer des applications multiplateformes 2
- 3. Le Responsive WebDesign 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 dela 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 desboutiques 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 siteinternet, 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 etsa 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érencierle 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 Ilssont 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 etinformations 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/fredcavazza28/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.