Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes

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

CC-BY-ND-4.0
https://cc.ascribe.io/app/pieces/49070

8ce21b4bd44517f650320f16e9b246d7?s=128

Mathieu Molinaro

June 18, 2018
Tweet

More Decks by Mathieu Molinaro

Other Decks in Technology

Transcript

  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/2018 PROGRESSIVE 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/2018 PROGRESSIVE 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/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 4 Philosophie des PWA
  5. 2. Forces & faiblesses Une alternative fiable aux applications natives

    ? 18/06/2018 PROGRESSIVE 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/2018 PROGRESSIVE 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/2018 PROGRESSIVE 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/2018 PROGRESSIVE 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/2018

    PROGRESSIVE WEB APPS : Créer des applications multiplateformes 9
  10. 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
  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/2018 PROGRESSIVE 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/2018 PROGRESSIVE 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/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 13
  14. 18/06/2018 PROGRESSIVE WEB APPS : Créer des applications multiplateformes 14

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

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

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

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

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

    Twitter Lite
  20. 18/06/2018 PROGRESSIVE 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/2018 PROGRESSIVE 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/2018 PROGRESSIVE 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