workbox-broadcast-update

Bij het reageren op verzoeken met gegevens in het cachegeheugen, terwijl het snel is, gaat het gepaard met de afweging dat gebruikers uiteindelijk verouderde gegevens te zien krijgen.

Het workbox-broadcast-update pakket biedt een standaardmanier om Window Clients op de hoogte te stellen dat een in de cache opgeslagen antwoord is bijgewerkt. Dit wordt meestal gebruikt in combinatie met de StaleWhileRevalidate strategie .

Telkens wanneer de stap "opnieuw valideren" van die strategie een antwoord van het netwerk ophaalt dat afwijkt van wat eerder in de cache was opgeslagen, stuurt deze module een bericht (via postMessage() ) naar alle Window Clients binnen het bereik van de huidige servicemedewerker.

Window Clients kunnen luisteren naar updates en passende actie ondernemen, zoals het automatisch weergeven van een bericht aan de gebruiker om hem te laten weten dat er updates beschikbaar zijn.

Hoe worden updates bepaald?

Bepaalde headers van de in de cache opgeslagen en nieuwe Response objecten worden vergeleken, en als een van de headers verschillende waarden heeft, wordt dit als een update beschouwd.

Standaard worden de headers Content-Length , ETag en Last-Modified vergeleken.

Workbox gebruikt headerwaarden in plaats van een byte-voor-byte-vergelijking van antwoordlichamen om efficiënter te zijn, vooral voor potentieel grote antwoorden

Broadcast-update gebruiken

De bibliotheek is bedoeld om te worden gebruikt in combinatie met de cachingstrategie StaleWhileRevalidate , aangezien die strategie inhoudt dat een in de cache opgeslagen antwoord onmiddellijk wordt geretourneerd, maar ook een mechanisme biedt voor het asynchroon bijwerken van de cache.

Om updates uit te zenden, hoeft u alleen maar een broadcastUpdate.BroadcastUpdatePlugin aan uw strategieopties toe te voegen.

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

Voordat de DOMContentLoaded gebeurtenis wordt geactiveerd, kunt u in uw web-app als volgt naar deze gebeurtenissen luisteren:

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

Berichtformaat

Wanneer een message wordt aangeroepen in uw web-app, heeft de eigenschap event.data de volgende indeling:

{
  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/'
  }
}

Pas headers aan om te controleren

U kunt de te controleren headers aanpassen door de eigenschap headersToCheck in te stellen.

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

Geavanceerd gebruik

Hoewel de meeste ontwikkelaars workbox-broadcast-update zullen gebruiken als een plug-in van een bepaalde strategie, zoals hierboven weergegeven, is het mogelijk om de onderliggende logica in service worker-code te gebruiken.

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