Workbox-broadcast-update

Odpowiadanie na żądania za pomocą wpisów z pamięci podręcznej jest szybkie, ale ma tę wadę, że użytkownicy mogą zobaczyć nieaktualne dane.

Pakiet workbox-broadcast-update to standardowy sposób powiadamiania Klienty okien że odpowiedź w pamięci podręcznej została zaktualizowana. Jest ona najczęściej używana razem ze strategią StaleWhileRevalidate.

Za każdym razem, gdy pojawi się opcja „ponowna weryfikacja” tej strategii pobiera odpowiedź z w innej sieci niż ta, która była wcześniej zapisana w pamięci podręcznej, ten moduł wyśle wiadomość (przez postMessage()) do wszystkich klientów Windows w zakresie bieżącego skryptu service worker.

Klienty okien mogą nasłuchiwać aktualizacji i podejmować odpowiednie działania, takie jak: automatyczne wyświetlanie wiadomości z informacją o aktualizacji są dostępne.

Jak określane są aktualizacje?

Porównywane są niektóre nagłówki obiektów z pamięci podręcznej i nowych obiektów Response. Jeśli któryś z nich ma inne wartości, jest to uznawane za aktualizację.

Domyślnie nagłówki Content-Length, ETag i Last-Modified są w porównaniu z innymi podmiotami.

Workbox używa wartości nagłówka zamiast porównania między bajtami by organy reagowania były bardziej efektywne, zwłaszcza w przypadku potencjalnie duże odpowiedzi

Korzystanie z aktualizacji transmisji

Biblioteka jest przeznaczona do używania razem ze strategią StaleWhileRevalidate przechowywania w pamięci podręcznej, ponieważ ta strategia obejmuje natychmiastowe zwracanie odpowiedzi z pamięci podręcznej, ale też zapewnia mechanizm asynchronicznego aktualizowania pamięci podręcznej.

Aby przesyłać aktualizacje, musisz tylko dodać broadcastUpdate.BroadcastUpdatePlugin do strategii ustalania stawek.

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

W aplikacji internetowej przed wywołaniem zdarzenia DOMContentLoaded możesz nasłuchiwać tych zdarzeń w taki sposób:

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

Format wiadomości

Gdy w aplikacji internetowej zostanie wywołany detektor zdarzeń message, Właściwość event.data będzie mieć taki 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/'
  }
}

Dostosowywanie nagłówków do sprawdzenia

Możesz dostosować nagłówki do sprawdzenia, ustawiając właściwość headersToCheck.

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

Zaawansowane

Większość deweloperów używa workbox-broadcast-update jako wtyczki w przypadku konkretnej strategii, jak pokazano powyżej, możesz wykorzystać w kodzie skryptu service worker.

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