#workboxbroadcast-update

キャッシュに保存されたエントリを使用してリクエストに応答する場合、高速ですが、ユーザーに古いデータが表示されるというトレードオフが伴います。

workbox-broadcast-update パッケージは、キャッシュに保存されたレスポンスが更新されたことをウィンドウ クライアントに通知する標準的な方法を提供します。これは、StaleWhileRevalidate 戦略と併用するのが一般的です。

その戦略の「再検証」ステップで、以前にキャッシュに保存されたものとは異なるレスポンスをネットワークから取得するたび、このモジュールは現在の Service Worker のスコープ内にあるすべてのウィンドウ クライアントに（postMessage() を介して）メッセージを送信します。

Window クライアントは、更新をリッスンし、更新が利用可能であることを知らせるメッセージを自動的に表示するなど、適切なアクションを実行できます。

更新の決定方法

キャッシュされたオブジェクトと新しい Response オブジェクトの特定のヘッダーが比較され、いずれかのヘッダーの値が異なる場合は更新とみなされます。

デフォルトでは、Content-Length、ETag、Last-Modified の各ヘッダーが比較されます。

Workbox は、レスポンス本文をバイト単位で比較するのではなく、ヘッダー値を使用して、特に大規模なレスポンスの場合に効率を高めます。

ブロードキャスト アップデートの使用

このライブラリは、キャッシュに保存されたレスポンスをすぐに返すだけでなく、キャッシュを非同期で更新するメカニズムも提供するため、StaleWhileRevalidate キャッシュ戦略と併せて使用することをおすすめします。

戦略のオプションに broadcastUpdate.BroadcastUpdatePlugin を追加するだけで、最新情報をブロードキャストできます。

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

ウェブアプリでは、DOMContentLoaded イベントが発生する前に、次のようにこれらのイベントをリッスンできます。

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

メッセージの形式

ウェブアプリで message イベント リスナーが呼び出されると、event.data プロパティの形式は次のようになります。

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

確認するヘッダーをカスタマイズ

確認するヘッダーをカスタマイズするには、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'],
      }),
    ],
  })
);

高度な使用方法

ほとんどのデベロッパーは、上記のように特定の戦略のプラグインとして workbox-broadcast-update を使用しますが、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[],
)