「ホーム画面に追加」バナーをリリースして以来、Google はプログレッシブ ウェブアプリにわかりやすいラベルを付け、ユーザーが簡単にインストールできるように取り組んできました。最終的な目標は、すべてのプラットフォームでアドレスバーにインストール ボタンを提供することです。Chrome 68 では、この目標に向けた変更を行っています。
変更の概要
Android 版 Chrome 68(2018 年 7 月の Stable 版)以降、Chrome では「ホーム画面に追加」バナーが表示されなくなります。サイトがホーム画面への追加の条件を満たしている場合は、ミニ情報バーが表示されます。その後、ユーザーがミニ情報バーをクリックするか、ユーザー ジェスチャーから beforeinstallprompt
イベントで prompt()
を呼び出すと、Chrome にモーダルのホーム画面への追加ダイアログが表示されます。
A2HS バナー Chrome 67 以前
サイトがホーム画面への追加条件を満たし、beforeinstallprompt
イベントで preventDefault()
を呼び出さない場合に自動的に表示されます。
または
beforeinstallprompt
イベントで prompt()
を呼び出すと表示されます。
ミニ情報バー Chrome 68 以降
サイトが「ホーム画面に追加」の条件を満たしている場合に表示されますユーザーが拒否した場合、十分な期間(約 3 か月)が経過するまで表示されません。
beforeinstallprompt
イベントで preventDefault()
が呼び出されたかどうかに関係なく表示されます。
この UI の扱いは、Chrome の今後のバージョンでアドレスバーのインストール ボタンが導入されると削除される予定です。
A2HS ダイアログ
Chrome 68 以降の beforeinstallprompt
イベントでユーザー操作内から prompt()
を呼び出すことで表示されます。
または
Chrome 68 以降でユーザーがミニ情報バーをタップしたときに表示されます。
または
すべての Chrome バージョンで、ユーザーが Chrome メニューから [ホーム画面に追加] をクリックした後に表示されます。
ミニ情報バー
ミニ情報バーは Chrome の UI コンポーネントであり、サイトで制御することはできませんが、ユーザーは簡単に閉じることができます。ユーザーが拒否すると、十分な時間が経過するまで(現在は 3 か月)再表示されません。ミニ情報バーは、beforeinstallprompt
イベントで preventDefault()
を設定したかどうかにかかわらず、サイトがホーム画面への追加の条件を満たしている場合に表示されます。
ページの読み込み時にユーザーにプロンプトを表示する(権限リクエストのアンチパターン)代わりに、UI を使用してアプリをインストールできることを示すと、モーダル インストール プロンプトが表示されます。たとえば、このデスクトップ PWA では、ユーザーのプロフィール名のすぐ上に [アプリをインストール] ボタンが追加されます。
ユーザー操作でアプリをインストールするよう促すことで、ユーザーにとってのスパム行為が減り、ユーザーが [キャンセル] ではなく [追加] をクリックする可能性が高まります。 [インストール] ボタンをアプリに組み込むと、ユーザーがアプリを今日インストールしないことを選択した場合でも、明日やユーザーがインストールの準備ができた時点で、そのボタンが引き続き表示されます。
beforeinstallprompt
イベントのリッスン
サイトがホーム画面への追加の条件を満たしている場合、Chrome は beforeinstallprompt
イベントを発生させ、イベントへの参照を保存して、ユーザー インターフェースを更新して、ユーザーがアプリをホーム画面に追加できるようにします。
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
アプリがすでにインストールされている場合は、beforeinstallprompt
イベントは発生しません(ホーム画面への追加に関する条件をご覧ください)。ただし、後でユーザーがアプリをアンインストールすると、ページ ナビゲーションのたびに beforeinstallprompt
イベントが再度呼び出されます。
prompt()
のダイアログを表示しています
ホーム画面に追加ダイアログを表示するには、ユーザー操作内から、保存されたイベントに対して prompt()
を呼び出します。Chrome にモーダル ダイアログが表示され、アプリをホーム画面に追加するようユーザーに促すことができます。次に、beforeinstallprompt
イベントの userChoice
プロパティによって返される Promise をリッスンします。プロンプトが表示され、ユーザーがそれに応答すると、Promise は outcome
プロパティを含むオブジェクトを返します。
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
遅延イベントで prompt()
を呼び出せるのは 1 回だけです。ユーザーがダイアログでキャンセルをクリックすると、次のページ ナビゲーションで beforeinstallprompt
イベントが発生するまで待つ必要があります。従来の権限リクエストとは異なり、[キャンセル] をクリックしても今後の prompt()
の呼び出しはブロックされません。これは、prompt()
の呼び出しはユーザー操作内で呼び出す必要があるためです。
参考情報
次のような詳細情報については、アプリ インストール バナーをご覧ください。
beforeinstallprompt
イベントの詳細- ホーム画面の追加プロンプトに対するユーザーの応答をトラッキングする
- アプリがインストールされているかどうかの追跡
- アプリがインストール済みのアプリとして実行されているかどうかを確認する