このグリッチには、ウェブアプリをインストール可能にするために必要なフィールドを含むウェブ マニフェストが含まれています。
また、デフォルトで非表示になっているインストール ボタンもあります。
beforeinstallprompt イベントをリッスンする
ブラウザが beforeinstallprompt
イベントを発生させると、ウェブアプリをインストールでき、インストール ボタンをユーザーに表示できることを示します。beforeinstallprompt
イベントは、アプリがインストール可能条件を満たすと発生します。
このイベントをキャプチャすると、デベロッパーはインストールをカスタマイズし、最適なタイミングでインストールするようユーザーにプロンプトを表示できます。
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
beforeinstallprompt
イベント ハンドラをwindow
オブジェクトに追加します。event
をグローバル変数として保存します。後でプロンプトを表示するために必要になります。- インストール ボタンを表示します。
コード:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
インストール ボタンのクリックを処理する
インストール プロンプトを表示するには、保存した beforeinstallprompt
イベントで prompt()
を呼び出します。prompt()
はユーザー操作から呼び出す必要があるため、prompt()
の呼び出しはインストール ボタンのクリック ハンドラで行います。
- インストール ボタンのクリック イベント ハンドラを追加します。
- 保存した
beforeinstallprompt
イベントでprompt()
を呼び出します。 - プロンプトの結果を記録します。
- 保存した
beforeinstallprompt
イベントを null に設定します。 - インストール ボタンを非表示にする。
コード:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
インストール イベントをトラッキングする
インストール ボタンからウェブアプリをインストールする方法は、ユーザーがウェブアプリをインストールできる方法の一つにすぎません。Chrome のメニュー、ミニ情報バー、アドレスバーのアイコンを使用することもできます。appinstalled
イベントをリッスンすると、これらのインストール方法をすべて追跡できます。
appinstalled
イベント ハンドラをwindow
オブジェクトに追加します。- インストール イベントをアナリティクスまたはその他のメカニズムに記録します。
コード:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
関連情報
これで、アプリをインストールできるようになりました。
他にも以下のことを試してみてください。