ユーザーが PWA のインストール プロセスになじみが薄い可能性があります。デベロッパーは、ユーザーにアプリをインストールするよう促す適切なタイミングを理解できます。デフォルトのブラウザのインストール プロンプトを強化することもできます。利用可能なツールを確認しましょう。
インストール ダイアログの強化
PWA がインストール基準を満たすと、ブラウザにデフォルトのインストール プロンプトが表示されます。ブラウザは、ウェブアプリ マニフェストの name
プロパティと icons
プロパティを使用してプロンプトを作成します。
一部のブラウザでは、description
、categories
、screenshots
など、マニフェスト内のプロモーション フィールドを使用することで、インストール プロンプトのエクスペリエンスが向上します。たとえば、Android 版 Chrome で PWA が description
フィールドと screenshots
フィールドの値を提供している場合、インストール ダイアログは、小さな [ホーム画面に追加] 情報バーから、アプリストアからのインストール メッセージに似た、より大きく詳細なダイアログに変換されます。
プロモーション フィールドの活用例:
beforeinstallprompt イベント
ユーザーに PWA のインストールを促す最初のステップは、ブラウザのインストール プロンプトです。独自のインストール エクスペリエンスを実装するには、引き続きアプリがインストール条件に合格する必要があります。つまり、アプリがインストール可能であることをブラウザが検出すると、beforeinstallprompt
イベントが発生します。ユーザー エクスペリエンスをカスタマイズするには、このイベント ハンドラを実装する必要があります。方法は次のとおりです。
beforeinstallprompt
イベントをリッスンします。- 保存します(後で必要になります)。
- UI からトリガーします。
以下のコードに、beforeinstallprompt
イベントのイベント リスナーの例と、そのキャプチャとその後のカスタム使用の例を示します。
// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevents the default mini-infobar or install dialog from appearing on mobile
e.preventDefault();
// Save the event because you'll need to trigger it later.
deferredPrompt = e;
// Show your customized install prompt for your PWA
// Your own UI doesn't have to be a single element, you
// can have buttons in different locations, or wait to prompt
// as part of a critical journey.
showInAppInstallPromotion();
});
次に、カスタマイズしたインストール ボタンをユーザーがクリックしたら、以前に保存した deferredPrompt
を使用し、その prompt()
メソッドを呼び出します。これは、ユーザーが引き続きアプリをインストールするためにブラウザのプロセスに従う必要があるためです。ここでは、PWA のインストールを促す適切なコンテキストをユーザーに提供するまでイベントを遅らせました。
イベントを捕捉することで、アプリのインストールを促すヒントやインセンティブをユーザーに提供できます。また、エンゲージメントが高くなったことがわかれば、インストールを促すメッセージを表示できます。
次の場合、イベントは発生しません。
- ユーザーが現在の PWA をすでにインストールしている(Android のパソコンおよび WebAPK にのみ有効)。
- アプリが PWA のインストール条件を満たしていない。
- その他の理由(キオスクモードのデバイス、権限がないなど)により、PWA を現在のデバイスにインストールできない。
プロンプト表示に最適な場所は
プロンプトが表示される場所は、アプリケーションと、ユーザーがコンテンツやサービスに最もよく使用するタイミングによって異なります。beforeinstallprompt
を取得することで、アプリを使い続ける理由と、アプリをインストールすることで得られるメリットをユーザーに説明できます。インストールのヒントは、アプリの任意の場所に表示できます。一般的なパターンとしては、サイドメニュー、注文の完了などのクリティカル ユーザー ジャーニーの後、登録ページの後などが挙げられます。詳しくは、PWA のインストールを促すためのパターンをご覧ください。
分析情報を収集する
分析を使用することで、プロンプトをいつ、どこで表示するかをより適切に把握できます。beforeinstallprompt
イベントの userChoice
プロパティを使用できます。userChoice
は、ユーザーが行ったアクションによって解決される Promise です。
// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
// deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
deferredPrompt.prompt();
// Find out whether the user confirmed the installation or not
const { outcome } = await deferredPrompt.userChoice;
// The deferredPrompt can only be used once.
deferredPrompt = null;
// Act on the user's choice
if (outcome === 'accepted') {
console.log('User accepted the install prompt.');
} else if (outcome === 'dismissed') {
console.log('User dismissed the install prompt');
}
});
実例を見る
Chromium ブラウザ(パソコンまたは Android)で、次のサンプルを実際に試してみてください。
フォールバック
ブラウザが beforeinstallprompt
をサポートしていない場合、またはイベントが発生しない場合、ブラウザのインストール プロンプトをトリガーする方法はありません。ただし、ユーザーが PWA を手動でインストールできるプラットフォーム(iOS など)では、ユーザーにこれらの手順を表示できます。
これらの手順はブラウザモードでのみ表示できます。standalone
や fullscreen
などの他の表示オプションは、ユーザーがすでにアプリをインストールしていることを意味します。
ブラウザモードでのみ要素をレンダリングするには、次のように display-mode
メディアクエリを使用します。
#installInstructions {
display: none
}
@media (display-mode: browser) {
#installInstructions {
display: block
}
}
Codelab
ライブラリ
カスタム インストール プロンプトのレンダリングについては、次のライブラリをご確認ください。