InstallEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2018年4月⁩.

* Some parts of this feature may have varying levels of support.

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

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

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

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

コンストラクター

InstallEvent() 非推奨; 非標準: 新しい InstallEvent オブジェクトを生成します。

インスタンスプロパティ

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

InstallEvent.activeWorker 読取専用非推奨; 非標準: 現在ページを制御している ServiceWorker を返します。

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

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

メモ: Google Chromeでは、chrome://serviceworker-internals 経由でアクセスした関連サービスワーカーの "Inspect" インターフェイスでログ出力します。

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