Synchronisation et mises à jour en arrière-plan
Mettez à jour les caches et synchronisez-les lors du retour en ligne.
Synchronisation et mises à jour en arrière-plan est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Garder les caches à jour
Une application utilisable hors ligne doit se mettre à jour correctement : distribuer de nouvelles ressources, supprimer les anciennes et réessayer les actions échouées lorsque la connexion revient. Les service workers fournissent des outils pour ces trois tâches.
Noms de cache versionnés
Le mécanisme de mise à jour le plus simple consiste à utiliser un nom de cache versionné. L’incrémentation de la version crée un cache vierge et laisse l’ancien être nettoyé lors de l’activation.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Nettoyer les anciens caches
Dans l’événement activate, répertoriez tous les noms de cache et supprimez ceux qui ne correspondent pas à la version actuelle. Cela libère de l’espace de stockage et supprime les ressources obsolètes.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});Le worker en attente
Par défaut, un nouveau worker s’installe, mais reste en état d’attente jusqu’à la fermeture de toutes les pages contrôlées par l’ancien worker. Cela évite les incompatibilités de version au milieu d’une session.
skipWaiting
self.skipWaiting() indique à un worker en attente de s’activer immédiatement et de prendre le contrôle sans attendre la fermeture des onglets. Appelez-le dans install lorsque vous voulez que les mises à jour s’appliquent immédiatement.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Après son activation, self.clients.claim() permet au nouveau worker de prendre immédiatement le contrôle des pages déjà ouvertes, au lieu de ne contrôler que les futures navigations.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Détecter les mises à jour depuis la page
La page peut écouter l’arrivée d’un nouveau worker via l’événement updatefound de l’enregistrement, puis inviter l’utilisateur à recharger la page pour obtenir la dernière version.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Synchronisation en arrière-plan
L’interface de synchronisation en arrière-plan vous permet de différer une action, comme l’envoi d’un formulaire, jusqu’à ce que l’appareil dispose d’une connexion. Vous enregistrez une balise de synchronisation, puis le navigateur déclenche un événement sync lorsque la connexion est rétablie.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Gérer l’événement sync
Dans le service worker, écoutez sync et faites correspondre la balise. Utilisez waitUntil afin que le navigateur maintienne le worker actif jusqu’à la fin de la nouvelle tentative.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Modèle mettre en file d’attente puis synchroniser
Un flux hors ligne robuste consiste à enregistrer l’action en attente dans IndexedDB, à enregistrer une synchronisation, puis, dans le gestionnaire sync, à lire la file d’attente et à envoyer chaque élément avec POST, en le supprimant en cas de réussite.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Récapitulatif des mises à jour et de la synchronisation
Ensemble, ces fonctionnalités rendent les applications résistantes : les caches versionnés et leur nettoyage gardent les ressources à jour, skipWaiting/clients.claim contrôlent le moment du déploiement, et la synchronisation en arrière-plan termine de manière fiable les actions lorsque l’utilisateur est de nouveau en ligne.
Vérification rapide
Vérifiez votre compréhension des mises à jour et de la synchronisation en arrière-plan.
Récapitulatif
Vous avez découvert la synchronisation en arrière-plan et les mises à jour :
- Utilisez des noms de cache versionnés et nettoyez les anciens caches lors de
activate. skipWaitingetclients.claimcontrôlent le moment des mises à jour.- Détectez les nouvelles versions via
updatefound. - La synchronisation en arrière-plan diffère les actions jusqu’à la reconnexion via l’événement
sync. - Placez les actions en file dans IndexedDB, puis videz la file lors de la synchronisation.
Vous avez terminé le cours sur les Service Workers et la mise en cache hors ligne.
Questions Fréquemment Posées
La leçon « Synchronisation et mises à jour en arrière-plan » est-elle gratuite ?
Oui — le texte complet de « Synchronisation et mises à jour en arrière-plan » 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 « Synchronisation et mises à jour en arrière-plan » ?
Mettez à jour les caches et synchronisez-les lors du retour en ligne. 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 4 sur 4.
Combien de temps prend la leçon « Synchronisation et mises à jour en arrière-plan » ?
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