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

Soorten

BroadcastCacheUpdate

Gebruikt de postMessage() API om geopende vensters/tabbladen te informeren wanneer een in de cache opgeslagen antwoord is bijgewerkt.

Omwille van de efficiëntie worden de onderliggende responsinstanties niet met elkaar vergeleken; alleen specifieke antwoordheaders worden gecontroleerd.

Eigenschappen

  • bouwer

    leegte

    Construeer een BroadcastCacheUpdate-instantie met een specifieke channelName om berichten op uit te zenden

    De constructor ziet er als volgt uit: 

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

  • notificerenAlsUpdated

    leegte

    Vergelijkt twee reacties en verzendt een bericht (via postMessage() ) naar alle vensterclients als de reacties verschillen. Geen van beide reacties kan ondoorzichtig zijn.

    Het bericht dat wordt gepost heeft de volgende indeling (waarbij payload kan worden aangepast via de generatePayload waarmee de instantie is gemaakt):

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

    De notifyIfUpdated functie ziet er als volgt uit: 

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

    • retourneert

      Beloof <nietig>

      Wordt opgelost zodra de update is verzonden.

BroadcastCacheUpdateOptions

Eigenschappen

  • headersToCheck

    tekenreeks[] optioneel

  • informeerAllClients

    Booleaans optioneel

  • genererenPayload

    ongeldig optioneel

    De generatePayload functie ziet er als volgt uit: 

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

    • retourneert

      Neem<tekenreeks> op

BroadcastUpdatePlugin

Deze plug-in zendt automatisch een bericht uit wanneer een in de cache opgeslagen antwoord wordt bijgewerkt.

Eigenschappen

  • bouwer

    leegte

    Construeer een workbox-broadcast-update.BroadcastUpdate -instantie met de doorgegeven opties en roept de notifyIfUpdated -methode aan telkens wanneer de cacheDidUpdate callback van de plug-in wordt aangeroepen.

    De constructor ziet er als volgt uit: 

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

Methoden

responsesAreSame()

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

Gegeven twee Response's worden verschillende headerwaarden vergeleken om te zien of ze hetzelfde zijn of niet.

Parameters

  • eerste reactie

    Antwoord

  • tweede reactie

    Antwoord

  • headersToCheck

    snaar[]

Retouren

  • Booleaans