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

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  23. Version du
    Merci
    18/06/2018

    View Slide