ワークボックス戦略

サービス ワーカーが最初に導入されたとき、一連の一般的なキャッシュ保存戦略が登場しました。キャッシュ保存戦略は、サービス ワーカーがフェッチ イベントを受信した後にレスポンスを生成する方法を決定するパターンです。

workbox-strategies には最も一般的なキャッシュ保存戦略が用意されているため、サービス ワーカーで簡単に適用できます。

Workbox でサポートされている戦略以外の詳細については説明しませんが、オフライン クックブックで詳細を確認できます。

戦略の使用

次の例では、workbox-routing で Workbox キャッシュ保存戦略を使用する方法を示します。各戦略で定義できるオプションについては、このドキュメントの戦略の構成セクションで説明しています。

高度な使用方法のセクションでは、workbox-routing を使用せずにキャッシュ保存戦略を直接使用する方法について説明します。

Stale-While-Revalidate

Stale While Revalidate の図

stale-while-revalidate パターンを使用すると、キャッシュに保存されたレスポンスが利用可能な場合は、そのレスポンスでリクエストにできるだけ早く応答し、キャッシュに保存されていない場合はネットワーク リクエストにフォールバックできます。ネットワーク リクエストは、キャッシュの更新に使用されます。stale-while-revalidate の一部の実装とは異なり、この戦略では、キャッシュに保存されたレスポンスの経過時間に関係なく、常に再検証リクエストが行われます。

これは、最新のリソースがアプリケーションにとって重要ではない場合に、よく使用される戦略です。

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Cache First（キャッシュにフォールバックするネットワーク）

最初の図をキャッシュに保存する

オフラインのウェブアプリはキャッシュに大きく依存しますが、重要ではなく、徐々にキャッシュに保存できるアセットの場合は、キャッシュ ファーストが最適なオプションです。

キャッシュにレスポンスがある場合、キャッシュに保存されたレスポンスを使用してリクエストが処理され、ネットワークはまったく使用されません。キャッシュに保存されたレスポンスがない場合、リクエストはネットワーク リクエストによって処理され、レスポンスはキャッシュに保存されます。これにより、次のリクエストはキャッシュから直接処理されます。

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

ネットワーク優先（ネットワークからキャッシュにフォールバック）

ネットワーク ファーストの図

頻繁に更新されるリクエストには、ネットワーク ファースト戦略が最適なソリューションです。デフォルトでは、ネットワークから最新のレスポンスを取得しようとします。リクエストが成功すると、レスポンスがキャッシュに保存されます。ネットワークがレスポンスを返せなかった場合、キャッシュに保存されているレスポンスが使用されます。

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

ネットワークのみ

ネットワークのみの図

ネットワークから特定のリクエストを満たす必要がある場合は、ネットワークのみの戦略を使用します。

import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

キャッシュのみ

キャッシュのみの図

キャッシュのみ戦略では、レスポンスがキャッシュから取得されることが保証されます。これは Workbox ではあまり一般的ではありませんが、独自のプリキャッシュ手順がある場合に役立ちます。

import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

戦略の構成

どの戦略でも、次の項目を構成できます。

  • 戦略で使用するキャッシュの名前。
  • 戦略で使用するキャッシュの有効期限の制限。
  • リクエストのフェッチとキャッシュ保存時にライフサイクル メソッドが呼び出されるプラグインの配列。

戦略で使用されるキャッシュを変更する

キャッシュ名を指定することで、使用するキャッシュ戦略を変更できます。これは、デバッグに役立つようにアセットを分離する場合に便利です。

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

プラグインを使用する

Workbox には、これらの戦略で使用できる一連のプラグインが付属しています。

これらのプラグイン（またはカスタム プラグイン）を使用するには、インスタンスを plugins オプションに渡すだけです。

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

カスタム戦略

Workbox では、戦略を構成するだけでなく、独自のカスタム戦略を作成することもできます。これを行うには、workbox-strategies から Strategy 基本クラスをインポートして拡張します。

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

この例では、handle() は特定処理ロジックを定義するリクエスト戦略として使用されています。使用できるリクエスト戦略は 2 つあります。

  • handle(): リクエスト戦略を実行し、Response で解決される Promise を返し、関連するすべてのプラグイン コールバックを呼び出します。
  • handleAll(): handle() に似ていますが、2 つの Promise オブジェクトを返します。1 つ目は handle() が返すものと同等で、2 つ目は戦略内の event.waitUntil() に追加された Promise が完了したときに解決されます。

どちらのリクエスト戦略も、次の 2 つのパラメータで呼び出されます。

  • request: 戦略がレスポンスを返す Request。
  • handler: 現在の戦略用に自動的に作成された StrategyHandler インスタンス。

新しい戦略の作成

次に、NetworkOnly の動作を再実装する新しい戦略の例を示します。

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

ネイティブの fetch メソッドではなく handler.fetch() が呼び出されていることに注意してください。StrategyHandler クラスには、handle() または handleAll() が使用されるたびに使用できる、さまざまなフェッチ アクションとキャッシュ アクションが用意されています。

  • fetch: 指定されたリクエストを取得し、requestWillFetch()、fetchDidSucceed()、fetchDidFail() プラグインのライフサイクル メソッドを呼び出します。
  • cacheMatch: キャッシュからリクエストを照合し、cacheKeyWillBeUsed() プラグインと cachedResponseWillBeUsed() プラグインのライフサイクル メソッドを呼び出します。
  • cachePut: リクエスト/レスポンスのペアをキャッシュに保存し、cacheKeyWillBeUsed()、cacheWillUpdate()、cacheDidUpdate() プラグインのライフサイクル メソッドを呼び出します。
  • fetchAndCachePut: fetch() を呼び出し、fetch() によって生成されたレスポンスに対してバックグラウンドで cachePut() を実行します。
  • hasCallback: コールバックを入力として受け取り、指定されたコールバックを持つプラグインが戦略に 1 つ以上ある場合は true を返します。
  • runCallbacks: 指定された名前に一致するすべてのプラグイン コールバックを順番に実行し、指定されたパラメータ オブジェクト（現在のプラグインの状態とマージされたもの）を唯一の引数として渡します。
  • iterateCallbacks: コールバックを受け取り、一致するプラグイン コールバックのイテラブルを返します。各コールバックは現在のハンドラ状態でラップされます（つまり、各コールバックを呼び出すと、渡されたオブジェクト パラメータはプラグインの現在の状態とマージされます）。
  • waitUntil: 処理中のリクエストに関連付けられたイベント（通常は FetchEvent）の存続期間を延長する Promise に Promise を追加します。
  • doneWaiting: waitUntil() に渡されたすべての Promise が確定すると解決される Promise を返します。
  • destroy: 戦略の実行を停止し、保留中の waitUntil() プロミスを直ちに解決します。

カスタム キャッシュ ネットワーク レース戦略

次の例は、オフライン クックブックの cache-network-race（Workbox では提供されていません）に基づいています。ただし、さらに一歩進んで、ネットワーク リクエストが成功した後に常にキャッシュを更新します。これは、複数のアクションを使用するより複雑な戦略の例です。

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

高度な使用方法

独自の fetch イベント ロジックで戦略を使用する場合は、戦略クラスを使用して、特定の戦略でリクエストを実行できます。

たとえば、stale-while-revalidate 戦略を使用するには、次の操作を行います。

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

使用可能なクラスの一覧については、workbox-strategies リファレンス ドキュメントをご覧ください。

型

CacheFirst

キャッシュ ファーストのリクエスト戦略の実装。

キャッシュ ファースト戦略は、/styles/example.a8f5f1.css などの URL のように、リビジョンが付けられたアセットに便利です。これらのアセットは長期間キャッシュに保存できるためです。

ネットワーク リクエストが失敗し、キャッシュが一致しない場合は、WorkboxError 例外がスローされます。

プロパティ

  • コンストラクタ

    void

    戦略の新しいインスタンスを作成し、ドキュメントに記載されているすべてのオプション プロパティを公開インスタンス プロパティとして設定します。

    注: カスタム戦略クラスがベースの Strategy クラスを拡張し、これらのプロパティを超えるプロパティを必要としない場合、独自のコンストラクタを定義する必要はありません。

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

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

  • cacheName

    文字列

  • fetchOptions

    RequestInit 省略可

  • matchOptions

    CacheQueryOptions 省略可

  • プラグイン

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<Response>

  • ハンドル

    void

    リクエスト戦略を実行し、関連するすべてのプラグイン コールバックを呼び出して Response で解決される Promise を返します。

    戦略インスタンスが Workbox workbox-routing.Route に登録されると、ルートが一致したときにこのメソッドが自動的に呼び出されます。

    または、このメソッドをスタンドアロンの FetchEvent リスナーで使用するには、event.respondWith() に渡します。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と同様ですが、Response に解決される Promise を返すだけでなく、[response, done] Promise のタプルを返します。ここで、前者（response）は handle() が返すものと同等であり、後者は、戦略の実行の一部として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

    done プロミスを待機して、戦略によって実行される追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了するようにできます。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      [Promise<Response>, Promise<void>]

      レスポンスが解決されるタイミングと、ハンドラがすべての処理を完了したタイミングを判断するために使用できる [response, done] Promise のタプル。

CacheOnly

キャッシュのみのリクエスト戦略の実装。

このクラスは、Workbox プラグインを活用したい場合に便利です。

キャッシュに一致するものがない場合、WorkboxError 例外がスローされます。

プロパティ

  • コンストラクタ

    void

    戦略の新しいインスタンスを作成し、ドキュメントに記載されているすべてのオプション プロパティを公開インスタンス プロパティとして設定します。

    注: カスタム戦略クラスがベースの Strategy クラスを拡張し、これらのプロパティを超えるプロパティを必要としない場合、独自のコンストラクタを定義する必要はありません。

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

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

  • cacheName

    文字列

  • fetchOptions

    RequestInit 省略可

  • matchOptions

    CacheQueryOptions 省略可

  • プラグイン

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<Response>

  • ハンドル

    void

    リクエスト戦略を実行し、関連するすべてのプラグイン コールバックを呼び出して Response で解決される Promise を返します。

    戦略インスタンスが Workbox workbox-routing.Route に登録されると、ルートが一致したときにこのメソッドが自動的に呼び出されます。

    または、このメソッドをスタンドアロンの FetchEvent リスナーで使用するには、event.respondWith() に渡します。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と同様ですが、Response に解決される Promise を返すだけでなく、[response, done] Promise のタプルを返します。ここで、前者（response）は handle() が返すものと同等であり、後者は、戦略の実行の一部として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

    done プロミスを待機して、戦略によって実行される追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了するようにできます。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      [Promise<Response>, Promise<void>]

      レスポンスが解決されるタイミングと、ハンドラがすべての処理を完了したタイミングを判断するために使用できる [response, done] Promise のタプル。

NetworkFirst

ネットワーク ファーストのリクエスト戦略の実装。

デフォルトでは、この戦略では、ステータス コードが 200 のレスポンスと不透明なレスポンスがキャッシュに保存されます。不透明なレスポンスは、レスポンスが CORS をサポートしていないクロスオリジン リクエストです。

ネットワーク リクエストが失敗し、キャッシュが一致しない場合は、WorkboxError 例外がスローされます。

プロパティ

  • コンストラクタ

    void

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

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

  • cacheName

    文字列

  • fetchOptions

    RequestInit 省略可

  • matchOptions

    CacheQueryOptions 省略可

  • プラグイン

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<Response>

  • ハンドル

    void

    リクエスト戦略を実行し、関連するすべてのプラグイン コールバックを呼び出して Response で解決される Promise を返します。

    戦略インスタンスが Workbox workbox-routing.Route に登録されると、ルートが一致したときにこのメソッドが自動的に呼び出されます。

    または、このメソッドをスタンドアロンの FetchEvent リスナーで使用するには、event.respondWith() に渡します。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と同様ですが、Response に解決される Promise を返すだけでなく、[response, done] Promise のタプルを返します。ここで、前者（response）は handle() が返すものと同等であり、後者は、戦略の実行の一部として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

    done プロミスを待機して、戦略によって実行される追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了するようにできます。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      [Promise<Response>, Promise<void>]

      レスポンスが解決されるタイミングと、ハンドラがすべての処理を完了したタイミングを判断するために使用できる [response, done] Promise のタプル。

NetworkFirstOptions

プロパティ

  • cacheName

    文字列（省略可）

  • fetchOptions

    RequestInit 省略可

  • matchOptions

    CacheQueryOptions 省略可

  • networkTimeoutSeconds

    number 省略可

  • プラグイン

    WorkboxPlugin[] 省略可

NetworkOnly

ネットワークのみのリクエスト戦略の実装。

このクラスは、Workbox プラグインを活用したい場合に便利です。

ネットワーク リクエストが失敗すると、WorkboxError 例外がスローされます。

プロパティ

  • コンストラクタ

    void

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

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

  • cacheName

    文字列

  • fetchOptions

    RequestInit 省略可

  • matchOptions

    CacheQueryOptions 省略可

  • プラグイン

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<Response>

  • ハンドル

    void

    リクエスト戦略を実行し、関連するすべてのプラグイン コールバックを呼び出して Response で解決される Promise を返します。

    戦略インスタンスが Workbox workbox-routing.Route に登録されると、ルートが一致したときにこのメソッドが自動的に呼び出されます。

    または、このメソッドをスタンドアロンの FetchEvent リスナーで使用するには、event.respondWith() に渡します。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と同様ですが、Response に解決される Promise を返すだけでなく、[response, done] Promise のタプルを返します。ここで、前者（response）は handle() が返すものと同等であり、後者は、戦略の実行の一部として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

    done プロミスを待機して、戦略によって実行される追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了するようにできます。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      [Promise<Response>, Promise<void>]

      レスポンスが解決されるタイミングと、ハンドラがすべての処理を完了したタイミングを判断するために使用できる [response, done] Promise のタプル。

NetworkOnlyOptions

プロパティ

  • fetchOptions

    RequestInit 省略可

  • networkTimeoutSeconds

    number 省略可

  • プラグイン

    WorkboxPlugin[] 省略可

StaleWhileRevalidate

stale-while-revalidate リクエスト戦略の実装。

リソースはキャッシュとネットワークの両方から並行してリクエストされます。この戦略では、キャッシュに保存されているバージョンが利用可能な場合はそのバージョンを返し、利用可能でない場合はネットワーク レスポンスを待ちます。キャッシュは、リクエストが成功するたびにネットワーク レスポンスで更新されます。

デフォルトでは、この戦略では、ステータス コードが 200 のレスポンスと不透明なレスポンスがキャッシュに保存されます。不透明なレスポンスは、レスポンスが CORS をサポートしていないクロスオリジン リクエストです。

ネットワーク リクエストが失敗し、キャッシュが一致しない場合は、WorkboxError 例外がスローされます。

プロパティ

  • コンストラクタ

    void

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

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

  • cacheName

    文字列

  • fetchOptions

    RequestInit 省略可

  • matchOptions

    CacheQueryOptions 省略可

  • プラグイン

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<Response>

  • ハンドル

    void

    リクエスト戦略を実行し、関連するすべてのプラグイン コールバックを呼び出して Response で解決される Promise を返します。

    戦略インスタンスが Workbox workbox-routing.Route に登録されると、ルートが一致したときにこのメソッドが自動的に呼び出されます。

    または、このメソッドをスタンドアロンの FetchEvent リスナーで使用するには、event.respondWith() に渡します。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と同様ですが、Response に解決される Promise を返すだけでなく、[response, done] Promise のタプルを返します。ここで、前者（response）は handle() が返すものと同等であり、後者は、戦略の実行の一部として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

    done プロミスを待機して、戦略によって実行される追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了するようにできます。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      [Promise<Response>, Promise<void>]

      レスポンスが解決されるタイミングと、ハンドラがすべての処理を完了したタイミングを判断するために使用できる [response, done] Promise のタプル。

Strategy

他のすべての戦略クラスが拡張する必要がある抽象ベースクラス:

プロパティ

  • コンストラクタ

    void

    戦略の新しいインスタンスを作成し、ドキュメントに記載されているすべてのオプション プロパティを公開インスタンス プロパティとして設定します。

    注: カスタム戦略クラスがベースの Strategy クラスを拡張し、これらのプロパティを超えるプロパティを必要としない場合、独自のコンストラクタを定義する必要はありません。

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

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

  • cacheName

    文字列

  • fetchOptions

    RequestInit 省略可

  • matchOptions

    CacheQueryOptions 省略可

  • プラグイン

    WorkboxPlugin[]

  • _awaitComplete

    void

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • handler

      StrategyHandler

    • リクエスト

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<Response>

  • _handle

    void

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

    (request: Request, handler: StrategyHandler) => {...}

    • 戻り値

      Promise<Response>

  • ハンドル

    void

    リクエスト戦略を実行し、関連するすべてのプラグイン コールバックを呼び出して Response で解決される Promise を返します。

    戦略インスタンスが Workbox workbox-routing.Route に登録されると、ルートが一致したときにこのメソッドが自動的に呼び出されます。

    または、このメソッドをスタンドアロンの FetchEvent リスナーで使用するには、event.respondWith() に渡します。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と同様ですが、Response に解決される Promise を返すだけでなく、[response, done] Promise のタプルを返します。ここで、前者（response）は handle() が返すものと同等であり、後者は、戦略の実行の一部として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

    done プロミスを待機して、戦略によって実行される追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了するようにできます。

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • オプション

      FetchEvent | HandlerCallbackOptions

      FetchEvent または次のプロパティを持つオブジェクト。

    • 戻り値

      [Promise<Response>, Promise<void>]

      レスポンスが解決されるタイミングと、ハンドラがすべての処理を完了したタイミングを判断するために使用できる [response, done] Promise のタプル。

StrategyHandler

Strategy インスタンスが workbox-strategies.Strategy~handle または workbox-strategies.Strategy~handleAll を呼び出すたびに作成されるクラス。すべてのフェッチ アクションとキャッシュ アクションをプラグイン コールバックでラップし、ストラテジーが「完了」したタイミング（追加されたすべての event.waitUntil() プロミスが解決されたタイミング）を追跡します。

プロパティ

  • コンストラクタ

    void

    渡された戦略と、リクエストを処理するイベントに関連付けられた新しいインスタンスを作成します。

    コンストラクタは、このリクエストを処理する各プラグインに渡される状態も初期化します。

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

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • イベント

    ExtendableEvent

  • params

    省略可

  • リクエスト

    リクエスト

  • URL

    URL（省略可）

  • cacheMatch

    void

    戦略オブジェクトで定義された cacheName、matchOptions、plugins を使用して、キャッシュからリクエストを照合します（該当するプラグイン コールバック メソッドを呼び出します）。

    このメソッドを使用すると、次のプラグイン ライフサイクル メソッドが呼び出されます。

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

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

    (key: RequestInfo) => {...}

    • key

      RequestInfo

      キャッシュキーとして使用するリクエストまたは URL。

    • 戻り値

      Promise<Response>

      一致するレスポンス（見つかった場合）。

  • cachePut

    void

    ストラテジ オブジェクトで定義された cacheName と plugins を使用して、リクエストとレスポンスのペアをキャッシュに保存します（また、該当するプラグイン コールバック メソッドを呼び出します）。

    このメソッドを使用すると、次のプラグイン ライフサイクル メソッドが呼び出されます。

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

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

    (key: RequestInfo, response: Response) => {...}

    • key

      RequestInfo

      キャッシュキーとして使用するリクエストまたは URL。

    • レスポンス

      レスポンス

      キャッシュに保存するレスポンス。

    • 戻り値

      Promise<boolean>

      cacheWillUpdate によってレスポンスがキャッシュに保存されなかった場合は false、それ以外の場合は true。

  • destroy

    void

    戦略の実行を停止し、保留中の waitUntil() プロミスを直ちに解決します。

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

    () => {...}

  • doneWaiting

    void

    workbox-strategies.StrategyHandler~waitUntil に渡されたすべての Promise が確定すると解決される Promise を返します。

    注: doneWaiting() が確定した後に実行される処理は、イベントの waitUntil() メソッド（このハンドラの waitUntil() メソッドではない）に手動で渡す必要があります。そうしないと、処理が完了する前にサービス ワーカー スレッドが強制終了される可能性があります。

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

    () => {...}

    • 戻り値

      Promise<void>

  • 取得する；フェッチする（#など適宜文脈に応じて）

    void

    Strategy オブジェクトで定義された fetchOptions（ナビゲーション以外のリクエストの場合）と plugins を使用して、指定されたリクエストを取得します（該当するプラグイン コールバック メソッドを呼び出します）。

    このメソッドを使用すると、次のプラグイン ライフサイクル メソッドが呼び出されます。

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

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

    (input: RequestInfo) => {...}

    • 入力

      RequestInfo

      取得する URL またはリクエスト。

    • 戻り値

      Promise<Response>

  • fetchAndCachePut

    void

    this.fetch() を呼び出し、（バックグラウンドで）this.fetch() によって生成されたレスポンスに対して this.cachePut() を実行します。

    this.cachePut() の呼び出しは this.waitUntil() を自動的に呼び出すため、イベントで waitUntil() を手動で呼び出す必要はありません。

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

    (input: RequestInfo) => {...}

    • 入力

      RequestInfo

      取得してキャッシュに保存するリクエストまたは URL。

    • 戻り値

      Promise<Response>

  • getCacheKey

    void

    プラグインのリストで cacheKeyWillBeUsed コールバックをチェックし、見つかったコールバックを順番に実行します。最後のプラグインから返された最終的な Request オブジェクトは、キャッシュの読み取り/書き込みのキャッシュキーとして扱われます。cacheKeyWillBeUsed プラグイン コールバックが登録されていない場合、渡されたリクエストは変更されずに返されます。

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

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • リクエスト

      リクエスト

    • モード

      "read"
       | "write"

    • 戻り値

      Promise<Request>

  • hasCallback

    void

    指定されたコールバックを持つプラグインが戦略に 1 つ以上ある場合、true を返します。

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

    (name: C) => {...}

    • name

      C

      確認するコールバックの名前。

    • 戻り値

      ブール値

  • iterateCallbacks

    void

    コールバックを受け取り、一致するプラグイン コールバックのイテラブルを返します。各コールバックは現在のハンドラ状態でラップされます（つまり、各コールバックを呼び出すと、渡されたオブジェクト パラメータはプラグインの現在の状態とマージされます）。

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

    (name: C) => {...}

    • name

      C

      実行するコールバックの名前

    • 戻り値

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    void

    指定された名前に一致するすべてのプラグイン コールバックを順番に実行し、指定された param オブジェクト（現在のプラグインの状態とマージされたもの）を唯一の引数として渡します。

    注: このメソッドはすべてのプラグインを実行するため、次のコールバックを呼び出す前にコールバックの戻り値を適用する必要がある場合には適していません。このケースの処理方法については、workbox-strategies.StrategyHandler#iterateCallbacks をご覧ください。

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

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • name

      C

      各プラグイン内で実行するコールバックの名前。

    • param

      <indexedAccess"state"
      > を省略

      各コールバックを実行するときに最初の（唯一の）パラメータとして渡すオブジェクト。このオブジェクトは、コールバックの実行前に現在のプラグインの状態とマージされます。

    • 戻り値

      Promise<void>

  • waitUntil

    void

    処理中のリクエスト（通常は FetchEvent）に関連付けられたイベントの [extend lifetime promises]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises に Promise を追加します。

    注: workbox-strategies.StrategyHandler~doneWaiting を待機すると、追加されたすべての Promise が解決されたタイミングを確認できます。

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

    (promise: Promise<T>) => {...}

    • promise

      Promise<T>

      リクエストをトリガーしたイベントのライフタイムを延長する Promise に追加する Promise。

    • 戻り値

      Promise<T>

StrategyOptions

プロパティ

  • cacheName

    文字列（省略可）

  • fetchOptions

    RequestInit 省略可

  • matchOptions

    CacheQueryOptions 省略可

  • プラグイン

    WorkboxPlugin[] 省略可