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

多くのブラウザでは、インストールを有効にしてプロモートできます プログレッシブ ウェブアプリ(PWA)のユーザー インターフェース内で直接管理できます。 インストール(旧称「ホーム画面に追加」とも呼ばれます)を使用すると、 モバイルやデスクトップ デバイスで PWA を作成できます。PWA をインストールすると、ユーザーの 他のインストール済みアプリと同様に実行できます。

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

<ph type="x-smartling-placeholder">
</ph> Spotify PWA に用意されている [アプリをインストール] ボタン <ph type="x-smartling-placeholder">
</ph> 「アプリのインストール」ボタンを使用します。

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

前提条件

始める前に、PWA が インストール要件があります。これは通常、 ウェブアプリ マニフェストを含める

インストールを促す

プログレッシブ ウェブアプリがインストール可能であることを示し、 アプリ内インストール フロー:

  1. beforeinstallprompt イベントをリッスンします。
  2. インストール フローをトリガーできるように beforeinstallprompt イベントを保存します。 後で説明します
  3. 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.`);
});

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

アプリ内インストールを提供するには、ボタンなどのインターフェース要素を提供する クリックまたはタップしてアプリをインストールできます要素がクリックされたり prompt() イベント(beforeinstallprompt deferredPrompt 変数)。ユーザーにモーダル インストール ダイアログを表示して、 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 を起動する方法を追跡するには、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';
}

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

ユーザーが standalonebrowser 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 に異なる背景色を適用するには 条件付き CSS を使用:

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

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

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