caixa de trabalho-transmissão-atualização

Ao responder a solicitações com entradas em cache, embora seja rápido, há uma compensação, já que os usuários podem acabar vendo dados desatualizados.

O pacote workbox-broadcast-update fornece uma maneira padrão de notificar Clientes de janela que uma resposta em cache foi atualizada. Essa estratégia é mais comumente usada com a estratégia StaleWhileRevalidate.

Sempre que a etapa "revalidar" dessa estratégia recuperar uma resposta da rede que é diferente do que foi armazenado em cache anteriormente, esse módulo vai enviar uma mensagem (por meio de postMessage()) a todos os clientes de janela no escopo do service worker atual.

Os clientes do Windows podem detectar atualizações e tomar as medidas apropriadas, como mostrando automaticamente uma mensagem ao usuário informando que as atualizações estão disponíveis.

Como as atualizações são determinadas?

Alguns cabeçalhos das instâncias novas e em cache Response objetos são comparados e, se algum dos cabeçalhos tiver valores diferentes, isso é considerado uma atualização.

Por padrão, os cabeçalhos Content-Length, ETag e Last-Modified são comparados.

A caixa de trabalho usa valores de cabeçalho em vez de uma comparação byte por byte dos para que os corpos de resposta sejam mais eficientes, em especial respostas grandes

Como usar a atualização por transmissão

A biblioteca precisa ser usada com o StaleWhileRevalidate de cache, já que ela envolve retornar um valor a resposta imediata, mas também fornece um mecanismo para atualizar a armazenar em cache de maneira assíncrona.

Para transmitir atualizações, basta adicionar um broadcastUpdate.BroadcastUpdatePlugin ao seu de estratégia de visualização de dados.

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()],
  })
);

No app da Web, antes que o evento DOMContentLoaded seja acionado, é possível detectar esses eventos da seguinte maneira:

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 mensagem

Quando um listener de evento message é invocado no app da Web, a propriedade event.data tem o seguinte 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 cabeçalhos para verificar

É possível personalizar os cabeçalhos a serem verificados definindo o headersToCheck .

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 Avançado

Embora a maioria dos desenvolvedores use workbox-broadcast-update como um plug-in de uma estratégia específica, conforme mostrado acima, é possível usar a lógica subjacente no código do worker de serviço.

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