Blog de Gonzalo

Un Service Worker en JavaScript es un script que el navegador ejecuta en segundo plano, separado de la página web principal, para realizar tareas como:

• 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);
          })
      );
  });
  

En el ejemplo anterior, el Service Worker se instala, almacena en caché index.html y styles.css, e intercepta solicitudes para devolver los recursos desde el caché si están disponibles.

Limitaciones

• 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).

Los Service Worker son una herramienta poderosa para mejorar la experiencia de usuario en aplicaciones web modernas, especialmente en entornos con conexiones inestables.

Compartir en twitter