A l’issue de la formation le participant sera capable de :
Compréhension et manipulation des concepts associés aux PWA
Manipulation des outils de débogage d’une PWA
- Développement
- Développement web
Formation PWA Progressive Web Applications
Objectifs
Prérequis
Ce cours suppose que vous ayez déjà les bases de de la programmation d’application web (ES6).
Connaissances de base en Git
Développement front-end avec NPM
Installer nodejs (LTS) : https://nodejs.org/
Installer git : http://git-scm.com/
Votre éditeur favori (nous recommandons Visual Studio Code)
Installer Chrome et au moins un autre browser à jour (Edge, Safari, Firefox)
Cette formation ne peut être financée que dans le cadre d’un projet d’entreprise (prise en charge entreprise ou OPCO). Les dossiers à financement personnel et CPF ne sont pas pris en compte.
Public
Développeurs, intégrateurs, architectes logiciel, chefs de projet technique
Dernière mise à jour
Programme mis à jour le 31 janvier 2024
Bon à savoir
Evaluez votre niveau
Pour vous aider à bien choisir votre formation, nous vous proposons soit un entretien avec le formateur soit un test d’évaluation. Cela vous assurera que vous disposez des connaissances nécessaires pour suivre la formation dans des conditions optimales.
Sessions garanties
La majorité de nos sessions proposées en distanciel sont garanties. Elles peuvent être enregistrées à la demande.
Travaux pratiques
Nos formations comprennent de nombreux travaux pratiques pour un meilleur apprentissage (60 % de pratique). Nous proposons également de travailler sur vos données pour une meilleure expérience.
Les Modules
de formation
Module1
Introduction
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
Atelier: Mise en place d’un environnement de développement PWA
Module2
Manipulation des Services Workers
Fonctionnement des services workers
Installation d’un service worker
Compréhension du cycle de vie d’un service worker. Comment agir sur le cycle de vie
Manipulation des events du service worker: event ‘install’, ‘activate’, ‘fetch’
Ateliers:
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’
Module3
Gestion des stratégies de cache
Présentation du concept d’App-shell
Découvrons l’API de cache du service worker
Découverte des stratégies de cache
Découverte du mode offline
Présentation de Workbox
Ateliers:
Mettons en place un app-shell
Rendons notre application disponible hors ligne
Manipulons le cache d’un service worker
Utilisation de workbox pour gérer son cache
Module4
Aller plus loin avec le service worker
Découverte de l’event ‘message’
Découverte de l’évent ‘sync’
Ateliers:
Mise en place d’une communication cross onglets basé sur l’événement ‘message’
Mise en place du background-sync pour l’envoi de messages
Module5
Rendre l’ application installable
Présentation du manifest
Présentation des enjeux de l’installation d’une PWA
Comment rendre une PWA disponible sur les Stores
Atelier: Création d’un manifest et installation de l’application
Module6
Engageons notre utilisateur
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
Ateliers:
Mise en place d’une notification avec Action
Mise en place d’un système de Push notification
Module7
Intégration à la plateforme
Découverte des possibilités d’intégration d’API “Natives” : Geolocalisation, FullScreen
Authentification simplifiée avec webAuthN
PaymentRequest API
Liste des APIs disponibles
Design Responsive
Ateliers:
Utilisation de l’api de geolocalisation, fullscreen
Mise en place d’une authentification WebAuthN
Module8
Améliorer la performance de l’application
Retour sur les formats d’images à utiliser et les techniques associées
Bonne pratiques de la performance web
Présentation du pattern P.R.P.L.
Atelier: Mise en place du P.R.P.L pattern
Module9
Tour des outils pouvant nous aider
Liste d’outils pouvant aider à la réalisation d’une PWA
CLI Angular, Vue, React, …
Présentation de Workbox
Atelier: Audit avec LightHouse CI
Les prochaines
sessions de formation
Sur demande
Vous souhaitez organiser cette formation à une date spécifique ?Contactez-nous en remplissant le formulaire ci-dessous
26 mai 2025
28 juillet 2025
22 septembre 2025
24 novembre 2025
