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

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

条件

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

  • デバイスにインストールされているウェブアプリとネイティブ アプリのどちらもない。
  • 以下を含むウェブアプリ マニフェストが含まれている。
    • short_name
    • name（バナー プロンプトで使用）
    • 192 ピクセルと 512 ピクセルのバージョンを含む icons
    • 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 をリッスンします。プロンプトが表示され、ユーザーがそれに応答すると、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 がアプリに関連付けられたアイコンを Play ストアからダウンロードできるようにしてください。

*.googleusercontent.com は、必要以上に詳細になることがあります。Android デバイスのリモート デバッグによって、アプリアイコンの URL を特定して、対象を絞り込めます。