ExtendableEvent

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

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

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

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つしかありませんが、同じアプローチを複数のキャッシュに使用できます。 キャッシュの一括指定識別子を特定のバージョン管理されたキャッシュ名にマップします。

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

• Service worker の使用
• サービスワーカーの基本的なコード例（英語）
• ServiceWorker の準備はできていますか？（英語）
• Promise
• Web worker の使用