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 を直ちに解決します。
カスタム キャッシュ ネットワーク レース戦略
次の例は、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 省略可
-
戻り値
-
-
cacheName
string
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions 省略可
-
プラグイン
-
_完了待ち
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
event
ExtendableEvent
-
戻り値
Promise<void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
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 省略可
-
戻り値
-
-
cacheName
string
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions 省略可
-
プラグイン
-
_完了待ち
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
event
ExtendableEvent
-
戻り値
Promise<void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
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) => {...}
-
オプション
-
戻り値
-
-
cacheName
string
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions 省略可
-
プラグイン
-
_完了待ち
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
event
ExtendableEvent
-
戻り値
Promise<void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
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) => {...}
-
オプション
-
戻り値
-
-
cacheName
string
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions 省略可
-
プラグイン
-
_完了待ち
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
event
ExtendableEvent
-
戻り値
Promise<void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
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 省略可
-
-
cacheName
string
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions 省略可
-
プラグイン
-
_完了待ち
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
event
ExtendableEvent
-
戻り値
Promise<void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
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
string
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions 省略可
-
プラグイン
-
_完了待ち
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
event
ExtendableEvent
-
戻り値
Promise<void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
リクエスト
-
event
ExtendableEvent
-
戻り値
Promise<Response>
-
-
_ハンドル
void
_handle
関数は次のようになります。(request: Request, handler: StrategyHandler) => {...}
-
request
リクエスト
-
handler
-
戻り値
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) => {...}
-
ストラテジー
-
オプション
-
-
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[] 省略可