ExtendableEvent

ExtendableEvent インターフェイスは、サービスワーカーのライフサイクルの一部として、グローバルスコープでディスパッチされた install イベントと activate イベントの存続期間を延長します。 これにより、データベーススキーマがアップグレードされて古いキャッシュエントリが削除されるまで、機能イベント(FetchEvent など)が送出されなくなります。

waitUntil()ExtendableEvent ハンドラーの外で呼び出された場合、ブラウザーは InvalidStateError をスローする必要があります。 また、複数の呼び出しが積み重なり、その結果の Promise が存続期間延長 Promise(extend lifetime promises)のリストに追加されることにも注意してください。

: 上記の段落で説明した振る舞いは、Firefox 43 で修正されました(バグ 1180274 を参照)。

このインターフェイスは、Event インターフェイスを継承しています。

: このインターフェイスは、グローバルスコープが ServiceWorkerGlobalScope の場合にのみ使用できます。 Window または別の種類のワーカーのスコープの場合は使用できません。

コンストラクター

ExtendableEvent()
新しい ExtendableEvent オブジェクトを作成します。

プロパティ

特定のプロパティを実装していませんが、親である Event からプロパティを継承しています。

メソッド

親である Event からメソッドを継承しています。

ExtendableEvent.waitUntil()

イベントの存続期間を延長します。 これは、インストール中(installing)のワーカーの install EventHandler と、アクティブ(active)ワーカーの activate EventHandler で呼び出されることを目的としています。

このコードスニペットは、サービスワーカーのプリフェッチの例からのものです(プリフェッチの例をライブで見る)。 コードは 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 の定義
草案 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ExtendableEvent
実験的
Chrome 完全対応 40Edge 完全対応 17Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 24Safari 未対応 なしWebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 24Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
ExtendableEvent() constructor
実験的
Chrome 完全対応 40Edge 完全対応 17Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 24Safari 未対応 なしWebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 24Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
waitUntil
実験的
Chrome 完全対応 40Edge 完全対応 17Firefox 完全対応 44IE 未対応 なしOpera 完全対応 24Safari 未対応 なしWebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 24Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報