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

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