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

Pete LePage

ホーム画面に追加バナーを最初にリリースして以来、プログレッシブ ウェブアプリをより明確にラベル付けし、ユーザーがインストールする方法を簡素化する取り組みを進めてきました。最終的な目標は、すべてのプラットフォームのオムニボックスにインストール ボタンを提供することです。Chrome 68 では、その目標に向けて変更が行われています。

変更内容

Android 版 Chrome 68（2018 年 7 月に安定版をリリース）以降、Chrome でホーム画面に追加バナーが表示されなくなります。サイトがホーム画面に追加する条件を満たしている場合、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() への今後の呼び出しはブロックされません。これは、呼び出しがユーザー ジェスチャー内で行われる必要があるためです。

参考情報

詳しくは、アプリインストール バナーをご覧ください。

  • beforeinstallprompt イベントの詳細
  • ホーム画面に追加するよう求めるプロンプトに対するユーザーの応答をトラッキングする
  • アプリがインストールされたかどうかをトラッキングする
  • アプリがインストール済みアプリとして実行されているかどうかを判断する