Pete LePage
この不具合には、ウェブアプリをインストール可能にするために必要なフィールドを含むウェブ マニフェストが含まれています。
また、デフォルトで非表示になっているインストール ボタンもあります。
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);
});
インストール イベントをトラッキングする
インストール ボタンによるウェブアプリのインストールは、ユーザーがインストールする方法の 1 つにすぎません。Chrome のメニュー、ミニ情報バー、アドレスバーのアイコンからもアクセスできます。これらすべてのインストール方法は、appinstalled イベントをリッスンすることで追跡できます。
appinstalledイベント ハンドラをwindowオブジェクトに追加します。- 分析やその他のメカニズムにインストール イベントをログに記録します。
コード:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
関連情報
これでアプリがインストール可能になりました。
他にも次のようなことができます。