このページは Cloud Translation API によって翻訳されました。

独自のアプリ内インストールエクスペリエンスを提供する方法

Pete LePage

多くのブラウザでは、プログレッシブウェブアプリ（PWA）をユーザーインターフェース内で直接有効にしてインストールを促進できます。インストール（旧称はホーム画面への追加）を行うと、ユーザーは PWA をモバイルデバイスまたはデスクトップデバイスにインストールできます。PWA をインストールすると、ユーザーのランチャーに追加され、インストール済みの他のアプリと同様に実行できるようになります。

ブラウザが提供するインストールエクスペリエンスに加えて、独自のカスタムインストールフローをアプリ内に直接提供できます。

インストールを促進するかどうかを検討する際は、ユーザーが PWA を通常どのように使用しているかを考慮してください。たとえば、1 週間に PWA を複数回使用するユーザーは、スマートフォンのホーム画面やデスクトップオペレーティングシステムのスタートメニューからアプリを起動することで、利便性が向上する可能性があります。一部の生産性向上アプリやエンターテイメントアプリでも、インストールされた standalone モードまたは minimal-ui モードでブラウザのツールバーをウィンドウから削除することで、追加の画面スペースを利用できます。

前提条件

開始する前に、PWA がインストール可能性の要件を満たしていることを確認してください。この要件には通常、ウェブアプリマニフェストがあることが含まれます。

インストールを促す

プログレッシブウェブアプリがインストール可能であることを示し、カスタムのアプリ内インストールフローを指定するには:

beforeinstallprompt イベントをリッスンします。
後でインストールフローをトリガーできるように、beforeinstallprompt イベントを保存します。
PWA がインストール可能であることをユーザーに通知し、アプリ内インストールフローを開始するボタンやその他の要素を提供します。

`beforeinstallprompt` イベントをリッスンする

プログレッシブウェブアプリが必要なインストール条件を満たしている場合、ブラウザは beforeinstallprompt イベントを発生させます。イベントへの参照を保存し、ユーザーインターフェースを更新して、ユーザーが PWA をインストールできるようにします。

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

アプリ内インストールフロー

アプリ内インストールを提供するには、ユーザーがアプリをインストールするためにクリックまたはタップできるボタンやその他のインターフェース要素を提供します。要素がクリックまたはタップされたら、（deferredPrompt 変数に格納された）保存された beforeinstallprompt イベントで prompt() を呼び出します。ユーザーにモーダルインストールダイアログが表示され、PWA のインストールの確認を求められます。

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

userChoice プロパティは、ユーザーの選択に応じて解決される Promise です。遅延イベントの prompt() は 1 回だけ呼び出すことができます。ユーザーが拒否した場合は、beforeinstallprompt イベントが再び発生するまで待機する必要があります（通常は userChoice プロパティが解決された直後）。

PWA が正常にインストールされた時間を検出します

userChoice プロパティを使用すると、ユーザーがユーザーインターフェース内からアプリをインストールしたかどうかを判断できます。ただし、ユーザーがアドレスバーまたは別のブラウザコンポーネントから PWA をインストールする場合は、userChoice を使用してはなりません。代わりに、PWA のインストール時に必ず発生する appinstalled イベントをリッスンする必要があります。これは、インストールに使用されたメカニズムにかかわらず、PWA のインストール時に発生します。

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

PWA の起動方法を検出する

CSS display-mode メディアクエリは、PWA がブラウザタブで起動された方法、またはインストール済みの PWA として起動されたことを示します。これにより、アプリの起動方法に応じて異なるスタイルを適用できます。たとえば、インストール済みの PWA として起動時にインストールボタンを常に非表示にし、[戻る] ボタンを表示するように設定できます。

PWA の起動方法を追跡する

ユーザーが PWA をどのように起動したかをトラッキングするには、matchMedia() を使用して display-mode メディアクエリをテストします。iOS 版 Safari ではまだこの機能がサポートされていないため、代わりに navigator.standalone をオンにする必要があります。これにより、ブラウザがスタンドアロンモードで実行されているかどうかを示すブール値が返されます。

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

表示モードの変化をトラッキングする

standalone と browser tab の間でユーザーが変更したかどうかをトラッキングするには、display-mode メディアクエリの変更をリッスンします。

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

現在の表示モードに基づいて UI を更新する

インストール済みの PWA として起動したときに PWA に異なる背景色を適用するには、条件付き CSS を使用します。

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

アプリのアイコンと名前を更新する

アプリ名を更新したり、新しいアイコンを提供したりする必要がある場合はどうすればよいでしょうか。変更が Chrome にいつ、どのように反映されるかについては、Chrome でウェブアプリマニフェストの更新を処理する方法をご覧ください。