actualización-de-transmisión-de-caja de trabajo

Cuando se responde a solicitudes con entradas almacenadas en caché, si bien es rápido, conlleva la desventaja de que los usuarios podrían terminar viendo datos obsoletos.

El paquete workbox-broadcast-update proporciona una forma estándar de notificar a los clientes de Windows que se actualizó una respuesta almacenada en caché. Por lo general, se usa junto con la estrategia StaleWhileRevalidate.

Cada vez que el paso "revalidar" de esa estrategia recupera una respuesta de la red que difiere de la que se almacenó en caché anteriormente, este módulo enviará un mensaje (a través de postMessage()) a todos los clientes de ventana dentro del alcance del trabajador de servicio actual.

Los clientes de ventanas pueden detectar actualizaciones y tomar las medidas correspondientes, como mostrar automáticamente un mensaje al usuario que le informa que las actualizaciones están disponibles.

¿Cómo se determinan las actualizaciones?

Se comparan ciertos encabezados de los objetos Response nuevos y almacenados en caché, y si alguno de los encabezados tiene valores diferentes, se considera una actualización.

De forma predeterminada, se comparan los encabezados Content-Length, ETag y Last-Modified.

Workbox usa valores de encabezado en lugar de una comparación byte a byte de para que los cuerpos de respuesta sean más eficientes, respuestas grandes

Cómo usar la actualización de transmisión

La biblioteca está diseñada para usarse junto con la estrategia de almacenamiento en caché de StaleWhileRevalidate, ya que esa estrategia implica mostrar una respuesta almacenada en caché de inmediato, pero también proporciona un mecanismo para actualizar la caché de forma asíncrona.

Para transmitir actualizaciones, solo debes agregar un broadcastUpdate.BroadcastUpdatePlugin a las opciones de estrategia.

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

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [new BroadcastUpdatePlugin()],
  })
);

En tu app web, antes de DOMContentLoaded evento activado, puedes escuchar estos eventos como:

navigator.serviceWorker.addEventListener('message', async event => {
  // Optional: ensure the message came from workbox-broadcast-update
  if (event.data.meta === 'workbox-broadcast-update') {
    const {cacheName, updatedURL} = event.data.payload;

    // Do something with cacheName and updatedURL.
    // For example, get the cached content and update
    // the content on the page.
    const cache = await caches.open(cacheName);
    const updatedResponse = await cache.match(updatedURL);
    const updatedText = await updatedResponse.text();
  }
});

Formato de mensaje

Cuando se invoque un objeto de escucha de eventos message en tu app web, la propiedad event.data tendrá el siguiente formato:

{
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  // The two payload values vary depending on the actual update:
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

Personaliza los encabezados que quieres comprobar

Puedes personalizar los encabezados que se deben verificar configurando el headersToCheck propiedad.

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

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [
      new BroadcastUpdatePlugin({
        headersToCheck: ['X-My-Custom-Header'],
      }),
    ],
  })
);

Uso avanzado

Si bien la mayoría de los desarrolladores usarán workbox-broadcast-update como un complemento de una estrategia en particular, como se muestra más arriba, es posible usar la lógica subyacente en el código del trabajador de servicio.

import {BroadcastCacheUpdate} from 'workbox-broadcast-update';

const broadcastUpdate = new BroadcastCacheUpdate({
  headersToCheck: ['X-My-Custom-Header'],
});

const cacheName = 'api-cache';
const request = new Request('https://example.com/api');

const cache = await caches.open(cacheName);
const oldResponse = await cache.match(request);
const newResponse = await fetch(request);

broadcastUpdate.notifyIfUpdated({
  cacheName,
  oldResponse,
  newResponse,
  request,
);

workbox-broadcast-update.responsesAreSame(
  firstResponse: Response,
  secondResponse: Response,
  headersToCheck: string[],
)