PWA – Progressive Web Applications
Des bases solides pour développer des progressive web applications.
Ce que vous allez apprendre
- Comprendre les concepts des PWA et leur environnement de développement
- Maîtriser les Service Workers pour les capacités hors ligne et la gestion des événements
- Mettre en œuvre des stratégies de cache pour la performance et l'accès hors ligne
- Utiliser les fonctionnalités avancées des Service Workers comme les notifications push et la synchronisation en arrière-plan
- Rendre une application installable avec un Web App Manifest
- Intégrer des fonctionnalités de la plateforme native (Géolocalisation, Notifications)
- Améliorer la performance de l'application en utilisant les meilleures pratiques (pattern PRPL)
Prérequis
- Bases de la programmation d'application web (ES6)
- Connaissances de base en Git
- Expérience en développement front-end avec NPM
- Avoir installé nodejs (LTS), git, un éditeur de code (VS Code recommandé) et des navigateurs à jour (Chrome, Edge, Safari, Firefox)
Public cible
- Développeurs, Intégrateurs, Architectes logiciel, Chefs de projet technique
Programme de la Formation
9 modules pour maîtriser les fondamentaux
Sujets abordés
- →Origines du concept
- →Définition du terme F.I.R.E.
- →Environnement de développement et de débogage
- →Point sur les exercices à venir
- →Point sur la sécurité dans les applications web
Activités
Mise en place d'un environnement de développement PWA
Sujets abordés
- →Fonctionnement des services workers
- →Installation d'un service worker
- →Compréhension du cycle de vie d'un service worker et comment agir sur le cycle de vie
- →Manipulation des events du service worker: event ‘install’, ‘activate', ‘fetch'
Activités
Installer un premier service worker
Débogage d'une PWA
Prendre le contrôle des événements
Découvrir les événements ‘install', 'activate' et 'fetch'
Sujets abordés
- →Présentation du concept d'App-shell
- →Découverte de l'API de cache du service worker
- →Découverte des stratégies de cache
- →Découverte du mode offline
- →Présentation de Workbox
Activités
Mettre en place un app-shell
Rendre notre application disponible hors ligne
Manipuler le cache d'un service worker
Utilisation de Workbox pour gérer son cache
Sujets abordés
- →Découverte de l'event ‘message’
- →Découverte de l'évent 'sync'
Activités
Mise en place d'une communication cross onglets basée sur l'événement 'message'
Mise en place du background-sync pour l'envoi de messages
Sujets abordés
- →Présentation du manifest
- →Présentation des enjeux de l'installation d'une PWA
- →Comment rendre une PWA disponible sur les Stores
Activités
Création d'un manifest et installation de l'application
Sujets abordés
- →Présentation des concepts d'UX de l'engagement utilisateur
- →Utilisation de l'événement ‘push' du service worker
- →Découverte des notifications web
- →Comment débugger une notification
Activités
Mise en place d'une notification avec Action
Mise en place d'un système de Push notification
Sujets abordés
- →Découverte des possibilités d'intégration d’API “Natives” : Géolocalisation, FullScreen
- →Authentification simplifiée avec webAuthN
- →PaymentRequest API
- →Liste des APIs disponibles
- →Design Responsive
Activités
Utilisation de l'api de géolocalisation, fullscreen
Mise en place d'une authentification WebAuthN
Sujets abordés
- →Retour sur les formats d'images à utiliser et les techniques associées
- →Bonnes pratiques de la performance web
- →Présentation du pattern P.R.P.L.
Activités
Mise en place du P.R.P.L pattern
Sujets abordés
- →Liste d'outils pouvant aider à la réalisation d'une PWA
- →CLI Angular, Vue, React, ...
- →Présentation de Workbox
Activités
Audit avec LightHouse CI
Processus Qualité
L'engagement de SFEIR Institute : une démarche d'excellence pour garantir la qualité et la réussite de toutes nos formations. En savoir plus sur notre démarche qualité
- Lectures / Apports théoriques (Slides) — Présentation de concepts via des supports visuels (PowerPoint, PDF).
- Démonstration technique (Démos) — Le formateur réalise une manipulation ou une procédure devant les apprenants.
- Laboratoires dirigés (Labs) — Mise en pratique guidée sur logiciel, machine ou environnement technique.
L'atteinte des objectifs de la formation est évaluée à plusieurs niveaux pour garantir la qualité de la prestation :
- Évaluation continue des acquis : Vérification des connaissances tout au long de la formation via des méthodes participatives (en fonction de la formation: quiz, exercices pratiques, mises en situation) sous la supervision du formateur.
- Mesure de la progression : Dispositif d'auto-évaluation comparatif comprenant un diagnostic initial pour situer le niveau de départ, suivi d'une évaluation finale pour valider l'évolution des compétences.
- Évaluation de la qualité : Questionnaire de satisfaction en fin de session pour mesurer la pertinence et l'efficacité de la formation ressentie par les participants.
Prochaines sessions
Former plusieurs collaborateurs
- Tarifs dégressifs (plusieurs places)
- Session privée ou sur-mesure
- En présentiel ou à distance