Workbox-Broadcast-Update

Wenn Sie auf Anfragen mit im Cache gespeicherten Einträgen antworten, müssen Nutzer dabei aber möglicherweise veraltete Daten sehen.

Das Paket workbox-broadcast-update bietet eine Standardmethode, um Window-Clients darüber zu informieren, dass eine im Cache gespeicherte Antwort aktualisiert wurde. Dies wird am häufigsten in Verbindung mit der StaleWhileRevalidate-Strategie verwendet.

Immer wenn beim Schritt "Neu validieren" dieser Strategie eine Antwort vom Netzwerk abruft, die von den zuvor im Cache gespeicherten Werten abweicht, sendet dieses Modul eine Nachricht (über postMessage()) an alle Window-Clients im Bereich des aktuellen Service Workers.

Fensterclients können auf Aktualisierungen warten und entsprechende Maßnahmen ergreifen, z. B. indem dem Nutzer automatisch eine Nachricht angezeigt wird, dass Aktualisierungen verfügbar sind.

Wie werden Aktualisierungen ermittelt?

Bestimmte Header der im Cache gespeicherten und neuen Response-Objekte werden verglichen. Wenn einer der Header unterschiedliche Werte hat, gilt dies als Aktualisierung.

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

Workbox verwendet Headerwerte anstelle eines Byte-für-Byte-Vergleichs von Antworttexten, um effizienter zu sein, insbesondere bei potenziell großen Antworten.

Broadcast-Update verwenden

Die Bibliothek ist für die Verwendung zusammen mit der Caching-Strategie StaleWhileRevalidate vorgesehen, da bei dieser Strategie sofort eine im Cache gespeicherte Antwort zurückgegeben wird, sie aber auch einen Mechanismus zur asynchronen Aktualisierung des Cache bietet.

Für die Übertragung von Updates musst du deinen Strategieoptionen nur eine broadcastUpdate.BroadcastUpdatePlugin hinzufügen.

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

Bevor das DOMContentLoaded-Ereignis ausgelöst wird, können Sie in Ihrer Webanwendung so 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 Web-App aufgerufen wird, hat die Property event.data 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 Überschriften anpassen

Sie können die zu prüfenden Header 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 als Plug-in für eine bestimmte Strategie, wie oben gezeigt, 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[],
)