ワークボックス戦略

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

workbox-strategies は最も一般的なキャッシュ戦略を提供するため、サービス ワーカーで簡単に適用できます。

ここでは、Workbox でサポートされている戦略以外については詳しく説明しません。詳しくは、オフライン クックブックをご覧ください。

戦略の使用

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

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

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

キャッシュ優先（キャッシュになければネットワークから取得）

キャッシュ ファースト図

オフライン ウェブアプリはキャッシュに大きく依存しますが、クリティカルではなく、段階的にキャッシュに保存できるアセットの場合は、キャッシュ優先が最適なオプションです。

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

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）の存続期間延長プロミスにプロミスを追加します。
  • doneWaiting: waitUntil() に渡されたすべての Promise が解決すると解決する Promise を返します。
  • destroy: 戦略の実行を停止し、保留中の waitUntil() プロミスを直ちに解決します。

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

次の例は、Offline Cookbook の 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);
          }
        }
      );
    });
  }
}

高度な使用方法

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

たとえば、再検証中の古いデータを使用する戦略を適用するには、次のようにします。

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（省略可）

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      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 の Tuple を返します。前者（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（省略可）

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      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 の Tuple を返します。前者（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（省略可）

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<Response>

  • ハンドル

    void

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

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

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

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

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

    • オプション

      FetchEvent | HandlerCallbackOptions

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

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と類似していますが、Response に解決する Promise を返すのではなく、[response, done] Promise の Tuple を返します。前者（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（省略可）

  • plugins

    WorkboxPlugin[] 省略可

NetworkOnly

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

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

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

プロパティ

  • コンストラクタ

    void

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

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

  • cacheName

    文字列

  • fetchOptions

    RequestInit（省略可）

  • matchOptions

    CacheQueryOptions（省略可）

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      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 の Tuple を返します。前者（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（省略可）

  • plugins

    WorkboxPlugin[] 省略可

StaleWhileRevalidate

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

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

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

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

プロパティ

  • コンストラクタ

    void

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

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

  • cacheName

    文字列

  • fetchOptions

    RequestInit（省略可）

  • matchOptions

    CacheQueryOptions（省略可）

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<Response>

  • ハンドル

    void

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

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

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

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

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

    • オプション

      FetchEvent | HandlerCallbackOptions

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

    • 戻り値

      Promise<Response>

  • handleAll

    void

    workbox-strategies.Strategy~handle と類似していますが、Response に解決する Promise を返すのではなく、[response, done] Promise の Tuple を返します。前者（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（省略可）

  • plugins

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise<void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      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 の Tuple を返します。前者（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() Promise が解決したタイミング）を追跡します。

プロパティ

  • コンストラクタ

    void

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

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

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

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

  • イベント

    ExtendableEvent

  • params

    任意（省略可）

  • request

    リクエスト

  • 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&lt;boolean&gt;

      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" 
         ) => {...}

    • request

      リクエスト

    • モード

      「read」
       | 「write」

    • 戻り値

      Promise<Request>

  • hasCallback

    void

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

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

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

    • name

      C

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

    • 戻り値

      ブール値

  • iterateCallbacks

    void

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

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

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

    • name

      C

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

    • 戻り値

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    void

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

    注: このメソッドはすべてのプラグインを実行するため、次のコールバックを呼び出す前にコールバックの戻り値を適用する必要があるケースには適していません。そのようなケースの処理方法については、以下の 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 を待機します。

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

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

    • promise

      Promise<T>

      リクエストをトリガーしたイベントの有効期間延長 Promise に追加する Promise。

    • 戻り値

      Promise<T>

StrategyOptions

プロパティ

  • cacheName

    文字列（省略可）

  • fetchOptions

    RequestInit（省略可）

  • matchOptions

    CacheQueryOptions（省略可）

  • plugins

    WorkboxPlugin[] 省略可