ホーム画面に追加バナーを初めてリリースして以来、Google はプログレッシブ ウェブアプリのラベルをより明確にし、ユーザーがプログレッシブ ウェブアプリをインストールする方法を簡素化するよう取り組んできました。最終的な目標は、すべてのプラットフォームでオムニボックスにインストール ボタンを表示することです。Chrome 68 では、その目標に向けて変更を加えています。
変更の概要
Android 版 Chrome 68 以降（2018 年 7 月の安定版）では、ホーム画面に追加するためのバナーは表示されなくなります。サイトがホーム画面に追加するための条件を満たしている場合、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 をリッスンします。プロミスは、プロンプトが表示されてユーザーが応答した後に、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イベントの詳細- ホーム画面への追加プロンプトに対するユーザーの回答の追跡
- アプリがインストールされたかどうかのトラッキング
- アプリがインストール済みアプリとして実行されているかどうかを判断する