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);
    })
  );
});

重要: リソースをフェッチするとき、リソースが CORS をサポートしていないサーバーから提供される可能性がある場合は、{mode: 'no-cors'} を使用することが非常に重要です。この例では、www.chromium.org は CORS をサポートしていません。

仕様

仕様	状態	コメント
Service Workers ExtendableEvent の定義	草案	初期定義

ブラウザーの互換性

BCD tables only load in the browser

ExtendableEvent

コンストラクター

プロパティ

メソッド

例

仕様

ブラウザーの互換性

関連情報