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

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

Pete LePage

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

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

Spotify PWA に用意されている [アプリをインストール] ボタン — Spotify PWA に表示される [アプリをインストール] ボタン。

インストールを促進するかどうかを検討する際は、ユーザーが通常どのようにおすすめしますたとえば、同じ PWA を使用する複数のユーザーが 1 週間に 1 回以上使用すると、スマートフォンのホーム画面またはパソコンのスタートメニューからアプリを起動する OS です。生産性やエンタメ関連のアプリケーションの中には、ブラウザツールバーを画面から削除することで、インストール済みの standalone、minimal-ui、または window-control-overlay モードでウィンドウを表示する。

前提条件

始める前に、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.`);
});

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

アプリ内インストールを提供する場合は、ユーザーがクリックまたはタップしてアプリをインストールできるボタンなどのインターフェース要素を用意します。要素がクリックまたはタップされたら、保存された beforeinstallprompt イベント（deferredPrompt 変数に保存されている）で 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 は役に立ちません。代わりに、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 メディアクエリ。

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

表示モードの変更時にトラッキングする

ユーザーが browser と他のディスプレイモードを切り替えたかどうかを追跡するには、display-mode メディアクエリの変更をリッスンします。

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

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

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

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

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

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