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

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

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

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

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

前提条件

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

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

アプリ内インストールを提供する場合は、ユーザーがクリックまたはタップしてアプリをインストールできるボタンなどのインターフェース要素を用意します。要素がクリックまたはタップされたら、保存された 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 がウェブアプリ マニフェストの更新を処理する方法をご覧ください。