Formation PWA, développer des Progressive Web Apps le meilleur du mobile dans vos applications Web


Formation PWA, développer des Progressive Web Apps le meilleur du mobile dans vos applications Web

Catalogue : Technologies Web



Introduction
• Retour sur l'histoire de la mobilité.
• L'impact de la mobilité sur le Web.
• Comparatif forces/faiblesses entre applications mobiles natives et Web.
Les composants de base des PWA
• Un proxy dans le navigateur avec les Service Workers.
• La sécurité imposée avec HTTPS.
• Quel support dans les navigateurs ?
• La dimension "Progressive" dans les PWA.
Le Service Worker en détails
• Rappels sur les principes et API de base : ES6, promises, Fetch...
• Cycle de vie d'un Service Worker.
• L'installation : téléchargement, périmètre d'action (scope).
• La mise à jour.
• Le déclenchement, les événements pris en charge.
Travaux pratiques
Création et installation d'un Service Worker.
Outils pour la mise en œuvre
• Bibliothèques, composants et frameworks : Workbox, frameworks intégrant de base les Service Workers.
• Développement et débogage : outils navigateurs, Lighthouse.
Travaux pratiques
Manipulation des outils navigateurs, de Lighthouse.
API Cache : tolérance de défaillance réseau et offline
• Opérations de base sur l'API Cache depuis un Service Worker.
• Quels contenus peuvent être en cache ?
• Gestion du cycle de vie des contenus en cache.
• Autres moyens de stockage : pas de support localStorage, mais IndexedDB.
• Une SPA ultra rapide avec l'architecture Application Shell.
• Accéder au cache depuis une page.
Travaux pratiques
Mise en place du cache sur ressources statiques, sur pages.
Installation de l'application sur l'appareil
• Le Web App Manifest.
• La Web App Install Banner.
• Comportement des différents navigateurs mobiles et desktop.
Travaux pratiques
Mise au point du Manifest.
Les notifications et le push de données
• L'API Notifications.
• Intégration aux notifications natives de l'OS.
• Gestion d'autorisation par l'utilisateur.
• Pousser des données depuis le serveur avec l'API Push.
• Mise à jour en tâche de fond avec l'API Background Sync.
Travaux pratiques
Mettre en place une notification.
Autres capacités nouvelles sur le Web pour aller plus loin
• Paiement simplifié avec l'API Payment Request.
• Lecture de QR code avec les API getUserMedia/Stream et Shape Detection.
• Réalité virtuelle et réalité augmentée.
Travaux pratiques
Lire un QR code.

 

Fiche de la formation



 Cible :

Toute personne partie prenante dans la réalisation d'un projet Web : chefs de projet, architectes, développeurs.


 Prérequis :

Bonne connaissance de l'intégration Front-End HTML, CSS et JavaScript.


 Durée : 3 jours

 Type : Stage pratique


 Contactez-nous