InstallEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

oninstall ハンドラーに引数として渡される InstallEvent インターフェイスは、ServiceWorkerGlobalScope の ServiceWorker で配信されるインストールアクションを表します。ExtendableEvent の子として、FetchEvent のような機能イベントがインストール中に配信されないようにします。

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

Event ExtendableEvent InstallEvent

コンストラクター

InstallEvent()

新しい InstallEvent オブジェクトを生成します。

インスタンスプロパティ

祖先である Event からプロパティを継承しています。

InstallEvent.activeWorker 読取専用

現在ページを制御している ServiceWorker を返します。

このコードスニペットは、サービスワーカーの先読みサンプルのものです（先読みのライブ実行を参照してください）。このコードは ServiceWorkerGlobalScope.oninstall で ServiceWorkerRegistration.installing ワーカーをインストールしたとみなすことを、渡されたプロミスが正常に解決するまで遅らせています。プロミスは、すべてのリソースのフェッチとキャッシュが完了したとき、または何らかの例外が発生したときに解決します。

このコードスニペットでは、サービスワーカーが使用するキャッシュをバージョン管理するためのベストプラクティスも示しています。この例ではキャッシュを 1 つしか保有していませんが、この手法を複数のキャッシュに使用することができます。このコードでは、キャッシュの一括指定と、バージョン管理された固有のキャッシュ名とを割り当てています。

メモ: Google 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("All resources have been fetched and cached.");
          });
      })
      .catch((error) => {
        console.error("Pre-fetching failed:", error);
      }),
  );
});

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2024年7月31日 by MDN contributors.

View this page on GitHub • Report a problem with this content

InstallEvent

In this article

コンストラクター

インスタンスプロパティ

インスタンスメソッド

例

ブラウザーの互換性

関連情報

Help improve MDN