SERVICE WORKERS EN JAVASCRIPT: QUÉ SON Y CÓMO UTILIZARLOS

• Gestión de caché: Almacena recursos (HTML, CSS, JS, imágenes, etc.) para habilitar aplicaciones web offline o mejorar la velocidad de carga (por ejemplo, en Progressive Web Apps).
• Interceptación de solicitudes de red: Actúa como un proxy entre la aplicación y la red, permitiendo modificar o almacenar en caché las respuestas a solicitudes HTTP.
• Notificaciones push: Maneja notificaciones push y acciones en segundo plano, incluso cuando la página no está abierta.
• Sincronización en segundo plano: Ejecuta tareas programadas, como sincronizar datos cuando la conexión a internet está disponible.

Características clave

• Ejecución en segundo plano: No está vinculado al DOM, por lo que no puede interactuar directamente con la interfaz de la página.
• Ciclo de vida: Se instala, activa y puede manejar eventos como fetch, push o sync.
• Seguridad: Solo funciona en contextos seguros (HTTPS) para evitar ataques de tipo "man-in-the-middle".
• Event-driven: Responde a eventos específicos, como solicitudes de red o mensajes desde la página.

Ejemplo básico

• Registrar un service worker:
  
  

  //Código javascript
  if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/ServiceWorker.js')
     .then(reg => console.log('Service Worker registrado', reg))
     .catch(err => console.error('Error al registrar', err));
  }
  

• Archivo ServiceWorker.js (Service Worker):
  
  

  //Código javascript
  self.addEventListener('install', event => {
      console.log('Service Worker instalado');
      // Cachear recursos
      event.waitUntil(
     caches.open('mi-cache').then(cache => {
    return cache.addAll(['/index.html', '/styles.css']);
     })
      );
  });
  
  self.addEventListener('fetch', event => {
      event.respondWith(
     caches.match(event.request).then(response => {
    return response || fetch(event.request);
     })
      );
  });
  

• No accede al DOM ni a ciertas APIs del navegador como "window".
• Su uso está restringido a navegadores modernos que lo soporten.
• Requiere HTTPS (excepto en localhost para desarrollo).