ホーム画面への追加バナーを最初にリリースして以来、Google はプログレッシブ ウェブアプリのラベル付けをより明確にし、ユーザーが簡単にインストールする方法を簡素化してきました。Google の最終的な目標は、すべてのプラットフォームのアドレスバーにインストール ボタンを提供することです。Chrome 68 では、この目標に向けてインストール ボタンを導入する予定です。
変更の概要
Android 版 Chrome 68(2018 年 7 月安定版)以降では、Chrome にホーム画面への追加バナーが表示されなくなります。サイトがホーム画面への追加の要件を満たしている場合、Chrome にミニ情報バーが表示されます。その後、ユーザーがミニ情報バーをクリックするか、ユーザー操作内から beforeinstallprompt
イベントで prompt()
を呼び出すと、Chrome はホーム画面へのモーダル追加ダイアログを表示します。
A2HS バナー Chrome 67 以前
サイトがホーム画面への追加条件を満たしており、サイトが beforeinstallprompt
イベントで preventDefault()
を呼び出していない場合に自動的に表示されます。
または
beforeinstallprompt
イベントで prompt()
を呼び出すことで示されます。
Mini-infobar Chrome 68 以降
サイトがホーム画面への追加条件を満たしている場合に表示されますユーザーが拒否した場合、十分な期間(約 3 か月)が経過するまで表示されません。
beforeinstallprompt
イベントで preventDefault()
が呼び出されたかどうかに関係なく表示されます。
この UI 処理は、Chrome の今後のバージョンでアドレスバーへのインストール ボタンが導入された時点で削除される予定です。
A2HS ダイアログ
Chrome 68 以降では、beforeinstallprompt
イベントでユーザー操作内から prompt()
を呼び出すと表示されます。
または
Chrome 68 以降では、ユーザーがミニ情報バーをタップしたときに表示されます。
または
すべての Chrome バージョンで、ユーザーが Chrome メニューで [ホーム画面に追加] をクリックすると表示されます。
ミニ情報バー
ミニ情報バーは Chrome UI コンポーネントであり、サイトで操作することはできませんが、ユーザーが簡単に閉じることができます。ユーザーが非表示にした場合、十分な時間(現時点では 3 か月)が経過するまでは表示されなくなります。ミニ情報バーは、サイトがホーム画面に追加するための条件を満たしている場合に表示されます。beforeinstallprompt
イベントで preventDefault()
しているかどうかにかかわらず、ミニ情報バーが表示されます。
ページの読み込み時にユーザーにメッセージを表示する代わりに(権限リクエストのアンチパターン)、UI でアプリをインストールできることを示し、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()
の呼び出しがブロックされることはありません。
参考情報
以下を含む詳細については、アプリのインストール バナーをご覧ください。
beforeinstallprompt
イベントの詳細- ホーム画面の追加プロンプトに対するユーザーのレスポンスを追跡する
- アプリがインストール済みかどうかのトラッキング
- アプリがインストール済みアプリとして実行されているかどうかの確認