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 には、これらの戦略で使用できるプラグインのセットが用意されています。
- 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 番目のものは、次の 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) => {...}
-
オプション
StrategyOptions (省略可)
-
戻り値
-
-
cacheName
文字列
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions(省略可)
-
plugins
-
_awaitComplete
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
約束 <void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
Promise<Response>
-
-
ハンドル
void
リクエスト戦略を実行して、
Promise
を返します。これは、Response
。関連するすべてのプラグイン コールバックを呼び出します。戦略インスタンスがワークボックスに登録されている場合
workbox-routing.Route
の場合、このメソッドは自動的に ルートが一致したときに呼び出されますまたは、このメソッドはスタンドアロンの
FetchEvent
でも使用できます。event.respondWith()
に渡してリスナーにメッセージを渡します。handle
関数は次のようになります。(options: FetchEvent | HandlerCallbackOptions) => {...}
-
オプション
FetchEvent |HandlerCallbackOptions
FetchEvent
、または プロパティをご覧ください。
-
戻り値
Promise<Response>
-
-
handleAll
void
workbox-strategies.Strategy~handle
に似ていますが、Response
に解決されるPromise
を返すのではなく、[response, done]
Promise のタプルを返します。前者は、 (response
)はhandle()
が返すものと同等です。後者は、 追加された 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) => {...}
-
オプション
StrategyOptions (省略可)
-
戻り値
-
-
cacheName
文字列
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions(省略可)
-
plugins
-
_awaitComplete
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
約束 <void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
Promise<Response>
-
-
ハンドル
void
リクエスト戦略を実行して、
Promise
を返します。これは、Response
。関連するすべてのプラグイン コールバックを呼び出します。戦略インスタンスがワークボックスに登録されている場合
workbox-routing.Route
の場合、このメソッドは自動的に ルートが一致したときに呼び出されますまたは、このメソッドはスタンドアロンの
FetchEvent
でも使用できます。event.respondWith()
に渡してリスナーにメッセージを渡します。handle
関数は次のようになります。(options: FetchEvent | HandlerCallbackOptions) => {...}
-
オプション
FetchEvent |HandlerCallbackOptions
FetchEvent
、または プロパティをご覧ください。
-
戻り値
Promise<Response>
-
-
handleAll
void
workbox-strategies.Strategy~handle
に似ていますが、Response
に解決されるPromise
を返すのではなく、[response, done]
Promise のタプルを返します。前者は、 (response
)はhandle()
が返すものと同等です。後者は、 追加された 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) => {...}
-
オプション
NetworkFirstOptions オプション
-
戻り値
-
-
cacheName
文字列
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions(省略可)
-
plugins
-
_awaitComplete
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
約束 <void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
Promise<Response>
-
-
ハンドル
void
リクエスト戦略を実行して、
Promise
を返します。これは、Response
。関連するすべてのプラグイン コールバックを呼び出します。戦略インスタンスがワークボックスに登録されている場合
workbox-routing.Route
の場合、このメソッドは自動的に ルートが一致したときに呼び出されますまたは、このメソッドはスタンドアロンの
FetchEvent
でも使用できます。event.respondWith()
に渡してリスナーにメッセージを渡します。handle
関数は次のようになります。(options: FetchEvent | HandlerCallbackOptions) => {...}
-
オプション
FetchEvent |HandlerCallbackOptions
FetchEvent
、または プロパティをご覧ください。
-
戻り値
Promise<Response>
-
-
handleAll
void
workbox-strategies.Strategy~handle
に似ていますが、Response
に解決されるPromise
を返すのではなく、[response, done]
Promise のタプルを返します。前者は、 (response
)はhandle()
が返すものと同等です。後者は、 追加された 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) => {...}
-
オプション
NetworkOnlyOptions オプション
-
戻り値
-
-
cacheName
文字列
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions(省略可)
-
plugins
-
_awaitComplete
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
約束 <void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
Promise<Response>
-
-
ハンドル
void
リクエスト戦略を実行して、
Promise
を返します。これは、Response
。関連するすべてのプラグイン コールバックを呼び出します。戦略インスタンスがワークボックスに登録されている場合
workbox-routing.Route
の場合、このメソッドは自動的に ルートが一致したときに呼び出されますまたは、このメソッドはスタンドアロンの
FetchEvent
でも使用できます。event.respondWith()
に渡してリスナーにメッセージを渡します。handle
関数は次のようになります。(options: FetchEvent | HandlerCallbackOptions) => {...}
-
オプション
FetchEvent |HandlerCallbackOptions
FetchEvent
、または プロパティをご覧ください。
-
戻り値
Promise<Response>
-
-
handleAll
void
workbox-strategies.Strategy~handle
に似ていますが、Response
に解決されるPromise
を返すのではなく、[response, done]
Promise のタプルを返します。前者は、 (response
)はhandle()
が返すものと同等です。後者は、 追加された 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) => {...}
-
オプション
StrategyOptions (省略可)
-
-
cacheName
文字列
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions(省略可)
-
plugins
-
_awaitComplete
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
約束 <void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
Promise<Response>
-
-
ハンドル
void
リクエスト戦略を実行して、
Promise
を返します。これは、Response
。関連するすべてのプラグイン コールバックを呼び出します。戦略インスタンスがワークボックスに登録されている場合
workbox-routing.Route
の場合、このメソッドは自動的に ルートが一致したときに呼び出されますまたは、このメソッドはスタンドアロンの
FetchEvent
でも使用できます。event.respondWith()
に渡してリスナーにメッセージを渡します。handle
関数は次のようになります。(options: FetchEvent | HandlerCallbackOptions) => {...}
-
オプション
FetchEvent |HandlerCallbackOptions
FetchEvent
、または プロパティをご覧ください。
-
戻り値
Promise<Response>
-
-
handleAll
void
workbox-strategies.Strategy~handle
に似ていますが、Response
に解決されるPromise
を返すのではなく、[response, done]
Promise のタプルを返します。前者は、 (response
)はhandle()
が返すものと同等です。後者は、 追加された 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) => {...}
-
オプション
StrategyOptions (省略可)
-
戻り値
-
-
cacheName
文字列
-
fetchOptions
RequestInit(省略可)
-
matchOptions
CacheQueryOptions(省略可)
-
plugins
-
_awaitComplete
void
_awaitComplete
関数は次のようになります。(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promise<Response>
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
約束 <void>
-
-
_getResponse
void
_getResponse
関数は次のようになります。(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
リクエスト
-
イベント
ExtendableEvent
-
戻り値
Promise<Response>
-
-
_handle
void
_handle
関数は次のようになります。(request: Request, handler: StrategyHandler) => {...}
-
request
リクエスト
-
handler
-
戻り値
Promise<Response>
-
-
ハンドル
void
リクエスト戦略を実行して、
Promise
を返します。これは、Response
。関連するすべてのプラグイン コールバックを呼び出します。戦略インスタンスがワークボックスに登録されている場合
workbox-routing.Route
の場合、このメソッドは自動的に ルートが一致したときに呼び出されますまたは、このメソッドはスタンドアロンの
FetchEvent
でも使用できます。event.respondWith()
に渡してリスナーにメッセージを渡します。handle
関数は次のようになります。(options: FetchEvent | HandlerCallbackOptions) => {...}
-
オプション
FetchEvent |HandlerCallbackOptions
FetchEvent
、または プロパティをご覧ください。
-
戻り値
Promise<Response>
-
-
handleAll
void
workbox-strategies.Strategy~handle
に似ていますが、Response
に解決されるPromise
を返すのではなく、[response, done]
Promise のタプルを返します。前者は、 (response
)はhandle()
が返すものと同等です。後者は、 追加された 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<Response>
一致するレスポンス(見つかった場合)。
-
cachePut
void
リクエスト/レスポンスのペアをキャッシュに保存する(さらに、該当する プラグインのコールバック メソッド)で定義された
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
すべての 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<Response>
-
fetchAndCachePut
void
this.fetch()
を呼び出し、(バックグラウンドで)this.cachePut()
を実行します。this.fetch()
によって生成されたレスポンス。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
この戦略に、指定された 呼び出すことができます。
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[] 省略可