検出

ユーザーが PWA をブラウザモードとスタンドアロン モードのどちらで使用しているかを検出できます。Chromium ベースのブラウザ（Android とパソコン）では、次のイベントを検出することもできます。

• インストール招待ダイアログのステータスと結果。
• インストールが完了しました。
• ブラウザから PWA ウィンドウへのナビゲーション転送（またはその逆）
• PWA のインストール ステータス。
• 関連アプリがアプリストアからインストールされた。

このデータは、分析、ユーザーの好みの理解、ユーザー エクスペリエンスのカスタマイズに使用できます。これらのイベントをキャプチャするには、メディアクエリなどのツール、window のイベント、またはこちらのリストにあるケーパビリティ API を使用します。

表示モードを検出しています

ユーザーが PWA を起動する方法を追跡するには、matchMedia() を使用して display-mode メディアクエリをテストします。

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

この例を使用する場合は、必ずウェブアプリ マニフェストの表示モード（standalone、minimal-ui、fullscreen など）と一致させてください。カンマ区切りの条件を使用して、メディアクエリ文字列の複数のクエリを照合することもできます。

また、マニフェストの start_url にクエリ パラメータを追加することもできます。このクエリ パラメータを分析でキャプチャすることで、PWA がいつ、どのように、どの程度使用されているかに関する統計情報を追跡できます。

アプリのインストール

ユーザーがブラウザでインストール メッセージを承認すると、Chromium ベースのブラウザで appinstalled イベントが発生します。このイベント ハンドラは、追加したアプリ内インストール プロモーションを削除するのに便利です。

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

WebAPK を搭載した Android デバイスでは、WebAPK が作成されてインストールされた後ではなく、ユーザーがダイアログに同意したときにイベントが発生します。アプリが完全にインストールされるまで数秒かかることがあります。

インストール プロンプトの章では、インストール プロンプトが表示されるかどうかを検出する方法と、ユーザーが行った選択について説明しています。

セッション転送

ユーザーは、ブラウザ内とインストール済みのスタンドアロン フォームで PWA を使用できます。パソコンのブラウザでは、次の画像のように、バッジやメニュー項目を使用して、これらのコンテキスト間で現在のナビゲーションを移動できます。

Android には、パソコンのブラウザからアプリにナビゲーションを転送するメニュー項目と同様のメニュー項目があります。この場合、現在の URL が開かれますが、アプリ内では新しいページ ナビゲーションになります。

次の画像は、アプリがすでにインストールされているときの Android のメニュー項目を示しています。

インストール後の転送

パソコンのブラウザでは、現在のナビゲーションがインストール時にすぐにアプリに転送されます。ブラウザのタブが閉じ、新しくインストールされたアプリが開き、ユーザーが行っていた操作を続行します。

モバイル ブラウザでは、アプリをインストールしても現在のナビゲーションがブラウザに表示されたままになります。ユーザーがアプリに移行したい場合は、アプリを手動で開く必要があり、新しいナビゲーションになります。

転送の検出

ブラウザとウィンドウ間の転送を検出するには、メディアクエリを使用します。

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  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);
    });
});

iOS および iPadOS のストレージ分離

iOS および iPadOS では、ブラウザとインストール済みアイコンの間でナビゲーションや URL の転送は行われません。同じ PWA であっても、ユーザーがインストールした PWA のアイコンごとに専用のストレージが割り当てられ、Safari のタブや他のアイコンから分離されます。 ユーザーがインストールしたアイコンを開いても、保存容量は Safari と共有されません。PWA にログインする必要がある場合は、再度ログインする必要があります。アプリがホーム画面に複数回追加された場合、PWA のインスタンスごとにユーザーのセッションは異なります。

関連アプリケーション

ウェブサイトは、マニフェストによってアプリとの関係を示します。これを行うには、ウェブアプリ マニフェスト仕様の related_applications メンバーを使用します。 related_applications キーは、関連する各アプリを表すオブジェクトの配列です。各エントリには、platform、url、および省略可能な id が含まれます。

プラットフォームの値は次のとおりです。

• chrome_web_store: Google Chrome ウェブストア
• play: Google Play アプリ（Android と ChromeOS）。
• chromeos_play: ChromeOS Play。
• webapp: ウェブアプリ。
• windows: Microsoft Store（Windows 10、11）。
• f-droid: ドロイド君。
• amazon: Amazon AppStore（FireOS）。

関連アプリが好き

ユーザーがアプリをインストールする際に、マニフェストで prefer_related_applications フィールドを true に設定することで、ユーザーを関連アプリにリダイレクトできます。この設定では、互換性のあるブラウザでは、インストール フローでは PWA はインストールされません。代わりに、related_applications エントリで指定した url または id からストアのインストールがトリガーされます。

関連アプリケーションが PWA の場合、アプリストアからインストールされます。この構成の利点の 1 つは、現時点では、アプリストアからインストールされたアプリのみがバックアップで復元されるか、新しいデバイスに切り替えたときに復元されることです。

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Apple スマートアプリ バナー

Safari では related_applications メンバーはサポートされていませんが、App Store のアプリ用のスマートアプリ バナーが提供されています。そのため、App Store で公開している PWA などのアプリを宣伝する場合は、PWA の HTML にメタタグを含めて、ユーザーにアプリをインストールするよう促すか（上記のリンクを参照）、ナビゲーションを転送します（すでにインストールされている場合）。

関連するインストール済みアプリの検出

getInstalledRelatedApps() メソッドを使用すると、iOS、Android、デスクトップ アプリ、または PWA がユーザーのデバイスにインストールされているかどうかをウェブサイトで確認できます。

関連アプリがすでにインストールされているかどうかを確認すると、汎用ウェブサイトにアクセスする代わりに、カスタム インストールのプロンプトを非表示にしたり、インストール済みのアプリに直接ユーザーをリダイレクトしたりするなどの機能を実装できます。 getInstalledRelatedApps() メソッドを使用するには、インストール済みアプリとウェブサイトの両方が相互に接続を設定する必要があります。各アプリには、プラットフォームに応じてウェブサイトを認識するためのメタデータが含まれています。ウェブサイトでは、マニフェストの related_applications フィールドにインストール済みのアプリが必要です。

PWA をアプリストアに公開できる BubbleWrap や PWA Builder などのツールには、ウェブサイトですぐに getInstalledRelatedApps() を使用できるよう、必要なメタデータがすでに追加されています。 getInstalledRelatedApps() を使用して PWA がすでにインストールされているかどうかを検出するには、マニフェストの related_applications フィールドで webapp を定義し、マニフェストへの URL を指定します。

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

getInstalledRelatedApps() は、アプリ オブジェクトの配列を返します。配列が空の場合、関連するアプリはインストールされていません。

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

PWA のスコープ外からのインストールを検出する

Android 89 の Chrome では、PWA の対象範囲外からでも PWA がインストールされているかどうかを検出できます。こちらの記事の説明に沿って、PWA の /.well-known/ フォルダ内に JSON ファイルを設定し、もう一方のスコープに権限を付与する必要があります。

リソース

• アプリはインストール済みか？getInstalledRelatedApps() から確認できます。
• MDN: 関連アプリケーション
• MDN: AppInstalled イベント
• Apple: スマート アプリバナーによるアプリのプロモーション