ExtendableEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

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

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

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

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

Event ExtendableEvent

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

コンストラクター

ExtendableEvent()

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

プロパティ

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

メソッド

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

ExtendableEvent.waitUntil()

イベントの存続期間を延長します。 これは、インストール中 (installing) のワーカーの install イベントハンドラー と、アクティブ (active) ワーカーの activate イベントハンドラー で呼び出すためのものです。

例

このコードスニペットは、サービスワーカーのプリフェッチの例からのものです（プリフェッチの例をライブで見る）。 コードは ServiceWorkerGlobalScope.install_event で ExtendableEvent.waitUntil() を呼び出し、インストール中（ServiceWorkerRegistration.installing）のワーカーがインストール済み（installed）として扱われるのを、渡された Promise が正常に解決されるまで遅らせます。 Promise は、すべてのリソースがフェッチされてキャッシュされたとき、または例外が発生したときに解決します。

コードスニペットは、サービスワーカーが使用するキャッシュのバージョン管理のベストプラクティスも示しています。 この例ではキャッシュは 1 つしかありませんが、同じアプローチを複数のキャッシュに使用できます。 キャッシュの一括指定識別子を特定のバージョン管理されたキャッシュ名にマップします。

メモ: Chrome では、ログ文は、chrome://serviceworker-internals を介してアクセスされる関連サービスワーカーの "Inspect" インターフェイスを介して表示されます。

js
const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  prefetch: `prefetch-cache-v${CACHE_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre_fetched.txt",
    "./static/pre_fetched.html",
    "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT_CACHES["prefetch"])
      .then((cache) => {
        return cache
          .addAll(
            urlsToPrefetch.map((urlToPrefetch) => {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(() => {
            console.log("すべてのリソースをフェッチし、キャッシュしました。");
          });
      })
      .catch((error) => {
        console.error("プリフェッチに失敗:", error);
      }),
  );
});

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

仕様書

Specification
Service Workers
# extendableevent-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報