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.oninstallExtendableEvent.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

関連情報