Registro y ciclo de vida de un Service Worker
Registre un script de Service Worker, comprenda los eventos del ciclo de vida install, activate y fetch y use skipWaiting y clients.claim.
Registro y ciclo de vida de un Service Worker es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es un Service Worker?
Un Service Worker es un archivo JavaScript que se ejecuta en un worker independiente del navegador (no en el hilo principal) e intercepta las solicitudes de red de su origen. Es el motor de las PWA sin conexión, las notificaciones push y la sincronización en segundo plano.
Registrar un Service Worker
Regístrelo desde el script principal. Los service workers requieren HTTPS, excepto en localhost.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}Ámbito
Un service worker controla las solicitudes dentro de su ámbito (el directorio desde el que se sirve). /sw.js en la raíz lo controla todo. Un SW en /app/sw.js solo controla /app/*.
Ciclo de vida: install → activate → fetch
Hay tres eventos fundamentales: install (se ejecuta una vez y configura las cachés), activate (se ejecuta una vez y limpia las cachés antiguas) y fetch (se ejecuta en cada solicitud y decide entre la caché y la red).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
De forma predeterminada, un SW actualizado espera a que se cierren todas las pestañas antes de activarse. self.skipWaiting() en el controlador de instalación fuerza la activación inmediata: las actualizaciones son más rápidas, pero existe el riesgo de mezclar recursos antiguos y nuevos.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
Después de activarse, un SW nuevo no controla las páginas que se cargaron antes. self.clients.claim() en el controlador de activación toma el control inmediatamente.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Actualizar el Service Worker
Los navegadores comprueban si hay un sw.js nuevo en cada navegación (con una antigüedad máxima de 24 h). Si el contenido del archivo ha cambiado (es distinto byte a byte), se instala como un SW nuevo y espera para activarse. Recargue la página para iniciar la activación.
Detectar actualizaciones desde la aplicación
Escuche updatefound para mostrar un aviso de actualización.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});Anular el registro
Para detener un service worker descontrolado (por un error durante el desarrollo), anule su registro.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});DevTools del navegador
Chrome DevTools → Application → Service Workers muestra los SW registrados y permite anular su registro, simular Update on reload y recorrer los eventos del ciclo de vida.
Errores habituales
1) El archivo del SW debe estar en el ámbito raíz o en uno superior. 2) Se requiere HTTPS. 3) Los cambios del SW necesitan una recarga completa durante el desarrollo. 4) Almacene en caché una vez y actualice mediante versionado, no dejando que la caché crezca indefinidamente. 5) No almacene en caché las solicitudes POST (no son compatibles).
Workbox: la biblioteca de productividad
Workbox, de Google, abstrae el ciclo de vida y proporciona estrategias de caché listas para usar. La mayoría de las PWA de producción utilizan Workbox en lugar de código de SW escrito a mano.
Comprobación rápida
¿Qué hace self.skipWaiting() dentro del controlador install de un service worker?
Resumen: ciclo de vida del Service Worker
Worker de JavaScript que intercepta las solicitudes de red de su origen. Regístrelo mediante navigator.serviceWorker.register. Ciclo de vida: install (configura las cachés), activate (las limpia) y fetch (intercepta las solicitudes). Use skipWaiting + clients.claim para obtener actualizaciones inmediatas. Escuche updatefound para mostrar un aviso a los usuarios. Workbox abstrae el código repetitivo. Se requiere HTTPS, excepto en localhost.
Preguntas frecuentes
¿La lección «Registro y ciclo de vida de un Service Worker» es gratis?
Sí — el texto completo de «Registro y ciclo de vida de un Service Worker» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Registro y ciclo de vida de un Service Worker»?
Registre un script de Service Worker, comprenda los eventos del ciclo de vida install, activate y fetch y use skipWaiting y clients.claim. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 2 de 4.
¿Cuánto tiempo toma la lección «Registro y ciclo de vida de un Service Worker»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- El manifiesto de la aplicación web
- Registro y ciclo de vida de un Service Worker
- Estrategias de caché sin conexión: CacheFirst y NetworkFirst
- Notificaciones push