Window: beforeinstallprompt イベント

構文

このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("beforeinstallprompt", (event) => { })

onbeforeinstallprompt = (event) => { }

イベント型

BeforeInstallPromptEvent です。 Event を継承しています。

イベントプロパティ

親である Event から継承したプロパティがあります。

BeforeInstallPromptEvent.platforms 読取専用

イベントが配信されたプラットフォームを含む文字列の配列を返します。これは、例えば "web" や "play" といったバージョンの選択肢をユーザーに表示したいユーザーエージェント向けに提供されており、これによりユーザーはウェブ版と Android 版の間で選択できるようになります。

BeforeInstallPromptEvent.userChoice 読取専用

アプリのインストールを促された際、ユーザーが選択した内容を説明したオブジェクトに解決される Promise を返します。

イベントメソッド

BeforeInstallPromptEvent.prompt()

ユーザーにアプリのインストールを希望するかどうかを尋ねるプロンプトを表示させます。このメソッドは、アプリのインストールを促された際のユーザーの選択内容を説明したオブジェクトに解決される Promise を返します。

例

次の例では、アプリが独自のインストールボタンを提供しており、その id は "install" となっています。最初は、このボタンは非表示になっています。

<button id="install" hidden>インストール</button>

beforeinstallprompt ハンドラーは次のように動作します。

• このイベントを取り消します。これにより、一部のプラットフォームにおいて、ブラウザーが自身のインストール UI を表示させるのを防ぎます
• BeforeInstallPromptEvent オブジェクトを変数に代入し、後で使用できるようにします
• アプリのインストールボタンを表示します。

let installPrompt = null;
const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  installButton.removeAttribute("hidden");
});

アプリのインストールボタンをクリックすると、次のように処理します。

• 保存されたイベントオブジェクトの prompt() メソッドを呼び出し、インストールプロンプトを開始します。
• installPrompt 変数をクリアし、自身を再び非表示にすることで、状態をリセットします。

installButton.addEventListener("click", async () => {
  if (!installPrompt) {
    return;
  }
  const result = await installPrompt.prompt();
  console.log(`インストールプロンプト: ${result.outcome}`);
  installPrompt = null;
  installButton.setAttribute("hidden", "");
});

仕様書

ブラウザーの互換性

関連情報

• BeforeInstallPromptEvent.prompt
• BeforeInstallPromptEvent