aggiornamento-trasmissione-casella-lavoro

Quando rispondi alle richieste con voci memorizzate nella cache, pur essendo veloce, presenta un compromesso per cui gli utenti potrebbero finire per vedere dati inattivi.

Il pacchetto workbox-broadcast-update fornisce un modo standard per notificare ai client Windows l'aggiornamento di una risposta memorizzata nella cache. Questa opzione viene utilizzata per lo più insieme alla strategia StaleWhileRevalidate.

Ogni volta che il passaggio di "riconvalida" di questa strategia recupera dalla rete una risposta diversa da quella precedentemente memorizzata nella cache, questo modulo invia un messaggio (tramite postMessage()) a tutti i client Windows nell'ambito del service worker attuale.

I client Windows possono rimanere in ascolto degli aggiornamenti e intraprendere le azioni appropriate, ad esempio mostrare automaticamente all'utente un messaggio che li informa della disponibilità di aggiornamenti.

Come vengono determinati gli aggiornamenti?

Alcune intestazioni degli oggetti Response memorizzati nella cache e nuovi vengono confrontati e, se una delle intestazioni ha valori diversi, viene considerato un aggiornamento.

Per impostazione predefinita, vengono confrontate le intestazioni Content-Length, ETag e Last-Modified.

Per essere più efficiente, Workbox utilizza valori di intestazione anziché un confronto byte per byte dei corpi delle risposte, in particolare per

Utilizzo dell'aggiornamento della trasmissione

La libreria è pensata per essere utilizzata insieme alla strategia di memorizzazione nella cache StaleWhileRevalidate, poiché tale strategia prevede la restituzione immediata di una risposta memorizzata nella cache, ma fornisce anche un meccanismo per l'aggiornamento della cache in modo asincrono.

Per trasmettere gli aggiornamenti, devi solo aggiungere un broadcastUpdate.BroadcastUpdatePlugin alle tue opzioni di strategia.

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

Nella tua app web, prima dell'attivazione dell'evento DOMContentLoaded, puoi ascoltare questi eventi come questi:

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 dei messaggi

Quando un listener di eventi message viene richiamato nella tua app web, la proprietà event.data avrà il seguente 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/'
  }
}

Personalizza le intestazioni da controllare

Puoi personalizzare le intestazioni da verificare impostando la proprietà 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'],
      }),
    ],
  })
);

Utilizzo avanzato

Anche se la maggior parte degli sviluppatori userà workbox-broadcast-update come plug-in di una determinata strategia, come illustrato sopra, è possibile utilizzare la logica sottostante nel codice 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[],
)