ホーム画面の動作に追加する変更

Pete LePage

「ホーム画面に追加」バナーをリリースして以来、Google はプログレッシブ ウェブアプリにわかりやすいラベルを付け、ユーザーが簡単にインストールできるように取り組んできました。最終的な目標は、すべてのプラットフォームでアドレスバーにインストール ボタンを提供することです。Chrome 68 では、この目標に向けた変更を行っています。

変更の概要

Android 版 Chrome 68（2018 年 7 月の Stable 版）以降、Chrome では「ホーム画面に追加」バナーが表示されなくなります。サイトがホーム画面への追加の条件を満たしている場合は、ミニ情報バーが表示されます。その後、ユーザーがミニ情報バーをクリックするか、ユーザー ジェスチャーから beforeinstallprompt イベントで prompt() を呼び出すと、Chrome にモーダルのホーム画面への追加ダイアログが表示されます。

A2HS バナー Chrome 67 以前

A2HS バナーのスクリーンショット

サイトがホーム画面への追加条件を満たし、beforeinstallprompt イベントで preventDefault() を呼び出さない場合に自動的に表示されます。

または

beforeinstallprompt イベントで prompt() を呼び出すと表示されます。

ミニ情報バー Chrome 68 以降

A2HS 情報バーのスクリーンショット
サイトが「ホーム画面に追加」の条件を満たしている場合に表示されます

ユーザーが拒否した場合、十分な期間（約 3 か月）が経過するまで表示されません。

beforeinstallprompt イベントで preventDefault() が呼び出されたかどうかに関係なく表示されます。

この UI の扱いは、Chrome の今後のバージョンでアドレスバーのインストール ボタンが導入されると削除される予定です。

A2HS ダイアログ

A2HS ダイアログのスクリーンショット

Chrome 68 以降の beforeinstallprompt イベントでユーザー操作内から prompt() を呼び出すことで表示されます。

または

Chrome 68 以降でユーザーがミニ情報バーをタップしたときに表示されます。

または

すべての Chrome バージョンで、ユーザーが Chrome メニューから [ホーム画面に追加] をクリックした後に表示されます。

ミニ情報バー

ミニ情報バーのスクリーンショット。
ミニ情報バー

ミニ情報バーは Chrome の UI コンポーネントであり、サイトで制御することはできませんが、ユーザーは簡単に閉じることができます。ユーザーが拒否すると、十分な時間が経過するまで（現在は 3 か月）再表示されません。ミニ情報バーは、beforeinstallprompt イベントで preventDefault() を設定したかどうかにかかわらず、サイトがホーム画面への追加の条件を満たしている場合に表示されます。

アドレスバーのインストール ボタンの初期コンセプト。
アドレスバーのインストール ボタンの初期コンセプト
ミニ情報バーは Android 版 Chrome の暫定的なエクスペリエンスです。アドレスバーにインストール ボタンを配置し、すべてのプラットフォームで一貫したエクスペリエンスを提供できるよう取り組んでいます。 ## ホーム画面に追加ダイアログをトリガーする
デスクトップ プログレッシブ ウェブアプリのインストール ボタン。
デスクトップ プログレッシブ ウェブアプリの [インストール] ボタン

ページの読み込み時にユーザーにプロンプトを表示する（権限リクエストのアンチパターン）代わりに、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 イベントの詳細
  • ホーム画面の追加プロンプトに対するユーザーの応答をトラッキングする
  • アプリがインストールされているかどうかの追跡
  • アプリがインストール済みのアプリとして実行されているかどうかを確認する