Sincronización y actualizaciones en segundo plano
Actualice las cachés y sincronice al recuperar la conexión.
Sincronización y actualizaciones en segundo plano es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Mantener actualizadas las cachés
Una aplicación capaz de funcionar sin conexión debe actualizarse correctamente: distribuir recursos nuevos, eliminar los antiguos y volver a intentar las acciones fallidas cuando se recupere la conectividad. Los service workers proporcionan herramientas para las tres tareas.
Nombres de caché versionados
El mecanismo de actualización más sencillo consiste en usar un nombre de caché versionado. Al incrementar la versión se crea una caché nueva y la anterior queda pendiente de limpieza durante la activación.
const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE).then(c => c.addAll(ASSETS))
);
});Limpiar las cachés antiguas
En el evento activate, enumere todos los nombres de caché y elimine los que no correspondan a la versión actual. Esto libera espacio de almacenamiento y elimina los recursos obsoletos.
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then(names =>
Promise.all(
names.filter(n => n !== CACHE)
.map(n => caches.delete(n))
)
)
);
});El worker en espera
De forma predeterminada, un worker nuevo se instala, pero permanece en estado waiting hasta que se cierran todas las páginas controladas por el worker antiguo. Esto evita incompatibilidades de versión durante la sesión.
skipWaiting
self.skipWaiting() indica a un worker en espera que se active inmediatamente y tome el control sin esperar a que se cierren las pestañas. Llámelo en install cuando quiera que las actualizaciones se apliquen de inmediato.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate as soon as installed
});clients.claim
Después de activarse, self.clients.claim() permite que el worker nuevo tome inmediatamente el control de las páginas ya abiertas, en lugar de controlar solo las navegaciones futuras.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Detectar actualizaciones desde la página
La página puede escuchar la llegada de un worker nuevo mediante el evento updatefound del registro y, después, pedir al usuario que vuelva a cargar la página para obtener la versión más reciente.
reg.addEventListener('updatefound', () => {
const sw = reg.installing;
sw.addEventListener('statechange', () => {
if (sw.state === 'installed') {
console.log('new version available - reload to update');
}
});
});Sincronización en segundo plano
La Background Sync API permite aplazar una acción (como enviar un formulario) hasta que el dispositivo tenga conexión. Registre una etiqueta de sincronización y el navegador activará un evento sync cuando haya conexión.
// In the page, after queuing data:
reg.sync.register('send-messages')
.then(() => console.log('sync scheduled'));Gestionar el evento sync
En el service worker, escuche el evento sync y compruebe la etiqueta. Use waitUntil para que el navegador mantenga activo el worker hasta que finalice el reintento.
self.addEventListener('sync', (event) => {
if (event.tag === 'send-messages') {
event.waitUntil(sendQueuedMessages());
}
});Patrón de encolar y sincronizar
Un flujo sin conexión sólido consiste en guardar la acción pendiente en IndexedDB, registrar una sincronización y, en el controlador de sync, leer la cola y enviar cada elemento mediante POST, eliminándolo cuando la operación se complete correctamente.
async function sendQueuedMessages() {
const items = await readQueueFromIndexedDB();
for (const item of items) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(item)
});
}
await clearQueue();
}Resumen de actualizaciones y sincronización
En conjunto, estas funciones hacen que las aplicaciones sean resistentes: las cachés versionadas y su limpieza mantienen los recursos actualizados, skipWaiting/clients.claim controlan el momento de la implementación, y Background Sync completa de forma fiable las acciones cuando el usuario vuelve a estar en línea.
Comprobación rápida
Compruebe su comprensión de las actualizaciones y la sincronización en segundo plano.
Resumen
Ha aprendido sobre la sincronización en segundo plano y las actualizaciones:
- Use nombres de caché versionados y limpie las cachés antiguas en
activate. skipWaitingyclients.claimcontrolan el momento de las actualizaciones.- Detecte las versiones nuevas mediante
updatefound. - Background Sync aplaza las acciones hasta que haya conexión mediante el evento
sync. - Encole las acciones en IndexedDB y vacíe la cola durante la sincronización.
Ha completado el tema Service Workers y almacenamiento en caché sin conexión.
Preguntas frecuentes
¿La lección «Sincronización y actualizaciones en segundo plano» es gratis?
Sí — el texto completo de «Sincronización y actualizaciones en segundo plano» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Sincronización y actualizaciones en segundo plano»?
Actualice las cachés y sincronice al recuperar la conexión. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Sincronización y actualizaciones en segundo plano»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Registro de un Service Worker
- La API Cache
- Estrategias de almacenamiento en caché
- Sincronización y actualizaciones en segundo plano