ExtendableEvent
ExtendableEvent
インターフェイスは、サービスワーカーのライフサイクルの一部として、グローバルスコープでディスパッチされた install (en-US)
イベントと activate (en-US)
イベントの存続期間を延長します。 これにより、データベーススキーマがアップグレードされて古いキャッシュエントリが削除されるまで、機能イベント(FetchEvent
など)が送出されなくなります。
waitUntil()
が ExtendableEvent
ハンドラーの外で呼び出された場合、ブラウザーは InvalidStateError
をスローする必要があります。 また、複数の呼び出しが積み重なり、その結果の Promise が存続期間延長 Promise(extend lifetime promises)のリストに追加されることにも注意してください。
注: 上記の段落で説明した振る舞いは、Firefox 43 で修正されました(バグ 1180274 を参照)。
このインターフェイスは、Event
インターフェイスを継承しています。
注: このインターフェイスは、グローバルスコープが ServiceWorkerGlobalScope
の場合にのみ使用できます。 Window
または別の種類のワーカーのスコープの場合は使用できません。
コンストラクター
ExtendableEvent()
- 新しい
ExtendableEvent
オブジェクトを作成します。
プロパティ
特定のプロパティを実装していませんが、親である Event
からプロパティを継承しています。
メソッド
親である Event
からメソッドを継承しています。
ExtendableEvent.waitUntil()
-
イベントの存続期間を延長します。 これは、インストール中(
installing
)のワーカーのinstall (en-US)
event handler
と、アクティブ(active
)ワーカーのactivate (en-US)
event handler
で呼び出されることを目的としています。
例
このコードスニペットは、サービスワーカーのプリフェッチの例からのものです(プリフェッチの例をライブで見る)。 コードは ServiceWorkerGlobalScope.oninstall
で ExtendableEvent.waitUntil()
を呼び出し、インストール中(ServiceWorkerRegistration.installing
)のワーカーがインストール済み(installed)として扱われるのを、渡された Promise が正常に解決されるまで遅らせます。 Promise は、すべてのリソースがフェッチされてキャッシュされたとき、または例外が発生したときに解決します。
コードスニペットは、サービスワーカーが使用するキャッシュのバージョン管理のベストプラクティスも示しています。 この例ではキャッシュは1つしかありませんが、同じアプローチを複数のキャッシュに使用できます。 キャッシュの一括指定識別子を特定のバージョン管理されたキャッシュ名にマップします。
注: Chrome では、ログ文は、chrome://serviceworker-internals を介してアクセスされる関連サービスワーカーの "Inspect" インターフェイスを介して表示されます。
var CACHE_VERSION = 1;
var CURRENT_CACHES = {
prefetch: 'prefetch-cache-v' + CACHE_VERSION
};
self.addEventListener('install', function(event) {
var urlsToPrefetch = [
'./static/pre_fetched.txt',
'./static/pre_fetched.html',
'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
];
console.log('install イベントの処理。 プリフェッチするリソース:', urlsToPrefetch);
event.waitUntil(
caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
return cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
return new Request(urlToPrefetch, {mode: 'no-cors'});
})).then(function() {
console.log('すべてのリソースをフェッチし、キャッシュしました。');
});
}).catch(function(error) {
console.error('プリフェッチに失敗:', error);
})
);
});
{mode: 'no-cors'}
を使用することが非常に重要です。 この例では、www.chromium.org は CORS をサポートしていません。仕様
仕様 | 状態 | コメント |
---|---|---|
Service Workers ExtendableEvent の定義 |
草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser