検出

ユーザーが 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 をブラウザ内およびインストールされているスタンドアロン フォームで使用できます。パソコンのブラウザでは、次の画像に示すように、バッジまたはメニュー項目を使用して、これらのコンテキスト間で現在のナビゲーションを転送できます。

ブラウザタブと PWA ウィンドウ間のナビゲーション転送。

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

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

Android 版 Chrome にメニュー項目が表示され、PWA ウィンドウで新しいナビゲーションが開きます。

インストール後の転送

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

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

転送の検出

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

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 インスタンスごとに、ユーザーのセッションが異なります。

対応ブラウザ

  • x
  • 79
  • x
  • x

ソース

ウェブサイトは、マニフェストを介してアプリとの関係を示します。そのためには、ウェブアプリ マニフェスト仕様の 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: 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 ビルダーなどのツールでは、必要なメタデータがすでに追加されているため、ウェブサイトですぐに 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 ファイルを設定し、他のスコープに権限を付与する必要があります。

リソース