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()
を呼び出します。現在の Service Worker がアクティブになる前に self.clients.claim()
を呼び出すと、ランタイム例外が発生します。workbox-core
のラッパーにより、適切なタイミングで呼び出すことができます。
スキップ待機 ラッパーは非推奨となりました。
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
string
-
event
ExtendableEvent
-
newResponse
レスポンス
-
oldResponse
回答(省略可)
-
request
リクエスト
-
state
MapLikeObject 省略可
CachedResponseWillBeUsedCallback()
workbox-core.CachedResponseWillBeUsedCallback(
param: CachedResponseWillBeUsedCallbackParam,
)
パラメータ
戻り値
-
Promise<void | Response>
CachedResponseWillBeUsedCallbackParam
プロパティ
-
cacheName
string
-
cachedResponse
回答(省略可)
-
event
ExtendableEvent
-
matchOptions
CacheQueryOptions 省略可
-
request
リクエスト
-
state
MapLikeObject 省略可
CacheKeyWillBeUsedCallback()
workbox-core.CacheKeyWillBeUsedCallback(
param: CacheKeyWillBeUsedCallbackParam,
)
パラメータ
戻り値
-
Promise<string | Request>
CacheKeyWillBeUsedCallbackParam
プロパティ
-
event
ExtendableEvent
-
モード
string
-
params
省略可
-
request
リクエスト
-
state
MapLikeObject 省略可
CacheWillUpdateCallback()
workbox-core.CacheWillUpdateCallback(
param: CacheWillUpdateCallbackParam,
)
パラメータ
戻り値
-
Promise<void | Response>
CacheWillUpdateCallbackParam
プロパティ
-
event
ExtendableEvent
-
request
リクエスト
-
レスポンス
レスポンス
-
state
MapLikeObject 省略可
FetchDidFailCallback()
workbox-core.FetchDidFailCallback(
param: FetchDidFailCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
FetchDidFailCallbackParam
プロパティ
-
error
エラー
-
event
ExtendableEvent
-
originalRequest
リクエスト
-
request
リクエスト
-
state
MapLikeObject 省略可
FetchDidSucceedCallback()
workbox-core.FetchDidSucceedCallback(
param: FetchDidSucceedCallbackParam,
)
パラメータ
戻り値
-
Promise<Response>
FetchDidSucceedCallbackParam
プロパティ
-
event
ExtendableEvent
-
request
リクエスト
-
レスポンス
レスポンス
-
state
MapLikeObject 省略可
HandlerCallbackOptions
HandlerDidCompleteCallback()
workbox-core.HandlerDidCompleteCallback(
param: HandlerDidCompleteCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
HandlerDidCompleteCallbackParam
プロパティ
-
error
エラー(省略可)
-
event
ExtendableEvent
-
request
リクエスト
-
レスポンス
回答(省略可)
-
state
MapLikeObject 省略可
HandlerDidErrorCallback()
workbox-core.HandlerDidErrorCallback(
param: HandlerDidErrorCallbackParam,
)
パラメータ
戻り値
-
Promise<Response>
HandlerDidErrorCallbackParam
プロパティ
-
error
エラー
-
event
ExtendableEvent
-
request
リクエスト
-
state
MapLikeObject 省略可
HandlerDidRespondCallback()
workbox-core.HandlerDidRespondCallback(
param: HandlerDidRespondCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
HandlerDidRespondCallbackParam
プロパティ
-
event
ExtendableEvent
-
request
リクエスト
-
レスポンス
回答(省略可)
-
state
MapLikeObject 省略可
HandlerWillRespondCallback()
workbox-core.HandlerWillRespondCallback(
param: HandlerWillRespondCallbackParam,
)
パラメータ
戻り値
-
Promise<Response>
HandlerWillRespondCallbackParam
プロパティ
-
event
ExtendableEvent
-
request
リクエスト
-
レスポンス
レスポンス
-
state
MapLikeObject 省略可
HandlerWillStartCallback()
workbox-core.HandlerWillStartCallback(
param: HandlerWillStartCallbackParam,
)
パラメータ
戻り値
-
Promise<void>
HandlerWillStartCallbackParam
プロパティ
-
event
ExtendableEvent
-
request
リクエスト
-
state
MapLikeObject 省略可
ManualHandlerCallback()
workbox-core.ManualHandlerCallback(
options: ManualHandlerCallbackOptions,
)
「handler」コールバックは、Router
が RouteMatchCallback
を介して URL/リクエストを Route
に一致させるたびに呼び出されます。このハンドラ コールバックは、Response
で解決される Promise
を返す必要があります。
RouteMatchCallback
によって空でない配列またはオブジェクトが返された場合は、このハンドラの options.params
引数として渡されます。
パラメータ
戻り値
-
Promise<Response>
ManualHandlerCallbackOptions
ManualHandlerCallback
関数に渡されるオプション。
プロパティ
-
event
ExtendableEvent
-
request
string | リクエスト
MapLikeObject
PluginState
現時点ではプレーンな MapLikeObject
を使用しますが、将来的に拡張/制限される可能性があります。
タイプ
RequestWillFetchCallback()
workbox-core.RequestWillFetchCallback(
param: RequestWillFetchCallbackParam,
)
パラメータ
戻り値
-
Promise<Request>
RequestWillFetchCallbackParam
プロパティ
-
event
ExtendableEvent
-
request
リクエスト
-
state
MapLikeObject 省略可
RouteHandler
RouteHandlerCallback
または RouteHandlerObject
。ルートハンドラを受け入れる workbox-routing
のほとんどの API は、どちらかを受け取ります。
RouteHandlerCallback()
workbox-core.RouteHandlerCallback(
options: RouteHandlerCallbackOptions,
)
「handler」コールバックは、Router
が RouteMatchCallback
を介して URL/リクエストを Route
に一致させるたびに呼び出されます。このハンドラ コールバックは、Response
で解決される Promise
を返す必要があります。
RouteMatchCallback
によって空でない配列またはオブジェクトが返された場合は、このハンドラの options.params
引数として渡されます。
パラメータ
戻り値
-
Promise<Response>
RouteHandlerCallbackOptions
RouteHandlerCallback
関数に渡されるオプション。
プロパティ
-
event
ExtendableEvent
-
params
string[] | MapLikeObject 省略可
-
request
リクエスト
-
url
URL
RouteHandlerObject
RouteHandlerCallback
型の handle
メソッドを持つオブジェクト。
Route
オブジェクトは、RouteHandlerCallback
関数またはこの RouteHandler
オブジェクトで作成できます。RouteHandler
のメリットは、(workbox-strategies
パッケージと同様に)拡張できることです。
プロパティ
-
handle
RouteMatchCallback()
workbox-core.RouteMatchCallback(
options: RouteMatchCallbackOptions,
)
「match」コールバックは、Route
を特定の URL とリクエストに適用すべきかどうかを判断するために使用されます。クライアントからの取得イベントに応答してマッチングが行われる場合は、event
オブジェクトも提供されます。ただし、一致コールバックはフェッチ イベントの外部で呼び出すことができるため、マッチング ロジックでは、event
オブジェクトが常に使用可能であると仮定すべきではありません。match コールバックが true 値を返すと、照合ルートの RouteHandlerCallback
が直ちに呼び出されます。返された値が空でない配列またはオブジェクトである場合、その値がハンドラの options.params
引数に設定されます。
パラメータ
戻り値
-
任意
RouteMatchCallbackOptions
RouteMatchCallback
関数に渡されるオプション。
プロパティ
-
event
ExtendableEvent
-
request
リクエスト
-
sameOrigin
boolean
-
url
URL
WorkboxPlugin
フェッチ オペレーションとキャッシュ オペレーションのライフサイクル コールバック プロパティをオプションとして持つオブジェクト。
プロパティ
-
cacheDidUpdate
-
cacheKeyWillBeUsed
-
cacheWillUpdate
-
cachedResponseWillBeUsed
-
fetchDidFail
-
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
string
-
事前キャッシュ
string
-
接頭辞
string
-
runtime
string
-
サフィックス
string
メソッド
clientsClaim()
workbox-core.clientsClaim()
Service Worker がアクティブになったら、現在使用可能なクライアントを要求します。これは通常、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 が使用されているかどうかにかかわらず、意図的に同一オリジン レスポンスに限定されます。
パラメータ
-
レスポンス
レスポンス
-
修飾子
関数(省略可)
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() の呼び出しは同等であるため、代わりに使用する必要があります。