検出

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

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

このデータは、分析、ユーザーの好みの把握、ユーザー エクスペリエンスのカスタマイズに使用できます。これらのイベントをキャプチャするには、メディアクエリ、window のイベント、またはこちらに記載されている機能の API などのツールを使用します。

表示モードの検出

ユーザーが 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)
    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';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

この例を使用する場合は、ウェブアプリ マニフェストの表示モード(standaloneminimal-uifullscreen など)と一致するようにしてください。カンマ区切りの条件を使用して、メディアクエリ文字列内の複数のクエリを照合することもできます。

また、マニフェストの 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 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());
    });
});

iOS と iPadOS のストレージ分離

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

対応ブラウザ

  • Chrome: サポートされていません。
  • Edge: サポートされていません。
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ソース

ウェブサイトは、マニフェストによってアプリとの関係を示します。これを行うには、ウェブアプリ マニフェスト仕様の related_applications メンバーを使用します。related_applications キーは、関連する各アプリケーションを表すオブジェクトの配列です。各エントリには、platformurl、省略可能な 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 の場合、アプリストアからインストールされます。この構成の利点の一つは、現時点では、バックアップまたは新しいデバイスへの切り替えで復元されるのは、アプリストアからインストールされたアプリのみである点です。

{
  ...
  "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 をアプリストアに公開できる BubbleWrapPWA Builder などのツールでは、必要なメタデータがすでに追加されているため、ウェブサイトはすぐに getInstalledRelatedApps() を使用できます。getInstalledRelatedApps() を使用して PWA がすでにインストールされているかどうかを検出するには、マニフェストの related_applications フィールドに、マニフェストの URL を指定して webapp を定義します。

...
"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 ファイルを設定し、他のスコープに権限を付与する必要があります。

リソース