BeforeInstallPromptEvent
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
BeforeInstallPromptEvent は beforeinstallprompt イベントのインターフェイスであり、モバイル端末でユーザーにウェブサイトのホーム画面への「インストール」を促す前に、Window オブジェクトに対して発生します。
このインターフェイスは、Event インターフェイスを継承しています。
コンストラクター
BeforeInstallPromptEvent()-
新しい
BeforeInstallPromptEventオブジェクトを生成します。
インスタンスプロパティ
親である 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", "");
});
ブラウザーの互換性
関連情報
- PWA をインストール可能にする
- How to provide your own in-app install experience - web.dev (2021)