Enregistrer un Service Worker
Installez et activez un service worker.
Enregistrer un Service Worker est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Qu’est-ce qu’un agent de service ?
Un agent de service est un script exécuté en arrière-plan par le navigateur, séparément de la page. Il agit comme un proxy réseau programmable : il peut intercepter les requêtes, servir des réponses depuis le cache et permettre des expériences hors ligne.
Détection des fonctionnalités
Tous les environnements ne prennent pas en charge les agents de service. Vérifiez la présence de navigator.serviceWorker avant l’enregistrement afin que les anciens navigateurs continuent de fonctionner correctement.
if ('serviceWorker' in navigator) {
// safe to register
}Enregistrer un agent de service
Enregistrez un agent de service en transmettant l’URL de son script à navigator.serviceWorker.register. Cette méthode renvoie une promesse qui se résout en l’objet d’enregistrement.
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));Portée de l’enregistrement
La portée correspond à l’ensemble des URL contrôlées par l’agent. Par défaut, il s’agit du répertoire dans lequel se trouve le script. Un agent situé à /sw.js contrôle l’ensemble du site ; un agent situé à /app/sw.js contrôle uniquement /app/.
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.Définir une portée explicite
Vous pouvez restreindre la portée avec une option, mais vous ne pouvez pas l’élargir au-delà du répertoire du script, sauf si un en-tête spécial est défini sur le serveur.
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});Exigence HTTPS
Les agents de service nécessitent un contexte sécurisé : HTTPS en production. localhost est considéré comme sécurisé pour le développement. Cela empêche les attaquants de détourner le proxy réseau.
L’événement d’installation
La première fois qu’un agent est enregistré, il exécute son événement install. C’est à cet endroit que vous préchargez généralement les ressources essentielles dans le cache afin que l’application fonctionne hors ligne.
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});L’événement d’activation
Après l’installation, l’agent déclenche activate. C’est l’endroit prévu pour nettoyer les anciens caches des versions précédentes avant qu’il ne commence à contrôler les pages.
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});Le cycle de vie
Un agent de service passe par plusieurs états :
- installing — exécution du gestionnaire d’installation
- installed/waiting — prêt, en attente de prendre le contrôle
- activating / activated — contrôle désormais les pages
Par défaut, un nouvel agent attend la fermeture des anciennes pages avant de s’activer.
Intercepter les requêtes
Une fois actif, l’agent reçoit chaque requête réseau de sa portée via l’événement fetch. Vous pouvez répondre depuis le cache, le réseau ou une combinaison des deux.
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});Récapitulatif de l’enregistrement
Pour enregistrer un agent de service : détectez la fonctionnalité, appelez register avec l’URL d’un script, tenez compte de la portée et de l’exigence HTTPS, puis gérez les événements install, activate et fetch dans le script de l’agent.
Vérification rapide
Testez votre compréhension de l’enregistrement d’un agent de service.
Récapitulatif
Vous avez appris à enregistrer un agent de service :
- Détectez la fonctionnalité avec
'serviceWorker' in navigator. register(url, { scope })renvoie une promesse.- La portée correspond par défaut au répertoire du script ; HTTPS est requis.
- Gérez
install,activateetfetchdans l’agent.
Ensuite, vous découvrirez l’API de cache.
Questions Fréquemment Posées
La leçon « Enregistrer un Service Worker » est-elle gratuite ?
Oui — le texte complet de « Enregistrer un Service Worker » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Enregistrer un Service Worker » ?
Installez et activez un service worker. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Enregistrer un Service Worker » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Enregistrer un Service Worker
- L’API Cache
- Stratégies de mise en cache
- Synchronisation et mises à jour en arrière-plan