Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes
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".
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/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 3 Responsive Web Design
« 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/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 4 Philosophie des PWA
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/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 6 Les avantages d’une PWA
« 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/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 7 Des technologies matures issues du web
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/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 8 Les freins à l’adoption des PWA
18/06/2018 PROGRESSIVE 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
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/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 11 Architecture d’une PWA 2/3