workbox-core es el núcleo de la biblioteca Workbox, proporcionando funcionalidades básicas y herramientas para trabajar con Service Workers. Es esencial para aquellos que planean utilizar múltiples módulos de Workbox, pero por sí solo no es una solución completa.

workbox-routing es un módulo de Workbox que permite a los desarrolladores definir rutas y controladores para manejar solicitudes de red de manera más flexible. Aunque agrega complejidad al manejo de solicitudes, proporciona una gran cantidad de control y personalización.

workbox-cacheable-response es un módulo de Workbox que proporciona una forma sencilla de controlar qué respuestas de red se pueden almacenar en caché. Su enfoque específico lo hace fácil de usar sin agregar mucha complejidad al proceso de almacenamiento en caché.

workbox-background-sync es un módulo de Workbox que se centra en la sincronización de datos en segundo plano. Aunque es parte de un conjunto más grande de herramientas, su enfoque en una funcionalidad específica lo mantiene relativamente ligero en comparación con soluciones más completas.

sw-toolbox es una biblioteca ligera y simple que proporciona una API fácil de usar para manejar el almacenamiento en caché y las solicitudes de red. Su simplicidad la convierte en una excelente opción para proyectos más pequeños o para aquellos que buscan implementar rápidamente estrategias de caché sin mucha sobrecarga.

workbox-core proporciona las herramientas y funcionalidades básicas necesarias para implementar estrategias de caché, pero no define ninguna estrategia específica por sí misma. Es el fundamento sobre el cual se construyen otros módulos de Workbox que implementan estrategias de caché más avanzadas.

workbox-routing permite a los desarrolladores definir rutas y controladores para manejar solicitudes de red de manera más granular. Esto permite implementar estrategias de caché más complejas y personalizadas en función de la URL y otros parámetros de la solicitud.

workbox-cacheable-response trabaja en conjunto con las estrategias de caché para garantizar que solo se almacenen en caché las respuestas que cumplen con ciertos criterios, como encabezados específicos. Esto ayuda a mejorar la calidad de los datos almacenados en caché y evita el almacenamiento en caché de respuestas no deseadas.

workbox-background-sync no se centra en las estrategias de caché, sino en la sincronización de datos en segundo plano. Sin embargo, se puede utilizar en conjunto con estrategias de caché para garantizar que los datos se envíen cuando la conectividad se restablece, lo que complementa las estrategias de caché existentes.

sw-toolbox permite a los desarrolladores definir estrategias de caché simples, como almacenamiento en caché de solicitudes, almacenamiento en caché de respuestas y almacenamiento en caché de recursos en función de su URL. Proporciona una forma rápida y fácil de implementar caché sin necesidad de configuraciones complicadas.

workbox-core no proporciona funcionalidades de sincronización en segundo plano. Se centra en la gestión de Service Workers y la implementación de estrategias de caché, sirviendo como base para otros módulos de Workbox que pueden manejar la sincronización.

workbox-routing no incluye funcionalidades de sincronización en segundo plano. Se centra en el enrutamiento de solicitudes de red y la implementación de estrategias de caché, dejando la sincronización en segundo plano a otros módulos como workbox-background-sync.

workbox-cacheable-response no maneja la sincronización en segundo plano. Su enfoque está en controlar qué respuestas se pueden almacenar en caché, lo que complementa las funcionalidades de sincronización en segundo plano pero no las reemplaza.

workbox-background-sync se especializa en la sincronización de datos en segundo plano, permitiendo que las aplicaciones envíen datos cuando la conectividad se restablece. Esto es especialmente útil para aplicaciones que manejan formularios o datos que deben ser enviados incluso si el usuario está fuera de línea temporalmente.

sw-toolbox no proporciona funcionalidades de sincronización en segundo plano. Se centra principalmente en el almacenamiento en caché y el manejo de solicitudes de red, lo que lo hace adecuado para aplicaciones que no requieren sincronización de datos.

workbox-core no proporciona funcionalidades específicas para controlar las respuestas almacenadas en caché. Sin embargo, proporciona las herramientas necesarias para que los desarrolladores implementen su propio control sobre las respuestas almacenadas en caché como parte de sus estrategias de caché.

workbox-routing permite a los desarrolladores definir lógica personalizada para manejar las respuestas de las solicitudes de red, lo que puede incluir el control de las respuestas almacenadas en caché. Sin embargo, el control de las respuestas almacenadas en caché depende de cómo se implementen los controladores de ruta.

workbox-cacheable-response proporciona un control más granular sobre qué respuestas se pueden almacenar en caché, permitiendo a los desarrolladores definir reglas basadas en los encabezados de respuesta. Esto ayuda a garantizar que solo las respuestas válidas y deseadas se almacenen en caché, mejorando la calidad de los datos almacenados.

workbox-background-sync no maneja el control de respuestas almacenadas en caché, ya que se centra en la sincronización de datos en segundo plano. Sin embargo, se puede utilizar junto con estrategias de caché que implementan controles más estrictos sobre qué datos se almacenan.

sw-toolbox permite un control básico sobre las respuestas almacenadas en caché, pero no proporciona un mecanismo detallado para filtrar o validar las respuestas antes de almacenarlas. Los desarrolladores deben implementar su propia lógica para manejar qué respuestas se almacenan en caché y cuáles no.

Ejemplo de configuración básica de workbox-core

import { Workbox } from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');
  wb.register();

  wb.addEventListener('waiting', () => {
    // Mostrar un mensaje cuando hay una nueva versión del Service Worker
    console.log('Nueva versión disponible.');
  });
}

Ejemplo de enrutamiento de solicitudes con workbox-routing

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'image-cache'
  })
);

Ejemplo de uso de workbox-cacheable-response para controlar respuestas almacenadas en caché

import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { registerRoute } from 'workbox-routing';
import { cacheFirst } from 'workbox-strategies';

const cacheableResponsePlugin = new CacheableResponsePlugin(
  'my-cache',
  (response) => response.status === 200 && response.headers.get('Content-Type').includes('application/json')
);

registerRoute(
  ({ request }) => request.destination === 'api',
  cacheFirst({
    cacheName: 'api-cache',
    plugins: [cacheableResponsePlugin]
  })
);

Ejemplo de uso de workbox-background-sync para sincronización de datos en segundo plano

import { BackgroundSyncPlugin } from 'workbox-background-sync';
import { registerRoute } from 'workbox-routing';
import { fetch } from 'workbox-core';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueue', {
  maxRetentionTime: 24 * 60 // 24 horas
});

registerRoute(
  ({ request }) => request.method === 'POST',
  async (args) => {
    // Intentar enviar la solicitud
    return fetch(args.request).catch((error) => {
      // Si falla, se agrega a la cola para sincronización en segundo plano
      throw error;
    });
  },
  'POST',
  bgSyncPlugin
);

Ejemplo de uso de sw-toolbox para almacenar en caché recursos

importScripts('https://unpkg.com/sw-toolbox/sw-toolbox.js');

// Configurar estrategias de caché
swToolbox.router.get('/api/data', swToolbox.cacheFirst({
  cache: {
    name: 'api-cache',
    maxEntries: 10,
    maxAgeSeconds: 60 * 60 // 1 hora
  }
}));

swToolbox.router.get('/images/*', swToolbox.cacheFirst({
  cache: 'image-cache'
}));

// Almacenar en caché recursos estáticos
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-cache').then((cache) => {
      return cache.addAll([
        '/index.html',
        '/styles.css',
        '/script.js',
        '/images/logo.png'
      ]);
    })
  );
});