ワークボックス戦略

Service Worker が初めて導入されたときは、 生まれました。キャッシング戦略とは、Service Worker がどのようにして フェッチ イベントの受信後にレスポンスを生成します。

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

ここでは、Workbox でサポートされている戦略、 詳しくはオフライン クックブックをご覧ください。

戦略の使用

次の例は、ワークボックスのキャッシュ保存の使用方法を示しています。 workbox-routing を使用した戦略。指標スコープで定義できるオプションは、 このコースで取り上げる戦略ごとに、 このドキュメントの「戦略の構成」セクション

高度な使用方法では、 workbox-routing を使用せずにキャッシュ戦略を直接呼び出すことができます。

最新でない - 再検証中 - 再検証

再検証中の古い状態を示す図

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

これらのプラグイン（またはカスタム プラグイン）は、 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 番目のものは、次の Promise が解決された場合に解決されます。 戦略内の event.waitUntil() に追加されたタスクが完了しました。

どちらのリクエスト戦略も、次の 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() を呼び出し、レスポンスに対してバックグラウンドで cachePut() を実行します。 生成元: fetch()。
  • hasCallback: コールバックを入力として受け取り、戦略にプラグインが 1 つ以上ある場合は true を返します。 返されます。
  • runCallbacks: 指定された名前に一致するすべてのプラグイン コールバックを順番に実行し、指定されたパラメータを渡します。 （現在のプラグインの状態と統合される）を唯一の引数として受け取ります。
  • iterateCallbacks: コールバックを受け取り、一致するプラグイン コールバックのイテラブルを返します。 各コールバックは現在のハンドラの状態（つまり、各コールバックを呼び出すとき、 渡したオブジェクト パラメータはすべて、プラグインの現在の状態にマージされます）。
  • waitUntil: 関連付けられたイベントの有効期間延長 Promise に Promise を追加します。 リクエスト（通常は FetchEvent）。
  • doneWaiting: waitUntil() に渡されたすべての Promise が渡された時点で解決される Promise を返します。 解決した。
  • destroy: 戦略の実行を停止し、保留中の waitUntil() Promise をすべて直ちに解決します。
で確認できます。

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

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

利用可能なクラスのリストについては、 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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      約束 <void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise&lt;Response&gt;

  • ハンドル

    void

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

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

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

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      Promise&lt;Response&gt;

  • handleAll

    void

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

    done Promise が完了するのを待つと、この Promise で追加の処理が実行されることが 戦略（通常はレスポンスのキャッシュ保存）が正常に完了する。

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      [Promise<Response>, Promise<void>]

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

CacheOnly

キャッシュのみの実装 リクエスト戦略について説明します。

このクラスは、Terraform などの ワークボックス プラグイン。

キャッシュに一致するものがない場合、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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      約束 <void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise&lt;Response&gt;

  • ハンドル

    void

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

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

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

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      Promise&lt;Response&gt;

  • handleAll

    void

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

    done Promise が完了するのを待つと、この Promise で追加の処理が実行されることが 戦略（通常はレスポンスのキャッシュ保存）が正常に完了する。

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      [Promise<Response>, Promise<void>]

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

NetworkFirst

API 呼び出しの実装は、 ネットワーク ファースト リクエスト戦略について説明します。

デフォルトでは、この戦略はステータス コードが 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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      約束 <void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise&lt;Response&gt;

  • ハンドル

    void

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

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

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

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      Promise&lt;Response&gt;

  • handleAll

    void

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

    done Promise が完了するのを待つと、この Promise で追加の処理が実行されることが 戦略（通常はレスポンスのキャッシュ保存）が正常に完了する。

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      [Promise<Response>, Promise<void>]

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

NetworkFirstOptions

プロパティ

  • cacheName

    文字列（省略可）

  • fetchOptions

    RequestInit（省略可）

  • matchOptions

    CacheQueryOptions（省略可）

  • networkTimeoutSeconds

    数値（省略可）

  • plugins

    WorkboxPlugin[] 省略可

NetworkOnly

API 呼び出しの実装は、 ネットワークのみ リクエスト戦略について説明します。

このクラスは、Terraform などの ワークボックス プラグイン。

ネットワーク リクエストが失敗した場合、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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      約束 <void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise&lt;Response&gt;

  • ハンドル

    void

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

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

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

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      Promise&lt;Response&gt;

  • handleAll

    void

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

    done Promise が完了するのを待つと、この Promise で追加の処理が実行されることが 戦略（通常はレスポンスのキャッシュ保存）が正常に完了する。

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      [Promise<Response>, Promise<void>]

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

NetworkOnlyOptions

プロパティ

  • fetchOptions

    RequestInit（省略可）

  • networkTimeoutSeconds

    数値（省略可）

  • plugins

    WorkboxPlugin[] 省略可

StaleWhileRevalidate

API 呼び出しの実装は、 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&lt;Response&gt;

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      約束 <void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise&lt;Response&gt;

  • ハンドル

    void

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

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

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

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      Promise&lt;Response&gt;

  • handleAll

    void

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

    done Promise が完了するのを待つと、この Promise で追加の処理が実行されることが 戦略（通常はレスポンスのキャッシュ保存）が正常に完了する。

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      [Promise<Response>, Promise<void>]

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      約束 <void>

  • _getResponse

    void

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

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

    • handler

      StrategyHandler

    • request

      リクエスト

    • イベント

      ExtendableEvent

    • 戻り値

      Promise&lt;Response&gt;

  • _handle

    void

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

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

    • 戻り値

      Promise&lt;Response&gt;

  • ハンドル

    void

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

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

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

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      Promise&lt;Response&gt;

  • handleAll

    void

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

    done Promise が完了するのを待つと、この Promise で追加の処理が実行されることが 戦略（通常はレスポンスのキャッシュ保存）が正常に完了する。

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

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

    • オプション

      FetchEvent |HandlerCallbackOptions

      FetchEvent、または プロパティをご覧ください。

    • 戻り値

      [Promise<Response>, Promise<void>]

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

StrategyHandler

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

プロパティ

  • コンストラクタ

    void

    渡された戦略とイベントに関連付けられた新しいインスタンスを作成します。 処理しているサービスがわかります

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

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

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

  • イベント

    ExtendableEvent

  • params

    任意

  • request

    リクエスト

  • URL

    URL（省略可）

  • cacheMatch

    void

    キャッシュからのリクエストと照合して、該当するプラグインを呼び出します。 コールバック メソッドなど）に、cacheName、matchOptions、plugins を使用 自動的に定義されます。

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

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

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

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

    • key

      RequestInfo

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

    • 戻り値

      Promise&lt;Response&gt;

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

  • cachePut

    void

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

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

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

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

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

    • key

      RequestInfo

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

    • レスポンス

      レスポンス

      キャッシュへのレスポンス。

    • 戻り値

      Promise&lt;boolean&gt;

      cacheWillUpdate がレスポンスを発生させた場合は false そうでない場合は true です。

  • destroy

    void

    戦略の実行を停止し、保留中のものがあれば直ちに解決する waitUntil() Promise。

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

    () => {...}

  • doneWaiting

    void

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

    注: doneWaiting() の決済後に行う作業は、すべて手動で行う必要があります。 イベントの waitUntil() メソッド（このハンドラの waitUntil() メソッドなど）でない場合、Service Worker スレッドは強制終了されます。 評価を行います

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

    () => {...}

    • 戻り値

      約束 <void>

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

    void

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

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

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

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

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

    • 入力

      RequestInfo

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

    • 戻り値

      Promise&lt;Response&gt;

  • fetchAndCachePut

    void

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

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

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

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

    • 入力

      RequestInfo

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

    • 戻り値

      Promise&lt;Response&gt;

  • getCacheKey

    void

    プラグインのリストで cacheKeyWillBeUsed コールバックを確認します。 順番に見つかったコールバックのいずれかを実行します。最後の Request キャッシュのキャッシュキーとして処理されます。 読み取り/書き込みです。cacheKeyWillBeUsed プラグイン コールバックに 登録されている場合、渡されたリクエストは変更されずに返されます。

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

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

    • request

      リクエスト

    • モード

      「読む」
       |"書き込み"

    • 戻り値

      Promise&lt;Request&gt;

  • hasCallback

    void

    この戦略に、指定された 呼び出すことができます。

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

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

    • name

      C

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

    • 戻り値

      ブール値

  • 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"
      > を省略する

      最初の（唯一の）パラメータとして渡すオブジェクト 呼び出されることがあります。このオブジェクトは 現在のプラグインの状態を確認します。

    • 戻り値

      約束 <void>

  • waitUntil

    void

    Promise を [ライフタイムの約束を延長する]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises イベント イベント（通常は FetchEvent）。

    注: workbox-strategies.StrategyHandler~doneWaiting 追加されたすべての Promise が決済されたことをお知らせします。

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

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

    • promise

      Promise<T>

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

    • 戻り値

      Promise<T>

StrategyOptions

プロパティ

  • cacheName

    文字列（省略可）

  • fetchOptions

    RequestInit（省略可）

  • matchOptions

    CacheQueryOptions（省略可）

  • plugins

    WorkboxPlugin[] 省略可