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

Typen

BroadcastCacheUpdate

Verwendet die postMessage() API, um alle geöffneten Fenster/Tabs zu informieren, wenn ein im Cache gespeichertes Antwort wurde aktualisiert.

Aus Effizienzgründen werden die zugrunde liegenden Antworttexte nicht verglichen, sondern nur bestimmte Antwortheader geprüft.

Attribute

  • Konstruktor

    void

    Erstelle eine BroadcastCacheUpdate-Instanz mit einer bestimmten channelName, über die Nachrichten gesendet werden sollen.

    Die constructor-Funktion sieht so aus: 

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

  • notifyIfUpdated

    void

    Vergleicht zwei Antworten und sendet eine Nachricht (über postMessage()) an alle Fensterclients, wenn sich die Antworten unterscheiden. Keine der Antworten darf Trüb.

    Die gepostete Nachricht hat folgendes Format. payload kann über die Option generatePayload angepasst werden, mit der die Instanz erstellt wurde:

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

    Die Funktion notifyIfUpdated sieht so aus: 

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

    • Gibt zurück

      Promise<void>

      Wird behoben, sobald das Update gesendet wurde.

BroadcastCacheUpdateOptions

Attribute

BroadcastUpdatePlugin

Dieses Plug-in sendet automatisch eine Nachricht, wenn eine im Cache gespeicherte Antwort wird aktualisiert.

Attribute

  • Konstruktor

    void

    workbox-broadcast-update.BroadcastUpdate-Instanz erstellen mit die übergebenen Optionen und ruft die zugehörige notifyIfUpdated-Methode auf, wenn die Der cacheDidUpdate-Callback des Plug-ins wird aufgerufen.

    Die Funktion constructor sieht so aus: 

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

Methoden

responsesAreSame()

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

Vergleicht bei zwei Response's-Werten mehrere Headerwerte, um festzustellen, ob sie gleich sein oder nicht.

Parameter

  • firstResponse

    Antwort

  • secondResponse

    Antwort

  • headersToCheck

    String[]

Gibt Folgendes zurück:

  • boolean