aggiornamento-trasmissione-casella-lavoro

Quando risponde alle richieste con voci memorizzate nella cache, pur essendo veloce, comporta il fatto che gli utenti potrebbero visualizzare dati inattivi.

Il pacchetto workbox-broadcast-update fornisce un modo standard per informare i client di Windows che una risposta memorizzata nella cache è stata aggiornata. Viene utilizzata più comunemente insieme alla strategia StaleWhileRevalidate.

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

I client Windows possono rimanere in ascolto degli aggiornamenti e intraprendere le azioni appropriate, come mostrare automaticamente un messaggio all'utente per informarlo che sono disponibili.

Come vengono determinati gli aggiornamenti?

Vengono confrontate alcune intestazioni degli oggetti memorizzati nella cache e nuovi Response e, se una delle intestazioni ha valori diversi, viene considerato un aggiornamento.

Per impostazione predefinita, le intestazioni Content-Length, ETag e Last-Modified sono confrontato con altri modelli.

La casella di lavoro utilizza i valori di intestazione invece di un confronto byte per byte di di risposta in modo che siano più efficienti, in particolare per risposte grandi

Utilizzo di Aggiornamento di trasmissione

La libreria è progettata per essere utilizzata insieme alla strategia di memorizzazione nella cache StaleWhileRevalidate, poiché questa strategia prevede il ritorno immediato di una risposta memorizzata nella cache, ma fornisce anche un meccanismo per aggiornare la cache in modo asincrono.

Per trasmettere gli aggiornamenti, devi solo aggiungere un broadcastUpdate.BroadcastUpdatePlugin alle 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'evento DOMContentLoaded, puoi ascoltare questi eventi nel seguente modo:

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 messaggio

Quando viene invocato un gestore di eventi message 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/'
  }
}

Personalizzare le intestazioni da controllare

Puoi personalizzare le intestazioni da verificare impostando il headersToCheck proprietà.

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

Sebbene la maggior parte degli sviluppatori utilizzi workbox-broadcast-update come plug-in di una determinata strategia, come mostrato sopra, è possibile utilizzare la logica di base nel codice del servizio 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 le finestre/schede aperte quando una risposta memorizzata nella cache è stata aggiornata.

Per motivi di efficienza, i relativi contenuti non vengono confrontati; vengono controllate solo intestazioni di risposta specifiche.

Proprietà

  • costruttore

    null

    Crea un'istanza BroadcastCacheUpdate con un channelName specifico su cui trasmettere i messaggi

    La funzione constructor ha il seguente aspetto: 

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

  • notifyIfUpdated

    nullo

    Confronta due risposte e invia un messaggio (tramite postMessage()) a tutti i client delle finestre se diverse. Nessuna delle risposte può essere oscura.

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

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

    La funzione notifyIfUpdated ha questo aspetto: 

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

    • returns

      Promise<void>

      Il problema si risolve una volta inviato l'aggiornamento.

BroadcastCacheUpdateOptions

Proprietà

  • headersToCheck

    string[] facoltativo

  • notifyAllClients

    booleano facoltativo

  • generatePayload

    void facoltativo

    La funzione generatePayload ha questo aspetto: 

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

    • returns

      Registra<stringany>

BroadcastUpdatePlugin

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

Proprietà

  • costruttore

    nullo

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

    La funzione constructor ha questo 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 verificare se sono uguali o meno.

Parametri

  • firstResponse

    Risposta

  • secondResponse

    Risposta

  • headersToCheck

    string[]

Resi

  • booleano