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

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

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

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

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

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

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

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

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

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

related_applications は、優先ネイティブ アプリをブラウザに伝えるオブジェクトのリストを含む配列です。各オブジェクトには platform プロパティと id プロパティを含める必要があります。ここで、platformplayid は 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 を特定することで、この問題を絞り込むことができます。