Workbox-Broadcast-Update

Wenn Sie auf Anfragen mit im Cache gespeicherten Einträgen antworten, ist es zwar schnell, dass Nutzer veraltete Daten sehen.

Das workbox-broadcast-update-Paket bietet eine Standardmethode, um Windows-Clients darüber zu informieren, dass eine im Cache gespeicherte Antwort aktualisiert wurde. Diese Methode wird meist in Verbindung mit die Strategie StaleWhileRevalidate.

Wenn die "Neuvalidierung" dieser Strategie eine Antwort vom Netzwerk erstellen, das sich von dem im Cache gespeicherten Netzwerk unterscheidet, sendet dieses Modul eine Nachricht (über postMessage()) an alle Window-Clients im Bereich des aktuellen Service Workers.

Window-Clients können auf Updates warten und entsprechende Maßnahmen ergreifen, z. B. dem Nutzer automatisch eine Nachricht anzeigen, dass Updates verfügbar sind.

Wie werden Updates ermittelt?

Bestimmte Header der zwischengespeicherten und neuen Response und wenn Überschriften unterschiedliche Werte haben, gilt dies als Update.

Standardmäßig werden die Header Content-Length, ETag und Last-Modified verglichen.

Die Workbox verwendet Headerwerte anstelle eines Byte-für-Byte-Vergleichs von effizienter zu gestalten, insbesondere bei potenziell große Antworten

Broadcast-Update verwenden

Die Bibliothek ist für die Verwendung mit dem StaleWhileRevalidate vorgesehen Caching-Strategie, da bei dieser Strategie eine zwischengespeicherte nicht sofort reagieren, sondern auch einen Mechanismus bereitstellen, asynchron im Cache gespeichert.

Wenn Sie Updates senden möchten, fügen Sie Ihren Strategieoptionen einfach ein broadcastUpdate.BroadcastUpdatePlugin hinzu.

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

In Ihrer Webanwendung können Sie vor dem Auslösen des Ereignisses DOMContentLoaded auf diese Ereignisse warten:

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

Nachrichtenformat

Wenn ein message-Event-Listener in Ihrer Webanwendung aufgerufen wird, Die Property „event.data“ hat das folgende Format:

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

Zu prüfende Header anpassen

Sie können die zu prüfenden Überschriften anpassen, indem Sie das Attribut headersToCheck festlegen.

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

Erweiterte Nutzung

Die meisten Entwickler verwenden workbox-broadcast-update wie oben gezeigt als Plug-in einer bestimmten Strategie. Es ist jedoch möglich, die zugrunde liegende Logik im Service Worker-Code zu verwenden.

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