インストール プロンプト

ユーザーが PWA のインストール プロセスになじみが薄い可能性があります。デベロッパーは、ユーザーにアプリをインストールするよう促す適切なタイミングを理解できます。デフォルトのブラウザのインストール プロンプトを強化することもできます。利用可能なツールを確認しましょう。

インストール ダイアログの強化

PWA がインストール基準を満たすと、ブラウザにデフォルトのインストール プロンプトが表示されます。ブラウザは、ウェブアプリ マニフェストの name プロパティと icons プロパティを使用してプロンプトを作成します。

Microsoft Edge のインストール プロンプト

一部のブラウザでは、description、categories、screenshots など、マニフェスト内のプロモーション フィールドを使用することで、インストール プロンプトのエクスペリエンスが向上します。たとえば、Android 版 Chrome で PWA が description フィールドと screenshots フィールドの値を提供している場合、インストール ダイアログは、小さな [ホーム画面に追加] 情報バーから、アプリストアからのインストール メッセージに似た、より大きく詳細なダイアログに変換されます。

プロモーション フィールドの活用例:

beforeinstallprompt イベント

ユーザーに PWA のインストールを促す最初のステップは、ブラウザのインストール プロンプトです。独自のインストール エクスペリエンスを実装するには、引き続きアプリがインストール条件に合格する必要があります。つまり、アプリがインストール可能であることをブラウザが検出すると、beforeinstallprompt イベントが発生します。ユーザー エクスペリエンスをカスタマイズするには、このイベント ハンドラを実装する必要があります。方法は次のとおりです。

  1. beforeinstallprompt イベントをリッスンします。
  2. 保存します（後で必要になります）。
  3. 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

ライブラリ

カスタム インストール プロンプトのレンダリングについては、次のライブラリをご確認ください。

関連情報