Introduction : comprendre les applications web progressives
Une PWA, ou application web progressive, est un site web conçu pour offrir une expérience fluide sur ordinateur et mobile. Elle peut notamment être installée sur l’écran d’accueil, fonctionner dans certaines conditions sans connexion et envoyer des notifications lorsque le navigateur et les choix de l’utilisateur le permettent. Elle reste accessible via une adresse web, sans imposer systématiquement un passage par un magasin d’applications.
En deux jours, vous découvrirez les principes qui rendent une PWA utile, puis vous les appliquerez à un petit projet. L’objectif n’est pas d’ajouter des fonctionnalités pour leur seul effet, mais de répondre à un besoin concret : accès rapide à un service, consultation de contenus en déplacement ou continuité d’usage lorsque le réseau est instable.
Module 1 : poser les bases d’un projet PWA
Identifier le besoin et concevoir l’expérience
Vous apprendrez à distinguer une PWA pertinente d’un site qui n’a pas besoin de fonctionnalités supplémentaires. Nous examinerons les attentes des utilisateurs, les appareils visés et les situations d’utilisation : connexion lente, usage à une main, accès fréquent à une information ou reprise d’une tâche. Vous découvrirez aussi les notions de conception adaptative et de performance qui contribuent à une expérience convaincante.
À partir d’un exemple de service de réservation, nous préciserons ce que l’utilisateur doit pouvoir faire sur mobile et ce qui peut rester une fonctionnalité secondaire. Ce cadrage permet de prioriser les besoins avant d’écrire du code.
Exercice pratique : rédiger le parcours principal d’un utilisateur et définir les fonctionnalités prioritaires d’une petite PWA, par exemple un catalogue consultable sur téléphone.
Module 2 : créer une interface web adaptée au mobile
Construire une base fiable et accessible
Vous travaillerez sur la structure HTML, les styles CSS et les interactions JavaScript qui composent l’interface. L’accent sera mis sur une mise en page responsive, des contrôles faciles à utiliser sur écran tactile, une navigation claire et des contenus lisibles. Nous aborderons également les repères d’accessibilité utiles au quotidien : intitulés compréhensibles, ordre de navigation cohérent et prise en compte des différentes façons d’interagir avec une page.
Une interface installable n’est pas nécessairement une bonne interface mobile. Vous apprendrez à vérifier les comportements sur plusieurs tailles d’écran et à éviter les obstacles fréquents, comme les boutons trop rapprochés ou les formulaires difficiles à remplir.
Exercice pratique : transformer une page existante ou un écran fourni en interface mobile responsive, puis vérifier son parcours avec le clavier et un navigateur mobile.
Module 3 : préparer l’installation avec le manifeste web
Déclarer l’identité et le comportement de l’application
Le manifeste web décrit des informations importantes pour l’installation : nom de l’application, icônes, couleurs et page de démarrage. Vous apprendrez à créer ce fichier, à le relier au site et à vérifier que ses éléments correspondent à l’identité visuelle et à l’usage prévu. Nous verrons comment l’installation dépend du navigateur, de l’appareil et de la configuration : il est donc important de ne pas promettre un comportement identique partout.
Nous étudierons aussi les choix d’affichage, comme l’ouverture dans une fenêtre dédiée, et la préparation des icônes nécessaires. L’exemple fil rouge sera une application de consultation d’horaires, pensée pour un accès rapide depuis l’écran d’accueil.
Exercice pratique : rédiger un manifeste web pour le projet de formation, ajouter les ressources nécessaires et contrôler les informations détectées par le navigateur.
Module 4 : mettre en place un service worker et gérer le mode hors ligne
Comprendre les stratégies de cache
Le service worker est un script exécuté en arrière-plan par le navigateur. Il peut intercepter certaines requêtes et contribuer à servir des ressources mises en cache. Vous découvrirez son cycle de vie, son enregistrement, sa mise à jour et les précautions à prendre lorsqu’une nouvelle version de l’application est déployée.
Nous comparerons des stratégies de cache adaptées à différents contenus : ressources de l’interface, pages consultées récemment ou données qui doivent rester fraîches. Une page d’information peut être disponible hors ligne, tandis qu’un prix ou un stock doit signaler clairement que les données ne sont peut-être pas à jour. Vous apprendrez à prévoir un message compréhensible en cas d’absence de connexion plutôt qu’un écran vide.
Exercice pratique : mettre en cache les ressources essentielles du projet et tester les états avec et sans réseau, en observant le comportement après une mise à jour.
Module 5 : tester, améliorer et préparer la mise en production
Vérifier la qualité sur différents appareils
Une PWA doit être testée au-delà de son ordinateur de développement. Vous mettrez en place des vérifications sur plusieurs tailles d’écran et dans des conditions réseau variées. Nous aborderons les outils du navigateur pour repérer les erreurs de chargement, contrôler le manifeste et le service worker, et examiner les performances. Les résultats servent à orienter des améliorations concrètes, pas à rechercher un score isolé.
Vous apprendrez à tester l’installation lorsque l’environnement le permet, à vérifier les permissions et à expliquer les limites d’une fonctionnalité. Les notifications, par exemple, ne sont pertinentes que si elles sont utiles, demandées avec discernement et prises en charge par le navigateur utilisé.
Exercice pratique : établir une courte grille de tests, relever les problèmes sur le projet fil rouge, puis choisir trois améliorations à traiter avant sa mise en ligne.
À retenir
Créer une PWA consiste à associer une interface web adaptée, un manifeste correctement configuré et, lorsque le besoin le justifie, un service worker qui gère les ressources et les situations hors ligne. La qualité dépend aussi des tests, de la clarté des messages et de la prise en compte des différences entre navigateurs et appareils.
Pour aller plus loin
Après la formation, poursuivez en appliquant les mêmes principes à un projet réel : définissez un besoin utilisateur, testez les fonctionnalités progressivement et documentez les comportements attendus en ligne et hors ligne. Vous pourrez ensuite approfondir la gestion des données, les notifications ou l’automatisation des tests selon les besoins de votre application.
