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);
});
インストール イベントをトラッキングする
インストール ボタンからウェブアプリをインストールする方法は、
インストールできます。また、Chrome のメニュー、ミニ情報バー、
アドレスバーのアイコンから探すことができます。Google Chat では
appinstalled をリッスンして、これらのインストール方法をすべて追跡します。
イベントです。
appinstalledイベント ハンドラをwindowオブジェクトに追加します。- インストール イベントを分析やその他のメカニズムに記録します。
コード:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
関連情報
これでアプリがインストール可能になりました。
他にも、次のようなことができます。