Service Worker

Un Service Worker es un script en segundo plano registrado en el navegador que funciona independientemente de un sitio web abierto. Puede interceptar solicitudes de red, almacenar datos en caché offline y, lo más importante para el marketing, recibir eventos Push entrantes y mostrar notificaciones, incluso cuando la pestaña del navegador está cerrada.

¿Qué es un Service Worker?

Un Service Worker es un script JavaScript registrado en el navegador que se ejecuta como Worker completamente separado del sitio web. Mientras que una página web normal termina cuando se cierra la pestaña, el Service Worker sigue ejecutándose en segundo plano, incluso sin pestañas abiertas. Es la base técnica de las Progressive Web Apps (PWA) modernas y la única forma de recibir notificaciones Push en el navegador.

Los Service Workers fueron introducidos por Google en 2014 y hoy están disponibles en todos los navegadores modernos (Chrome, Edge, Firefox, Safari, Samsung Internet, Opera). Sustituyen a la antigua y actualmente obsoleta API de Application Cache.

Ciclo de vida de un Service Worker

1. Registro: el sitio web llama a navigator.serviceWorker.register('/sw.js'). El navegador carga el script y lo analiza.
2. Instalación: el Service Worker ejecuta su evento install. Normalmente aquí se prealmacenan recursos en caché.
3. Activación: tras la instalación correcta, el navegador activa el Service Worker. Las versiones antiguas se desconectan en su caso.
4. Inactivo / Activo: el Service Worker descansa en segundo plano y solo se reactiva cuando llega un evento (Push, Sync, Fetch).
5. Terminación: los navegadores pueden detener los Service Workers inactivos en cualquier momento para ahorrar memoria. Ante el siguiente evento el Worker se reinicia.

Service Worker y notificaciones Push

Para las notificaciones Browser Push el Service Worker es imprescindible: es el único receptor del evento push. En cuanto llega un mensaje Push cifrado del servicio Push, el navegador activa el Service Worker y le entrega el evento:

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      badge: data.badge,
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

La notificación del sistema aparece incluso cuando la pestaña del navegador está cerrada. Si el usuario hace clic en ella, el navegador abre la URL de destino.

Funcionalidad offline y caché

Una segunda función principal del Service Worker: interceptar solicitudes de red mediante el evento fetch. Así los sitios web pueden usarse también sin conexión (patrón PWA), almacenando en caché recursos estáticos y respuestas de API. Para sitios web de pymes sin pretensiones de app, Push es el caso de uso principal; las funciones PWA son opcionales.

Obligación de HTTPS y alcance

Los Service Workers funcionan exclusivamente sobre HTTPS (excepción: localhost para el desarrollo). Un Service Worker solo puede interceptar solicitudes dentro de su alcance (scope): por defecto la ruta de su archivo. Un Service Worker registrado bajo /sw.js cubre todo el dominio; uno bajo /blog/sw.js solo /blog/*.

Depuración

Las DevTools de Chrome ofrecen bajo «Application → Service Workers» una vista general de todos los Workers registrados con estado, origen, test Push y cancelación manual del registro. Firefox tiene una pestaña similar bajo about:debugging. Los eventos Push se pueden simular desde las DevTools sin necesidad de enviar realmente un mensaje.

Mejores prácticas para pymes

• Un archivo de Service Worker por dominio. Los Workers distintos para rutas distintas conducen rápidamente a comportamientos inconsistentes.
• Evitar el versionado en el nombre de archivo. Los Service Workers son identificados por el navegador mediante la URL; con sufijos de versión cada actualización debe registrarse de nuevo. Es mejor versionar el contenido del archivo (p. ej. constantes const SW_VERSION = '1.4').
• Implementar siempre el manejador de clic en notificaciones, de lo contrario al hacer clic no se abre ninguna página y el usuario se frustra.
• Renovación de suscripción: los navegadores pueden invalidar suscripciones sin previo aviso. En la siguiente visita al sitio web volver a comprobar y registrar de nuevo si es necesario.

Service Worker con SendSeven

SendSeven suministra para el canal Browser Push un Service Worker preconfigurado que cubre el ciclo de vida Push completo (Suscripción, Recepción, Clic, Baja). Integración con una línea de código, sin necesidad de configuración JavaScript propia. Quien quiera personalizaciones propias recibe el código fuente del Service Worker y puede bifurcarlo. Cada mensaje Push se entrega cifrado a través de la Web Push API, conforme al RGPD, alojamiento en la UE, contrato de encargado del tratamiento según el Art. 28 del RGPD.