Service Workers

Service Workers: Creación de potentes aplicaciones web offline-first

Los Service Workers son una parte fundamental del desarrollo web moderno, ya que permiten a los desarrolladores crear aplicaciones web offline-first con un rendimiento y una fiabilidad mejorados. Estos workers de JavaScript actúan como intermediarios entre las aplicaciones web y la red, permitiendo el procesamiento en segundo plano, el almacenamiento en caché y una gestión eficiente de los recursos. En este artículo, exploraremos qué son los Service Workers, sus beneficios, cómo funcionan y cómo usarlos eficazmente en el desarrollo web.

¿Qué son los Service Workers?

Un Service Worker es un tipo de web worker, un archivo JavaScript que se ejecuta en segundo plano, separado de la página web principal. Actúa como un proxy entre la aplicación web y la red, interceptando solicitudes de red y habilitando funciones avanzadas como soporte offline, sincronización en segundo plano y notificaciones push.

Beneficios de los Service Workers

1. Soporte offline:
   • Los Service Workers permiten que las aplicaciones web funcionen incluso cuando el usuario está desconectado. Pueden almacenar en caché recursos y contenido importantes, proporcionando una experiencia fluida independientemente de la conectividad de red.
2. Rendimiento mejorado:
   • Al almacenar recursos en caché, los Service Workers pueden reducir significativamente los tiempos de carga en visitas posteriores a una aplicación web. Esto se traduce en cargas de página más rápidas y una mejor experiencia de usuario.
3. Sincronización en segundo plano:
   • Los Service Workers permiten la sincronización de datos en segundo plano con el servidor, garantizando que los datos del usuario estén siempre actualizados. Esto es especialmente valioso para aplicaciones que manejan datos en tiempo real.
4. Notificaciones push:
   • Los desarrolladores pueden usar Service Workers para implementar notificaciones push, manteniendo a los usuarios comprometidos con la aplicación y entregando actualizaciones oportunas.
5. Gestión de recursos:
   • Los Service Workers ofrecen un control detallado sobre el almacenamiento en caché de recursos, permitiendo a los desarrolladores gestionar cómo y cuándo se obtienen y sirven los recursos desde la caché.

Cómo funcionan los Service Workers

Los Service Workers funcionan basándose en un conjunto de eventos del ciclo de vida y en un archivo de script proporcionado por el desarrollador. Los componentes clave de la funcionalidad de Service Worker incluyen:

• Registro: Los desarrolladores registran un script de Service Worker en el archivo JavaScript principal de su aplicación web o en la página HTML. Después, el script del Service Worker se instala y se activa.
• Intercepción: Una vez activado, el Service Worker puede interceptar y gestionar las solicitudes de red realizadas por la aplicación. Puede decidir si servir recursos desde la caché, desde la red o aplicar lógica personalizada.
• Caché: Los Service Workers usan estrategias de caché para determinar cómo se almacenan y recuperan los recursos. Los desarrolladores pueden especificar qué recursos almacenar en caché, cuánto tiempo conservarlos y cómo actualizarlos. En producción, use versionado de caché (por ejemplo, cache-v1) para asegurarse de que los recursos antiguos se eliminen cuando se actualice el script del Service Worker. Al actualizar el Service Worker, incremente la versión de la caché y elimine las cachés antiguas en el evento activate para evitar recursos obsoletos.
• Sincronización en segundo plano: Los Service Workers permiten la sincronización en segundo plano, lo que permite a las aplicaciones comprobar periódicamente si hay actualizaciones y sincronizar datos con el servidor, incluso cuando la aplicación no está abierta.

Restricciones importantes: Los Service Workers requieren un contexto seguro (HTTPS o localhost). También operan dentro de un ámbito específico (por defecto, el directorio del script del SW), lo que limita qué URLs pueden interceptar.

Uso de Service Workers

Aquí tienes un ejemplo básico de cómo registrar y usar un Service Worker en una aplicación web:

1. Registrar el Service Worker:

En tu archivo JavaScript principal o en la página HTML, registra el Service Worker usando el método navigator.serviceWorker.register():

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js')
    .then((registration) => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch((error) => {
      console.error('Service Worker registration failed:', error);
    });
}

2. Script del Service Worker:

Crea un archivo JavaScript separado para el script de tu Service Worker (por ejemplo, sw.js). En este archivo, defines las estrategias de caché y la lógica para interceptar y gestionar solicitudes de red:

self.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open('v1').then(function (cache) {
      return cache.addAll(['/index.html', '/offline.html']);
    })
  );
  self.skipWaiting();
});

self.addEventListener("activate", function (event) {
  event.waitUntil(self.clients.claim());
});

self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request).catch(function () {
        return caches.match('/offline.html');
      });
    })
  );
});

En este ejemplo, el Service Worker intercepta las solicitudes de red y sirve respuestas almacenadas en caché cuando están disponibles o recupera recursos de la red si no están en caché. Ten en cuenta que self.skipWaiting() se llama en el evento install para forzar la activación inmediata, omitiendo la fase de espera predeterminada. Esto es útil para pruebas, pero debe usarse con cautela en producción, ya que puede interrumpir a los usuarios activos.

3. Activar el Service Worker:

Una vez registrado, el Service Worker se instala y se activa. Después puede interceptar solicitudes de red y realizar el almacenamiento en caché según la lógica definida.

Ejemplo real: notificaciones de estado de conectividad

Este ejemplo demuestra una función comúnmente utilizada en muchos sitios web y aplicaciones modernas, como servicios de streaming como Netflix o aplicaciones basadas en la nube como Google Docs, para informar a los usuarios sobre su estado de conectividad. Al notificar a los usuarios cuando están desconectados, estas plataformas mejoran la experiencia de usuario al asegurarse de que los usuarios sean conscientes de posibles problemas con la sincronización de datos o interrupciones en el streaming. Este ejemplo se centra en la integración de la interfaz de usuario en el hilo principal, mientras que el script del Service Worker permanece igual que en el ejemplo anterior.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Connectivity Notifier</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin-top: 50px;
      }
      #status {
        padding: 10px;
        border-radius: 5px;
        color: #fff;
        font-size: 24px;
      }
      .online {
        background-color: #4caf50;
        animation: blinker 1s linear infinite;
      }
      .offline {
        background-color: #f44336;
        animation: blinker 1s linear infinite;
      }
      @keyframes blinker {
        50% {
          opacity: 0.5;
        }
      }
    </style>
  </head>
  <body>
    <h1>Connectivity Notifier</h1>
    <p id="status" class="offline">Checking connectivity...</p>

    <script>
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("sw.js").then(function () {
          console.log("Service Worker Registered");
        });

        window.addEventListener('online', () => {
          const statusElement = document.getElementById("status");
          statusElement.textContent = "Online";
          statusElement.className = "online";
        });

        window.addEventListener('offline', () => {
          const statusElement = document.getElementById("status");
          statusElement.textContent = "Offline";
          statusElement.className = "offline";
        });
      }
    </script>
  </body>
</html>

Try it Yourself »

Explicación:

• Comprobación de conectividad: La página principal escucha los eventos online y offline en el objeto window y actualiza la interfaz de usuario de inmediato, evitando el enfoque poco fiable de sondeo.
• Comentarios al usuario: La página muestra el estado actual de la conectividad, ayudando a los usuarios a entender cómo integrar capacidades en segundo plano con una interfaz receptiva.
• Limpieza del código: Se eliminó el listener inactivo navigator.serviceWorker.onmessage, ya que el script del Service Worker no envía ningún mensaje.

Conclusión

Los Service Workers son una herramienta poderosa para crear aplicaciones web progresivas (PWA) que ofrecen una experiencia fiable y de alto rendimiento, tanto en línea como sin conexión. Al dominar el uso de los Service Workers, los desarrolladores web pueden crear aplicaciones web resistentes a fallos de red y ofrecer experiencias de usuario excepcionales.

Practice

¿Cuáles son las características y funcionalidades clave de los Service Workers de JavaScript?

Los Service Workers son un tipo de Web Worker.Los Service Workers no pueden interceptar solicitudes de red ni modificar respuestas.Los Service Workers no están asociados a ninguna página web y se ejecutan en el hilo de la aplicación.Los Service Workers ofrecen experiencias offline enriquecidas.Los Service Workers gestionan la sincronización en segundo plano.Los Service Workers pueden recibir actualizaciones centralizadas.