ネイティブ アプリのインストール プロンプトを使用すると、 アプリストアからネイティブアプリをデバイスに 直接インストールできます ブラウザを離れることなく 煩わしいインタースティシャルも 表示されません
条件は何ですか?
ネイティブ アプリのインストール プロンプトをユーザーに表示するには、サイトで次のことを行う必要があります。 次の条件を満たす必要があります
- デバイスに現在インストールされているウェブアプリもネイティブ アプリも使用できません。
- 以下を含むウェブアプリ マニフェストが含まれます。
<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
prefer_related_applications
プロパティは、ブラウザに対してブラウザへのプロンプトを表示するよう指示します。
ウェブアプリではなくネイティブアプリで
ユーザーにテストしてもらうことです未設定のままにした場合、
false
の場合、ブラウザは代わりにウェブアプリをインストールするようユーザーに求めます。
related_applications
related_applications
は、優先するネイティブ アプリケーションに関する情報をブラウザに伝えるオブジェクトのリストを含む配列です。各オブジェクトには
platform
プロパティと id
プロパティ。platform
が play
の場合
id
は Google Play ストアのアプリ ID です。
インストール プロンプトを表示する
インストール ダイアログを表示するには、次の操作を行う必要があります。
beforeinstallprompt
イベントをリッスンします。- ボタンなどを使ってネイティブ アプリをインストールできることをユーザーに通知する 要素を追加します。
- 保存した
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 を特定することで、この問題を絞り込むことができます。