Registro de un Service Worker
Instale y active un service worker.
Registro de un Service Worker es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 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.
¿Qué es un service worker?
Un service worker es un script que el navegador ejecuta en segundo plano, separado de la página. Actúa como un proxy de red programable: puede interceptar solicitudes, servir respuestas almacenadas en caché y habilitar experiencias sin conexión.
Detección de funcionalidades
No todos los entornos admiten service workers. Compruebe si existe navigator.serviceWorker antes de registrarlo para que los navegadores antiguos sigan funcionando correctamente.
if ('serviceWorker' in navigator) {
// safe to register
}Registro
Registre un service worker pasando la URL de su script a navigator.serviceWorker.register. Esto devuelve una Promise que se resuelve con el objeto de registro.
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));Ámbito del registro
El scope es el conjunto de URL que controla el worker. De forma predeterminada, es el directorio en el que se encuentra el script. Un worker en /sw.js controla todo el sitio; uno en /app/sw.js controla únicamente /app/.
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.Establecer un ámbito explícito
Puede restringir el ámbito mediante una opción, pero no puede ampliarlo más allá del directorio del script a menos que el servidor establezca un encabezado especial.
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});Requisito de HTTPS
Los service workers requieren un contexto seguro: HTTPS en producción. localhost se considera seguro durante el desarrollo. Esto evita que los atacantes secuestren el proxy de red.
El evento install
La primera vez que se registra un worker, ejecuta su evento install. Normalmente, aquí se precargan en caché los recursos esenciales para que la aplicación funcione sin conexión.
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});El evento activate
Después de la instalación, el worker desencadena activate. Este es el lugar adecuado para limpiar las cachés antiguas de versiones anteriores antes de que empiece a controlar las páginas.
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});El ciclo de vida
Un service worker pasa por varios estados:
- installing — ejecutando el controlador de instalación
- installed/waiting — listo y a la espera de tomar el control
- activating / activated — controlando ya las páginas
De forma predeterminada, un worker nuevo espera a que se cierren las páginas antiguas antes de activarse.
Interceptar solicitudes
Una vez activo, el worker recibe todas las solicitudes de red de su ámbito mediante el evento fetch. Puede responder desde la caché, desde la red o combinando ambas opciones.
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});Repaso del registro
Para registrar un service worker: detecte la funcionalidad, llame a register con la URL de un script, tenga en cuenta el ámbito y el requisito de HTTPS, y gestione los eventos install, activate y fetch dentro del script del worker.
Comprobación rápida
Compruebe su comprensión del registro de un service worker.
Repaso
Ha aprendido a registrar un service worker:
- Detecte la funcionalidad mediante
'serviceWorker' in navigator. register(url, { scope })devuelve una Promise.- El ámbito predeterminado es el directorio del script; se requiere HTTPS.
- Gestione
install,activateyfetchen el worker.
A continuación, la Cache API.
Preguntas frecuentes
¿La lección «Registro de un Service Worker» es gratis?
Sí — el texto completo de «Registro 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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Registro de un Service Worker»?
Instale y active un service worker. 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 1 de 4.
¿Cuánto tiempo toma la lección «Registro 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 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