Workbox はモジュラー方式で構築されているため、デベロッパーは 1 つのファイルにすべてをダウンロードすることなく、使用する部分を選択できます。
ただし、モジュール間には重複があります。たとえば、各モジュールはコンソールとやり取りし、意味のあるエラーをスローし、ネットワークまたはキャッシュを使用する必要があります。各モジュールで同じロジックを実装しないように、workbox-core には各モジュールが依存するこの共通コードが含まれています。
このモジュールはデベロッパーにいくつかの機能を提供しますが、ログレベルとキャッシュ以外に、workbox-core はエンドデベロッパーではなく各モジュールに内部ロジックを提供します。
デフォルトのキャッシュ名を表示、変更する
Workbox は、cacheNames を介してキャッシュを定義します。
import {cacheNames} from 'workbox-core';
console.log(cacheNames.precache);
console.log(cacheNames.runtime);
console.log(cacheNames.googleAnalytics);
これらのキャッシュ名は、接頭辞、名前、接尾辞の形式で構成されます。名前は、キャッシュの使用状況に応じて変更されます。
<prefix>-<cache-id>-<suffix>
これらのデフォルト名は、setCacheNameDetails() に渡される値の一部またはすべてを変更することで変更できます。
import {cacheNames, setCacheNameDetails} from 'workbox-core';
setCacheNameDetails({
prefix: 'my-app',
suffix: 'v1',
precache: 'install-time',
runtime: 'run-time',
googleAnalytics: 'ga',
});
// Will print 'my-app-install-time-v1'
console.log(cacheNames.precache);
// Will print 'my-app-run-time-v1'
console.log(cacheNames.runtime);
// Will print 'my-app-ga-v1'
console.log(cacheNames.googleAnalytics);
接頭辞と接尾辞の主なユースケースは、複数のプロジェクトで Workbox を使用し、各プロジェクトで同じ localhost ポートを使用する場合です。各モジュールにカスタム接頭辞を設定すると、キャッシュが相互に競合するのを防ぐことができます。
クライアントの申し立て
新しい Service Worker を公開し、有効になったらすぐにすでに開いているウェブページを制御できるようにしたいデベロッパーもいるでしょう。これはデフォルトでは行われません。
このような動作が必要な場合は、workbox-core にヘルパー メソッドが用意されています。
import {clientsClaim} from 'workbox-core';
// This clientsClaim() should be at the top level
// of your service worker, not inside of, e.g.,
// an event handler.
clientsClaim();
workbox-core の clientsClaim() メソッドは、activate イベント リスナーを Service Worker に自動的に追加し、その中で self.clients.claim() を呼び出します。現在のサービス ワーカーがアクティブになる前に self.clients.claim() を呼び出すと、ランタイム例外が発生します。workbox-core のラッパーを使用すると、適切なタイミングで呼び出せるようになります。
skipWaiting ラッパーのサポートが終了しました
Workbox v6 より前は、デベロッパーは workbox-core の skipWaiting() メソッドを使用することを推奨されていました。ただし、このメソッドは、デベロッパーが self.skipWaiting() を明示的に呼び出した場合に得られる価値を超えるものではありませんでした。
以前の workbox-core ラッパーは、self.skipWaiting() が呼び出される install イベント ハンドラも登録していたため、インストールが完了した後に message などの別のイベント ハンドラ内で呼び出されると、ラッパーは期待どおりに動作しませんでした。
このような理由から、workbox-core の skipWaiting() は非推奨となり、デベロッパーは self.skipWaiting() を直接呼び出すように切り替える必要があります。self.clients.claim() とは異なり、self.skipWaiting() は「間違った」タイミングで呼び出されていても例外をスローしないため、イベント ハンドラでラップする必要はありません。
型
CacheDidUpdateCallback()
workbox-core.CacheDidUpdateCallback(
param: CacheDidUpdateCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
CacheDidUpdateCallbackParam
プロパティ
-
cacheName
文字列
-
イベント
ExtendableEvent
-
newResponse
レスポンス
-
oldResponse
レスポンス（省略可）
-
リクエスト
リクエスト
-
state
MapLikeObject（省略可）
CachedResponseWillBeUsedCallback()
workbox-core.CachedResponseWillBeUsedCallback(
param: CachedResponseWillBeUsedCallbackParam,
)
パラメータ
戻り値
-
Promise<void | Response>
CachedResponseWillBeUsedCallbackParam
プロパティ
-
cacheName
文字列
-
cachedResponse
レスポンス（省略可）
-
イベント
ExtendableEvent
-
matchOptions
CacheQueryOptions（省略可）
-
リクエスト
リクエスト
-
state
MapLikeObject（省略可）
CacheKeyWillBeUsedCallback()
workbox-core.CacheKeyWillBeUsedCallback(
param: CacheKeyWillBeUsedCallbackParam,
)
パラメータ
戻り値
-
Promise<string | Request>
CacheKeyWillBeUsedCallbackParam
プロパティ
-
イベント
ExtendableEvent
-
モード
文字列
-
params
任意（省略可）
-
リクエスト
リクエスト
-
state
MapLikeObject（省略可）
CacheWillUpdateCallback()
workbox-core.CacheWillUpdateCallback(
param: CacheWillUpdateCallbackParam,
)
パラメータ
戻り値
-
Promise<void | Response>
CacheWillUpdateCallbackParam
プロパティ
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
レスポンス
レスポンス
-
state
MapLikeObject（省略可）
FetchDidFailCallback()
workbox-core.FetchDidFailCallback(
param: FetchDidFailCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
FetchDidFailCallbackParam
プロパティ
-
エラー
エラー
-
イベント
ExtendableEvent
-
originalRequest
リクエスト
-
リクエスト
リクエスト
-
state
MapLikeObject（省略可）
FetchDidSucceedCallback()
workbox-core.FetchDidSucceedCallback(
param: FetchDidSucceedCallbackParam,
)
パラメータ
戻り値
-
Promise<Response>
FetchDidSucceedCallbackParam
プロパティ
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
レスポンス
レスポンス
-
state
MapLikeObject（省略可）
HandlerCallbackOptions
HandlerDidCompleteCallback()
workbox-core.HandlerDidCompleteCallback(
param: HandlerDidCompleteCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
HandlerDidCompleteCallbackParam
プロパティ
-
エラー
エラー（省略可）
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
レスポンス
レスポンス（省略可）
-
state
MapLikeObject（省略可）
HandlerDidErrorCallback()
workbox-core.HandlerDidErrorCallback(
param: HandlerDidErrorCallbackParam,
)
パラメータ
戻り値
-
Promise<Response>
HandlerDidErrorCallbackParam
プロパティ
-
エラー
エラー
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
state
MapLikeObject（省略可）
HandlerDidRespondCallback()
workbox-core.HandlerDidRespondCallback(
param: HandlerDidRespondCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
HandlerDidRespondCallbackParam
プロパティ
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
レスポンス
レスポンス（省略可）
-
state
MapLikeObject（省略可）
HandlerWillRespondCallback()
workbox-core.HandlerWillRespondCallback(
param: HandlerWillRespondCallbackParam,
)
パラメータ
戻り値
-
Promise<Response>
HandlerWillRespondCallbackParam
プロパティ
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
レスポンス
レスポンス
-
state
MapLikeObject（省略可）
HandlerWillStartCallback()
workbox-core.HandlerWillStartCallback(
param: HandlerWillStartCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
HandlerWillStartCallbackParam
プロパティ
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
state
MapLikeObject（省略可）
ManualHandlerCallback()
workbox-core.ManualHandlerCallback(
options: ManualHandlerCallbackOptions,
)
「ハンドラ」コールバックは、Router が RouteMatchCallback を介して Route への URL/リクエストと一致するたびに呼び出されます。このハンドラ コールバックは、Response で解決する Promise を返す必要があります。
RouteMatchCallback から空でない配列またはオブジェクトが返された場合、このハンドラの options.params 引数として渡されます。
パラメータ
戻り値
-
Promise<Response>
ManualHandlerCallbackOptions
ManualHandlerCallback 関数に渡されるオプション。
プロパティ
-
イベント
ExtendableEvent
-
リクエスト
文字列 | リクエスト
MapLikeObject
PluginState
現時点では単純な MapLikeObject を使用していますが、将来的には拡張または制限される可能性があります。
タイプ
RequestWillFetchCallback()
workbox-core.RequestWillFetchCallback(
param: RequestWillFetchCallbackParam,
)
パラメータ
戻り値
-
Promise<Request>
RequestWillFetchCallbackParam
プロパティ
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
state
MapLikeObject（省略可）
RouteHandler
RouteHandlerCallback または RouteHandlerObject のいずれか。ルート ハンドラを受け入れることができる workbox-routing の API のほとんどは、どちらか一方を受け取ります。
RouteHandlerCallback()
workbox-core.RouteHandlerCallback(
options: RouteHandlerCallbackOptions,
)
「ハンドラ」コールバックは、Router が RouteMatchCallback を介して Route への URL/リクエストと一致するたびに呼び出されます。このハンドラ コールバックは、Response で解決する Promise を返す必要があります。
RouteMatchCallback から空でない配列またはオブジェクトが返された場合、このハンドラの options.params 引数として渡されます。
パラメータ
戻り値
-
Promise<Response>
RouteHandlerCallbackOptions
RouteHandlerCallback 関数に渡されるオプション。
プロパティ
-
イベント
ExtendableEvent
-
params
string[] | MapLikeObject 省略可
-
リクエスト
リクエスト
-
URL
URL
RouteHandlerObject
RouteHandlerCallback タイプの handle メソッドを持つオブジェクト。
Route オブジェクトは、RouteHandlerCallback 関数またはこの RouteHandler オブジェクトを使用して作成できます。RouteHandler の利点は、拡張できることです（workbox-strategies パッケージで拡張できます）。
プロパティ
-
ハンドル
RouteMatchCallback()
workbox-core.RouteMatchCallback(
options: RouteMatchCallbackOptions,
)
「match」コールバックは、特定の URL とリクエストに Route を適用するかどうかを判断するために使用されます。クライアントからの取得イベントに応答してマッチングが発生すると、event オブジェクトも提供されます。ただし、マッチ コールバックは取得イベントの外部で呼び出される可能性があるため、マッチング ロジックでは event オブジェクトが常に使用可能であると想定しないでください。一致コールバックが真の値を返すと、一致するルートの RouteHandlerCallback がすぐに呼び出されます。返された値が空でない配列またはオブジェクトの場合、その値はハンドラの options.params 引数に設定されます。
パラメータ
戻り値
-
任意
RouteMatchCallbackOptions
RouteMatchCallback 関数に渡されるオプション。
プロパティ
-
イベント
ExtendableEvent
-
リクエスト
リクエスト
-
sameOrigin
ブール値
-
URL
URL
WorkboxPlugin
取得オペレーションとキャッシュ オペレーションのライフサイクル コールバック プロパティを含むオブジェクト（省略可）。
プロパティ
-
cacheDidUpdate
-
cacheKeyWillBeUsed
-
cacheWillUpdate
-
cachedResponseWillBeUsed
-
fetchDidFail
FetchDidFailCallback（省略可）
-
fetchDidSucceed
-
handlerDidComplete
-
handlerDidError
-
handlerDidRespond
-
handlerWillRespond
-
handlerWillStart
-
requestWillFetch
WorkboxPluginCallbackParam
プロパティ
-
cacheDidUpdate
-
cacheKeyWillBeUsed
-
cacheWillUpdate
-
cachedResponseWillBeUsed
-
fetchDidFail
-
fetchDidSucceed
-
handlerDidComplete
-
handlerDidError
-
handlerDidRespond
-
handlerWillRespond
-
handlerWillStart
-
requestWillFetch
プロパティ
cacheNames
Workbox で使用されている現在のキャッシュ名と接頭辞/接尾辞を取得します。
cacheNames.precache はプリキャッシュ アセットに使用され、cacheNames.googleAnalytics は workbox-google-analytics が analytics.js を保存するために使用され、cacheNames.runtime は他のすべてのものに使用されます。
cacheNames.prefix を使用すると、現在の接頭辞値のみを取得できます。cacheNames.suffix を使用すると、現在の接尾辞値のみを取得できます。
タイプ
オブジェクト
プロパティ
-
googleAnalytics
文字列
-
precache
文字列
-
接頭辞
文字列
-
ランタイム
文字列
-
接尾辞
文字列
メソッド
clientsClaim()
workbox-core.clientsClaim()
サービス ワーカーがアクティブになったら、現在利用可能なクライアントを宣言します。通常は skipWaiting() と組み合わせて使用します。
copyResponse()
workbox-core.copyResponse(
response: Response,
modifier?: function,
)
デベロッパーがレスポンスをコピーして、その headers、status、statusText の値（コンストラクタの [ResponseInit]https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax オブジェクトで設定可能な値）を変更できるようにします。これらの値を変更するには、2 つ目の引数として関数を渡します。この関数は、レスポンス プロパティ {headers, status, statusText} を含む単一のオブジェクトで呼び出されます。この関数の戻り値は、新しい Response の ResponseInit として使用されます。値を変更するには、渡されたパラメータを変更して返すか、まったく新しいオブジェクトを返します。
このメソッドは、CORS が使用されているかどうかにかかわらず、同一オリジンのレスポンスに意図的に制限されています。
パラメータ
-
レスポンス
レスポンス
-
修飾子
function 省略可
modifierパラメータは次のようになります。(responseInit: ResponseInit) => ResponseInit
-
responseInit
ResponseInit
-
戻り値
ResponseInit
-
戻り値
-
Promise<Response>
registerQuotaErrorCallback()
workbox-core.registerQuotaErrorCallback(
callback: Function,
)
割り当てエラーが発生した場合に実行される quotaErrorCallbacks のセットに関数を追加します。
パラメータ
-
callback
関数
setCacheNameDetails()
workbox-core.setCacheNameDetails(
details: PartialCacheNameDetails,
)
Workbox パッケージで使用されるデフォルトのキャッシュ名を変更します。キャッシュ名は <prefix>-<Cache Name>-<suffix> として生成されます。
パラメータ
-
詳細
PartialCacheNameDetails
skipWaiting()
workbox-core.skipWaiting()
このメソッドは非推奨であり、Workbox v7 で削除されます。
self.skipWaiting() の呼び出しは同等であり、代わりに使用する必要があります。