#workboxbroadcast-update

キャッシュに保存されたエントリを使用してリクエストに応答すると、レスポンスは速くなりますが、古いデータが表示される可能性があるというトレードオフがあります。

workbox-broadcast-update パッケージは、Google Cloud リソースへの ウィンドウ クライアント レスポンスが更新されたことを通知します。これは、コンテナ イメージと StaleWhileRevalidate 戦略。

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

ウィンドウ クライアントは更新をリッスンし、次のような適切なアクションを実行できます。 更新があったことを知らせるメッセージがユーザーに自動的に表示される 使用できます。

更新はどのように決定されますか？

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

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

ワークボックスでは、ヘッダーの 1 バイト単位の比較ではなく、ヘッダー値が レスポンス本文をより効率的に作成できるように 大規模な回答

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

このライブラリは、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 を使用しますが、サービス ワーカー コードで基盤となるロジックを使用することもできます。

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

型

BroadcastCacheUpdate

postMessage() API を使用して、開いているウィンドウやタブに、キャッシュに保存された レスポンスを更新しました。

効率を高めるため、基盤となるレスポンス本文は比較されません。 特定のレスポンス ヘッダーのみがチェックされます。

プロパティ

  • コンストラクタ

    void

    特定の channelName を使用して BroadcastCacheUpdate インスタンスを作成し、メッセージをブロードキャストします。

    constructor 関数は次のようになります。 

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

  • notifyIfUpdated

    void

    2 つのレスポンスを比較し、レスポンスが異なる場合は（postMessage() を介して）すべてのウィンドウ クライアントにメッセージを送信します。いずれの回答も opaque。

    送信されるメッセージの形式は次のとおりです（payload は、インスタンスの作成時に指定した generatePayload オプションでカスタマイズできます）。

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

    notifyIfUpdated 関数は次のようになります。 

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

    • 戻り値

      Promise<void>

      更新が送信されると解決します。

BroadcastCacheUpdateOptions

プロパティ

  • headersToCheck

    文字列 [] 省略可

  • notifyAllClients

    ブール値（省略可）

  • generatePayload

    void 省略可

    generatePayload 関数は次のようになります。 

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

    • 戻り値

      Record<stringany>

BroadcastUpdatePlugin

このプラグインは、キャッシュに保存されたレスポンスが更新されるたびにメッセージを自動的にブロードキャストします。

プロパティ

  • コンストラクタ

    void

    次のコマンドで workbox-broadcast-update.BroadcastUpdate インスタンスを作成します。 渡され、実行時に notifyIfUpdated メソッドが プラグインの cacheDidUpdate コールバックが呼び出されます。

    constructor 関数は次のようになります。 

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

メソッド

responsesAreSame()

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

2 つの Response's が与えられた場合、いくつかのヘッダー値を比較して、 同じかもしれません

パラメータ

  • firstResponse

    レスポンス

  • secondResponse

    レスポンス

  • headersToCheck

    string[]

戻り値

  • ブール値