ExtendableEvent

コンストラクター

ExtendableEvent()

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

プロパティ

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

メソッド

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

ExtendableEvent.waitUntil()

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

例

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

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

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

仕様書

ブラウザーの互換性

関連情報

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