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

Typen

BroadcastCacheUpdate

Die postMessage() API wird verwendet, um offene Fenster/Tabs darüber zu informieren, dass eine im Cache gespeicherte Antwort aktualisiert wurde.

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

Attribute

  • Konstruktor

    void

    Erstellen Sie eine BroadcastCacheUpdate-Instanz mit einer bestimmten channelName, um Nachrichten über

    Die Funktion constructor sieht so aus: 

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

  • notifyIfUpdated

    void

    Vergleicht zwei Antworten und sendet eine Nachricht (über postMessage()) an alle Window-Clients, wenn sich die Antworten unterscheiden. Keine der Antworten darf opak sein.

    Die gepostete Nachricht hat das folgende Format, wobei payload über die Option generatePayload angepasst werden kann, mit der die Instanz erstellt wird:

    {
  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 wird.

BroadcastCacheUpdateOptions

Attribute

  • headersToCheck

    string[] optional

  • notifyAllClients

    Boolescher Wert optional

  • generatePayload

    void optional

    Die Funktion generatePayload sieht so aus: 

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

    • Gibt zurück

      Datensatz<stringany>

BroadcastUpdatePlugin

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

Attribute

  • Konstruktor

    void

    Erstellen Sie eine workbox-broadcast-update.BroadcastUpdate-Instanz mit den übergebenen Optionen und rufen Sie ihre notifyIfUpdated-Methode auf, wenn der cacheDidUpdate-Callback des Plug-ins aufgerufen wird.

    Die Funktion constructor sieht so aus: 

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

Methoden

responsesAreSame()

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

Bei zwei Response's werden mehrere Headerwerte verglichen, um festzustellen, ob sie identisch sind oder nicht.

Parameters

  • firstResponse

    Antwort

  • secondResponse

    Antwort

  • headersToCheck

    String[]

Rückgaben

  • boolean