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

ホーム画面への追加バナーを最初にリリースして以来、Google はプログレッシブ ウェブアプリのラベル付けをより明確にし、ユーザーが簡単にインストールする方法を簡素化してきました。Google の最終的な目標は、すべてのプラットフォームのアドレスバーにインストール ボタンを提供することです。Chrome 68 では、この目標に向けてインストール ボタンを導入する予定です。

変更の概要

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

A2HS バナー Chrome 67 以前

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

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

または

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

Mini-infobar 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 でアプリをインストールできることを示し、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 イベントの詳細
  • ホーム画面の追加プロンプトに対するユーザーのレスポンスを追跡する
  • アプリがインストール済みかどうかのトラッキング
  • アプリがインストール済みアプリとして実行されているかどうかの確認