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

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

条件は何ですか？

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

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

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

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

ネイティブ アプリのインストールをユーザーに促すには、2 つのプロパティを追加する必要があります ウェブアプリ マニフェスト（prefer_related_applications）と related_applications。

"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 を特定することで、この問題を絞り込むことができます。