M

MLOG

Español

Aprende a usar service workers para crear aplicaciones web offline-first que sean rápidas, fiables y atractivas para usuarios de todo el mundo.

Service Workers: Creando Aplicaciones Web Offline-First

En el mundo actual, los usuarios esperan que las aplicaciones web sean rápidas, fiables y accesibles, incluso cuando la conectividad de red es limitada o inexistente. Aquí es donde entra en juego el concepto de diseño "offline-first". Los service workers son una potente tecnología que permite a los desarrolladores crear aplicaciones web que funcionan sin problemas sin conexión, proporcionando una experiencia de usuario superior.

¿Qué son los Service Workers?

Un service worker es un archivo de JavaScript que se ejecuta en segundo plano, separado del hilo principal del navegador. Actúa como un proxy entre la aplicación web y la red, interceptando las solicitudes de red y gestionando el almacenamiento en caché. Los service workers pueden encargarse de tareas como:

Es importante destacar que los service workers son controlados por el navegador, no por la página web. Esto les permite funcionar incluso cuando el usuario ha cerrado la pestaña o la ventana del navegador.

¿Por qué Offline-First?

Crear una aplicación web offline-first ofrece numerosos beneficios:

Cómo funcionan los Service Workers

El ciclo de vida de un service worker consta de varias etapas:

  1. Registro: El service worker se registra en el navegador, especificando el ámbito de la aplicación que controlará.
  2. Instalación: Se instala el service worker, durante la cual normalmente almacena en caché los activos estáticos.
  3. Activación: El service worker se activa y toma el control de la aplicación web. Esto puede implicar dar de baja a los antiguos service workers y limpiar las cachés antiguas.
  4. Inactivo: El service worker permanece inactivo, esperando solicitudes de red u otros eventos.
  5. Fetch (Captura): Cuando se realiza una solicitud de red, el service worker la intercepta y puede servir contenido de la caché o buscar el recurso en la red.

Implementando Offline-First con Service Workers: Una Guía Paso a Paso

Aquí hay un ejemplo básico de cómo implementar la funcionalidad offline-first usando service workers:

Paso 1: Registrar el Service Worker

En tu archivo JavaScript principal (p. ej., `app.js`): 


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

Este código comprueba si el navegador soporta service workers y registra el archivo `service-worker.js`. El ámbito (scope) define qué URLs controlará el service worker.

Paso 2: Crear el archivo del Service Worker (service-worker.js)

Crea un archivo llamado `service-worker.js` con el siguiente código:


const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // IMPORTANT: Clone the request.
        // A request is a stream and can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need to clone the response.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response.
            // A response is a stream and needs to be consumed only once.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Este código hace lo siguiente:

Paso 3: Probar tu funcionalidad sin conexión

Para probar tu funcionalidad sin conexión, puedes usar las herramientas de desarrollador del navegador. En Chrome, abre las DevTools, ve a la pestaña "Application" (Aplicación) y selecciona "Service Workers". Puedes entonces simular el modo sin conexión marcando la casilla "Offline".

Técnicas Avanzadas de Service Worker

Una vez que tengas un conocimiento básico de los service workers, puedes explorar técnicas más avanzadas para mejorar tu aplicación offline-first:

Estrategias de Almacenamiento en Caché

Existen varias estrategias de almacenamiento en caché que puedes utilizar, dependiendo del tipo de recurso y los requisitos de tu aplicación:

Elegir la estrategia de caché correcta depende del recurso específico y de los requisitos de tu aplicación. Por ejemplo, los activos estáticos como imágenes y archivos CSS a menudo se sirven mejor utilizando la estrategia Cache First, mientras que el contenido dinámico podría beneficiarse de la estrategia Network First o Cache then Network.

Sincronización en Segundo Plano

La sincronización en segundo plano te permite aplazar tareas hasta que el usuario tenga una conexión de red estable. Esto es útil para tareas como enviar formularios o subir archivos. Por ejemplo, un usuario en una zona remota de Indonesia podría rellenar un formulario sin conexión. El service worker puede entonces esperar hasta que haya una conexión disponible antes de enviar los datos.

Notificaciones Push

Los service workers se pueden utilizar para enviar notificaciones push a los usuarios, incluso cuando la aplicación no está abierta. Esto se puede usar para volver a atraer a los usuarios y proporcionar actualizaciones oportunas. Considera una aplicación de noticias que proporciona alertas de última hora a los usuarios en tiempo real, independientemente de si la aplicación se está ejecutando activamente.

Workbox

Workbox es una colección de bibliotecas de JavaScript que facilitan la creación de service workers. Proporciona abstracciones para tareas comunes como el almacenamiento en caché, el enrutamiento y la sincronización en segundo plano. Usar Workbox puede simplificar tu código de service worker y hacerlo más mantenible. Muchas empresas ahora usan Workbox como un componente estándar al desarrollar PWAs y experiencias offline-first.

Consideraciones para Audiencias Globales

Al crear aplicaciones web offline-first para una audiencia global, es importante considerar los siguientes factores:

Ejemplos de Aplicaciones Offline-First

Varias aplicaciones web populares han implementado con éxito la funcionalidad offline-first utilizando service workers:

Conclusión

Los service workers son una herramienta poderosa para crear aplicaciones web offline-first que son rápidas, fiables y atractivas. Almacenando en caché los activos, interceptando las solicitudes de red y manejando tareas en segundo plano, los service workers pueden proporcionar una experiencia de usuario superior, incluso cuando la conectividad de red es limitada o inexistente. Dado que el acceso a la red sigue siendo inconsistente en todo el mundo, centrarse en diseños offline-first es crucial para garantizar un acceso equitativo a la información y los servicios en la web.

Siguiendo los pasos descritos en esta guía y considerando los factores mencionados anteriormente, puedes crear aplicaciones web que funcionen sin problemas sin conexión y proporcionen una experiencia encantadora para los usuarios de todo el mundo. Adopta el poder de los service workers y construye el futuro de la web – un futuro en el que la web sea accesible para todos, en todas partes, independientemente de su conexión de red.