ネイティブ アプリのインストール プロンプト

ネイティブアプリのインストール プロンプトを使用すると、ユーザーはブラウザから離れることなく、煩わしいインタースティシャルを表示することなく、アプリストアから直接デバイスにネイティブアプリをすばやくシームレスにインストールできます。

どのような条件に基づいていますか？

ネイティブ アプリのインストール プロンプトをユーザーに表示するには、サイトが次の条件を満たしている必要があります。

  • デバイスに現在インストールされているウェブアプリもネイティブ アプリも使用できません。
  • 次を含むウェブアプリ マニフェストが含まれている。
    • short_name
    • name（バナー プロンプトで使用）
    • icons（192 ピクセル版と 512 ピクセル版を含む）
    • prefer_related_applications は true です。
    • アプリに関する情報を含む related_applications オブジェクト
  • HTTPS 経由で配信

これらの条件を満たすと、beforeinstallprompt イベントが発生します。これを使用して、ネイティブ アプリをインストールするようユーザーに促すことができます。

必須のマニフェスト プロパティ

ネイティブ アプリのインストールをユーザーに求めるメッセージが表示されるようにするには、ウェブアプリ マニフェストに prefer_related_applications と related_applications の 2 つのプロパティを追加する必要があります。

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

prefer_related_applications プロパティは、ウェブアプリではなくネイティブアプリをユーザーに提示するようブラウザに指示します。この値を未設定のままにするか、false にすると、ブラウザは代わりにウェブアプリをインストールするようユーザーにプロンプトを表示します。

related_applications は、優先ネイティブ アプリをブラウザに伝えるオブジェクトのリストを含む配列です。各オブジェクトには platform プロパティと id プロパティを含める必要があります。ここで、platform は play、id は Google Play ストア アプリ ID です。

インストール プロンプトを表示する

インストール ダイアログを表示するには、次の要件を満たす必要があります。

  1. beforeinstallprompt イベントをリッスンします。
  2. ネイティブアプリをインストールできることをユーザーに通知するには、ユーザー ジェスチャー イベントを生成するボタンなどの要素を使用します。
  3. 保存された beforeinstallprompt イベントに対して prompt() を呼び出して、プロンプトを表示します。

beforeinstallprompt をリッスンします。

条件が満たされると、Chrome は beforeinstallprompt イベントを発生させます。これを使用して、アプリをインストールできることを示し、ユーザーにインストールを促すことができます。

beforeinstallprompt イベントが発生したら、イベントへの参照を保存し、ユーザーがアプリをインストールできることを示すようにユーザー インターフェースを更新します。

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

アプリをインストールできることをユーザーに通知する

アプリをインストールできることをユーザーに通知する最善の方法は、ユーザー インターフェースにボタンなどの要素を追加することです。煩わしい要素や気を散らす要素となる可能性がある、全画面表示のインタースティシャルやその他の要素は表示しないでください。

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

プロンプトを表示する

インストール プロンプトを表示するには、ユーザー操作内から保存済みイベントで prompt() を呼び出します。ホーム画面にアプリを追加するようユーザーに求めるモーダル ダイアログが表示されます。

次に、userChoice プロパティから返された Promise をリッスンします。プロミスは、プロンプトが表示され、ユーザーが応答した後に、outcome プロパティを持つオブジェクトを返します。

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

デリファレンス イベントで prompt() を呼び出せるのは 1 回だけです。ユーザーが閉じた場合は、次のページ ナビゲーションで beforeinstallprompt イベントが発生するまで待つ必要があります。

コンテンツ セキュリティ ポリシーを使用する場合の特別な考慮事項

サイトに制限のある コンテンツ セキュリティ ポリシーがある場合は、img-src ディレクティブに *.googleusercontent.com を追加して、Chrome がアプリに関連付けられたアイコンを Google Play ストアからダウンロードできるようにしてください。

場合によっては、*.googleusercontent.com が望ましくないほど冗長になることがあります。Android デバイスをリモート デバッグしてアプリアイコンの URL を特定することで、この問題を絞り込むことができます。