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

Cuando respondes solicitudes con entradas almacenadas en caché, aunque es rápido, se produce la desventaja de que los usuarios podrían terminar viendo datos inactivos.

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.

Cuando el paso "revalidar" de esa estrategia recupera una respuesta de la red que difiere de la que se almacenó en caché antes, este módulo enviará un mensaje (a través de postMessage()) a todos los clientes de Windows dentro del alcance del service worker actual.

Los clientes de Windows pueden detectar actualizaciones y tomar las medidas adecuadas, como mostrar automáticamente un mensaje al usuario para informarle que hay actualizaciones disponibles.

¿Cómo se determinan las actualizaciones?

Se comparan algunos encabezados de los objetos Response nuevos y almacenados en caché, y si alguno de ellos 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 por byte de los cuerpos de la respuesta a fin de ser más eficiente, en particular para respuestas potencialmente 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é 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 tus 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 aplicación web, antes de que se active el evento DOMContentLoaded, puedes escuchar estos eventos de la siguiente manera:

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 del mensaje

Cuando se invoca 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/'
  }
}

Personalizar los encabezados que se deben verificar

Puedes configurar la propiedad headersToCheck para personalizar los encabezados que se deben verificar.

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 complemento de una estrategia en particular, como se muestra arriba, es posible usar la lógica subyacente en el código del service worker.

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[],
)