ワークボックス戦略

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

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

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

キャッシュのみ

「キャッシュのみ」戦略では、レスポンスがキャッシュから取得されます。これはワークボックスではあまり一般的ではありませんが、独自の事前キャッシュ ステップがある場合に役立ちます。

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 には、これらの戦略で使用できるプラグインのセットが付属しています。

• workbox-background-sync
• workbox-broadcast-update
• workbox-cacheable-response
• workbox-expiration
• workbox-range-requests

これらのプラグイン（またはカスタム プラグイン）を使用するには、インスタンスを 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: 処理されるリクエストに関連付けられているイベントの有効期間延長 Promise に Promise を追加します（通常は FetchEvent）。
• doneWaiting: waitUntil() に渡されたすべての Promise が解決すると解決される Promise を返します。
• destroy: 戦略の実行を停止し、保留中の waitUntil() Promise を直ちに解決します。

注: 各アクションで使用できるすべてのパラメータを確認するには、StrategyHandler のソース実装をご覧ください。

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

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

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

高度な使用方法

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

たとえば、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}));
  }
});

使用可能なクラスのリストについては、ワークボックス戦略リファレンス ドキュメントをご覧ください。

型

CacheFirst

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

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

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

プロパティ

• コンストラクタ

  void

  戦略の新しいインスタンスを作成し、文書化されたすべてのオプション プロパティをパブリック インスタンス プロパティとして設定します。

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

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

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

  • オプション

    StrategyOptions 省略可

  • 戻り値

    CacheFirst

• cacheName

  文字列

• fetchOptions

  RequestInit（省略可）

• matchOptions

  CacheQueryOptions 省略可

• プラグイン

  WorkboxPlugin[]

• _完了待ち

  void

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

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<Response>

• handle

  void

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

  戦略インスタンスがワークボックス 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 のタプルを返します。前者（response）は handle() が返すものと等しく、後者は戦略実行の一環として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

  done Promise を待機して、戦略によって実行された追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了したことを確認します。

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

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

  • オプション

    FetchEvent|HandlerCallbackOptions

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

  • 戻り値

    [Promise<Response>,Promise<void>]

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

CacheOnly

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

このクラスは、Workbox プラグインを利用する場合に役立ちます。

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

プロパティ

• コンストラクタ

  void

  戦略の新しいインスタンスを作成し、文書化されたすべてのオプション プロパティをパブリック インスタンス プロパティとして設定します。

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

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

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

  • オプション

    StrategyOptions 省略可

  • 戻り値

    CacheOnly

• cacheName

  文字列

• fetchOptions

  RequestInit（省略可）

• matchOptions

  CacheQueryOptions 省略可

• プラグイン

  WorkboxPlugin[]

• _完了待ち

  void

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

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<Response>

• handle

  void

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

  戦略インスタンスがワークボックス 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 のタプルを返します。前者（response）は handle() が返すものと等しく、後者は戦略実行の一環として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

  done Promise を待機して、戦略によって実行された追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了したことを確認します。

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

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

  • オプション

    FetchEvent|HandlerCallbackOptions

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

  • 戻り値

    [Promise<Response>,Promise<void>]

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

NetworkFirst

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

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

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

プロパティ

• コンストラクタ

  void

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

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

  • オプション

    NetworkFirstOptions 省略可

  • 戻り値

    NetworkFirst

• cacheName

  文字列

• fetchOptions

  RequestInit（省略可）

• matchOptions

  CacheQueryOptions 省略可

• プラグイン

  WorkboxPlugin[]

• _完了待ち

  void

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

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<Response>

• handle

  void

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

  戦略インスタンスがワークボックス 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 のタプルを返します。前者（response）は handle() が返すものと等しく、後者は戦略実行の一環として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

  done Promise を待機して、戦略によって実行された追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了したことを確認します。

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

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

  • オプション

    FetchEvent|HandlerCallbackOptions

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

  • 戻り値

    [Promise<Response>,Promise<void>]

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

NetworkFirstOptions

プロパティ

• cacheName

  string（省略可）

• fetchOptions

  RequestInit（省略可）

• matchOptions

  CacheQueryOptions 省略可

• networkTimeoutSeconds

  number（省略可）

• プラグイン

  WorkboxPlugin[] 省略可

NetworkOnly

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

このクラスは、Workbox プラグインを利用する場合に役立ちます。

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

プロパティ

• コンストラクタ

  void

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

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

  • オプション

    NetworkOnlyOptions 省略可

  • 戻り値

    NetworkOnly

• cacheName

  文字列

• fetchOptions

  RequestInit（省略可）

• matchOptions

  CacheQueryOptions 省略可

• プラグイン

  WorkboxPlugin[]

• _完了待ち

  void

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

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<Response>

• handle

  void

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

  戦略インスタンスがワークボックス 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 のタプルを返します。前者（response）は handle() が返すものと等しく、後者は戦略実行の一環として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

  done Promise を待機して、戦略によって実行された追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了したことを確認します。

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

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

  • オプション

    FetchEvent|HandlerCallbackOptions

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

  • 戻り値

    [Promise<Response>,Promise<void>]

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

NetworkOnlyOptions

プロパティ

• fetchOptions

  RequestInit（省略可）

• networkTimeoutSeconds

  number（省略可）

• プラグイン

  WorkboxPlugin[] 省略可

StaleWhileRevalidate

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

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

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

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

プロパティ

• コンストラクタ

  void

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

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

  • オプション

    StrategyOptions 省略可

  • 戻り値

    StaleWhileRevalidate

• cacheName

  文字列

• fetchOptions

  RequestInit（省略可）

• matchOptions

  CacheQueryOptions 省略可

• プラグイン

  WorkboxPlugin[]

• _完了待ち

  void

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

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<Response>

• handle

  void

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

  戦略インスタンスがワークボックス 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 のタプルを返します。前者（response）は handle() が返すものと等しく、後者は戦略実行の一環として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

  done Promise を待機して、戦略によって実行された追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了したことを確認します。

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

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

  • オプション

    FetchEvent|HandlerCallbackOptions

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

  • 戻り値

    [Promise<Response>,Promise<void>]

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

Strategy

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

プロパティ

• コンストラクタ

  void

  戦略の新しいインスタンスを作成し、文書化されたすべてのオプション プロパティをパブリック インスタンス プロパティとして設定します。

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

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

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

  • オプション

    StrategyOptions 省略可

  • 戻り値

    戦略

• cacheName

  文字列

• fetchOptions

  RequestInit（省略可）

• matchOptions

  CacheQueryOptions 省略可

• プラグイン

  WorkboxPlugin[]

• _完了待ち

  void

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

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

  • responseDone

    Promise<Response>

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • request

    リクエスト

  • event

    ExtendableEvent

  • 戻り値

    Promise<Response>

• _ハンドル

  void

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

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

  • request

    リクエスト

  • handler

    StrategyHandler

  • 戻り値

    Promise<Response>

• handle

  void

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

  戦略インスタンスがワークボックス 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 のタプルを返します。前者（response）は handle() が返すものと等しく、後者は戦略実行の一環として event.waitUntil() に追加された Promise が完了すると解決される Promise です。

  done Promise を待機して、戦略によって実行された追加の作業（通常はレスポンスのキャッシュ保存）が正常に完了したことを確認します。

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

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

  • オプション

    FetchEvent|HandlerCallbackOptions

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

  • 戻り値

    [Promise<Response>,Promise<void>]

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

StrategyHandler

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

プロパティ

• コンストラクタ

  void

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

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

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

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

  • ストラテジー

    戦略

  • オプション

    HandlerCallbackOptions

  • 戻り値

    StrategyHandler

• event

  ExtendableEvent

• params

  省略可

• request

  リクエスト

• URL

  URL（省略可）

• cacheMatch

  void

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

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

  • cacheKeyWillByUsed()
  • cachedResponseWillByUsed()

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

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

  • key

    RequestInfo

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

  • 戻り値

    Promise<Response>

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

• cachePut

  void

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

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

  • cacheKeyWillByUsed()
  • cacheWillUpdate()
  • cacheDidUpdate()

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

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

  • key

    RequestInfo

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

  • レスポンス

    レスポンス

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

  • 戻り値

    Promise<boolean>

    cacheWillUpdate によってレスポンスがキャッシュに保存されない場合は false、そうでない場合は true。

• destroy

  void

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

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

  ()=> {...}

• doneWaiting

  void

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

  注: doneWaiting() の解決後に行われたすべての作業は、（このハンドラの waitUntil() メソッドではなく）イベントの waitUntil() メソッドに手動で渡す必要があります。そうしないと、作業が完了する前に Service Worker のスレッドが強制終了されます。

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

  ()=> {...}

  • 戻り値

    Promise<void>

• fetch

  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

    リクエスト

  • モード

  • 戻り値

    Promise<Request>

• hasCallback

  void

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

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

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

  • name

    C

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

  • 戻り値

    boolean

• iterateCallbacks

  void

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

  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

  処理されるリクエストに関連付けられているイベント イベントの [ライフタイム プロミスの延長]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises に Promise を追加します（通常は FetchEvent）。

  注: 追加されたすべての Promise が解決されたことを確認するには、workbox-strategies.StrategyHandler~doneWaiting を待ちます。

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

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

  • 約束

    Promise<T>

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

  • 戻り値

    Promise<T>

StrategyOptions

プロパティ

• cacheName

  string（省略可）

• fetchOptions

  RequestInit（省略可）

• matchOptions

  CacheQueryOptions 省略可

• プラグイン

  WorkboxPlugin[] 省略可