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,
);

Tipi

BroadcastCacheUpdate

Utilizza l'API postMessage() per informare tutte le finestre o le schede aperte quando una risposta memorizzata nella cache è stata aggiornata.

Per maggiore efficienza, i corpi di risposta sottostanti non vengono confrontati; vengono selezionate solo intestazioni di risposta specifiche.

Proprietà

  • costruttore

    void

    Costruisci un'istanza BroadcastCacheUpdate con un valore channelName specifico su cui trasmettere messaggi su

    La funzione constructor ha il seguente aspetto: 

    (options?: BroadcastCacheUpdateOptions)=> {...}

  • notifyIfUpdated

    void

    Confronta due Risposte e invia un messaggio (tramite postMessage()) a tutti i client finestra se le risposte sono diverse. Nessuna delle risposte può essere opaca.

    Il messaggio pubblicato ha il seguente formato (in cui payload può essere personalizzato tramite l'opzione generatePayload con cui viene creata l'istanza):

    {
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

    La funzione notifyIfUpdated ha il seguente aspetto: 

    (options: CacheDidUpdateCallbackParam)=> {...}

    • returns

      Promise<void>

      Risolve una volta inviato l'aggiornamento.

BroadcastCacheUpdateOptions

Proprietà

BroadcastUpdatePlugin

Questo plug-in trasmette automaticamente un messaggio ogni volta che viene aggiornata una risposta memorizzata nella cache.

Proprietà

  • costruttore

    void

    Crea un'istanza workbox-broadcast-update.BroadcastUpdate con le opzioni passate e chiama il relativo metodo notifyIfUpdated ogni volta che viene richiamato il callback cacheDidUpdate del plug-in.

    La funzione constructor ha il seguente aspetto: 

    (options?: BroadcastCacheUpdateOptions)=> {...}

Metodi

responsesAreSame()

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

Dati due Response's, confronta diversi valori di intestazione per vedere se sono uguali o meno.

Parametri

  • firstResponse

    Risposta

  • secondResponse

    Risposta

  • headersToCheck

    stringa[]

Ritorni

  • boolean