Le Service Worker (PWA) : Le Moteur Offline de votre App
Un Service Worker est le cœur technologique d'une PWA (Progressive Web App). Il s'agit d'un script JavaScript qui s'exécute en arrière-plan dans le navigateur de l'utilisateur, de manière totalement indépendante de la page web.
Il agit comme un proxy (un intermédiaire) entre votre application web (générée par Symfony), le navigateur et le réseau (Internet).
⚙️ Comment ça marche ? (La magie de l'interception)
Contrairement au JavaScript classique (comme Stimulus ou Vanilla JS) qui manipule le DOM de votre page Twig, le Service Worker n'a pas accès à l'interface. Son rôle est sous le capot :
- L'installation et l'activation : Lors de la première visite sur votre site Symfony, le navigateur télécharge, installe et active le Service Worker en tâche de fond.
- L'interception des requêtes (
fetch) : Une fois activé, il "écoute" absolument toutes les requêtes réseau (HTTP) qui partent de votre application vers votre serveur Symfony.
- La stratégie de cache : Lorsqu'une requête est émise (ex: charger une page, une API, une image), le Service Worker décide du comportement à adopter :
- Network First : Il cherche d'abord la réponse sur le serveur. Si ça échoue (pas de réseau), il sert la version en cache.
- Cache First : Il sert immédiatement la version en cache (chargement instantané), et va éventuellement chercher la mise à jour sur le serveur en arrière-plan.
📊 Les Super-Pouvoirs du Service Worker
- Le mode Hors-Ligne (Offline) : C'est sa fonction numéro une. Même si l'utilisateur est dans le métro ou en forêt sans réseau, l'application s'ouvre et affiche les données en cache au lieu de la page d'erreur classique du navigateur.
- Des performances explosives : En servant les assets (vos fichiers CSS et JS gérés par AssetMapper) ou même certaines pages HTML directement depuis l'appareil de l'utilisateur, le temps de chargement devient quasi nul.
- Les Notifications Push : Il permet de recevoir et d'afficher des notifications système sur le smartphone ou le PC de l'utilisateur, même si l'application web est fermée.
- La Synchronisation en arrière-plan (Background Sync) : Si l'utilisateur valide un formulaire Symfony alors qu'il n'a pas de connexion, le Service Worker met l'action en attente et l'envoie automatiquement au serveur dès que le réseau revient.
🛠️ Comment l'intégrer dans un projet Symfony ?
Bien que le Service Worker soit du pur JavaScript côté client, son intégration côté Symfony est de plus en plus fluide :
- L'approche manuelle : Vous placez votre fichier
sw.js dans le dossier public/ de Symfony. Ensuite, vous l'enregistrez (le register) via votre JavaScript principal géré par AssetMapper ou Webpack Encore.
- L'approche "Bundle" (Recommandée) : L'écosystème Symfony propose d'excellents outils, notamment le très populaire
spomky-labs/pwa-bundle. Ce bundle Symfony génère dynamiquement votre fichier Manifest et votre Service Worker à partir d'une simple configuration YAML en PHP. Plus besoin de coder toute la logique de mise en cache complexe à la main, le bundle le fait pour vous !