アプリはインストールされていますか？Get Installed Related Apps API を使用すると、確認できます。

• Windows のみ: Chrome 85 以降、Edge 85 以降

ウェブサイトについて Windows アプリに伝える

URI ハンドラを使用して、ウェブサイトと Windows アプリケーションの間の検証済みの関係を定義するように Windows アプリを更新する必要があります。これにより、ウェブサイトのみが Windows アプリがインストールされているかどうかを確認できるようになります。

Windows.appUriHandler 拡張機能の登録をアプリのマニフェスト ファイル AppxManifest.xml または Package.appxmanifest に追加します。たとえば、ウェブサイトのアドレスが example.com の場合は、アプリのマニフェストに次のエントリを追加します。

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

<Package> 属性に uap3 Namespace を追加する必要がある場合があります。

ウェブサイトに複数のアドレスがある場合は、アドレスごとに <uap3:AppUriHandler> 内に個別の <uap3:Host Name=... /> エントリを追加します。

次に、windows-app-web-link という名前の JSON ファイル（.json ファイル拡張子なし）を作成し、アプリのパッケージ ファミリー名を入力します。そのファイルを /.well-known/ ディレクトリまたはサーバーのルートに配置します。

[
  {
    "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
    "paths": [ "*" ]
  }
]

上級者向けのヒント: これは配列です。つまり、ウェブサイトと複数の Windows アプリの間に検証済みの関係を定義できます。

パッケージ ファミリー名を確認するには、アプリをインストールし、PowerShell で次のコマンドを実行して、リストでアプリを見つけます。

Get-AppxPackage | Select-Object PackageFamilyName

URI ハンドラの設定について詳しくは、アプリ URI ハンドラを使用してウェブサイトのアプリを有効にするをご覧ください。

Windows アプリについてウェブサイトに伝える

次に、ウェブアプリ マニフェストをページに追加して、Windows アプリについてウェブサイトに伝えます。マニフェストには、platform や id など、アプリの詳細を提供する配列である related_applications プロパティを含める必要があります。

• platform は windows である必要があります
• id は、末尾に !App がサフィックスとして追加されたアプリのパッケージ ファミリー名です

{
  ...
  "related_applications": [
    {
      "platform": "windows",
      "id": "MyApp_9jmtgj1pbbz6e!App"
    }
  ]
  ...
}

上級者向けのヒント: これは配列です。つまり、ウェブサイトと複数の Windows アプリの間に検証済みの関係を定義できます。

アプリがインストールされているかどうかを確認する

最後に、非同期関数 navigator.getInstalledRelatedApps() を呼び出して、Windows アプリがインストールされているかどうかを確認します。

こちらのデモをご覧ください。

プログレッシブ ウェブアプリがすでにインストールされているかどうかを確認する（スコープ内）

PWA は、すでにインストールされているかどうかを確認できます。この場合、リクエストを行うページは、ウェブアプリ マニフェストのスコープで定義されているように、同じドメインにあり、PWA の スコープ内にある必要があります。

サポート対象:

• Android: Chrome 84 以降
• デスクトップ（Windows、macOS、Linux、ChromeOS）: Chrome 140 以降、Edge 140 以降

PWA について PWA に伝える

PWA の ウェブアプリ マニフェストに related_applications エントリを追加して、PWA について PWA に伝えます。

• platform は webapp である必要があります
• url は、PWA のウェブアプリ マニフェストへのパス（相対パス可）です
• id は、ウェブアプリ マニフェストの id フィールドで宣言されている ウェブアプリ ID、またはブラウザによって計算されたウェブアプリ ID です（デスクトップでは必須、Android では不要）

{
  ...
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [
    {
      "platform": "webapp",
      "url": "/manifest.json",
      "id": "https://example.com/?utm_source=home_screen"
    }
  ],
  ...
}

PWA がインストールされているかどうかを確認する

最後に、PWA の スコープ内から非同期関数 navigator.getInstalledRelatedApps() を呼び出して、インストールされているかどうかを確認します。navigator.getInstalledRelatedApps() が PWA のスコープ外で呼び出されると、[] が返されます。詳細については、次のセクションをご覧ください。

プログレッシブ ウェブアプリがインストールされているかどうかを確認する（スコープ外）

ウェブサイトで、ページが PWA の スコープ外にある場合でも、PWA がインストールされているかどうかを確認できます。たとえば、/landing/ から提供されるランディング ページで、/pwa/ から提供される PWA がインストールされているかどうかを確認できます。また、ランディング ページが www.example.com から提供され、PWA が app.example.com から提供される場合も同様です。

サポート対象:

• Android のみ: Chrome 84 以降

ウェブサイトについて PWA に伝える

まず、PWA が提供されるサーバーに Digital Asset Links を追加する必要があります。これにより、ウェブサイトと PWA の間の検証済みの関係を定義し、ウェブサイトのみが PWA がインストールされているかどうかを確認できるようになります。

assetlinks.json ファイルを、PWA が存在するドメイン（app.example.com など）の /.well-known/ ディレクトリに追加します。site プロパティに、チェックを実行するウェブアプリ マニフェストへの完全 パスを指定します（PWA のウェブアプリ マニフェストではありません）。

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

上級者向けのヒント: これは配列です。つまり、PWA と複数のウェブサイトの間に検証済みの関係を定義できます。

PWA についてウェブサイトに伝える

次に、ウェブアプリ マニフェストをページに追加して、PWA アプリについてウェブサイトに伝えます。マニフェストには、platform や url など、PWA の詳細を提供する配列である related_applications プロパティを含める必要があります。

• platform は webapp である必要があります
• url は、PWA のウェブアプリ マニフェストへの完全 パスです

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

上級者向けのヒント: これは配列です。つまり、ウェブサイトと複数の PWA の間に検証済みの関係を定義できます。

PWA がインストールされているかどうかを確認する

最後に、非同期関数 navigator.getInstalledRelatedApps() を呼び出して、PWA がインストールされているかどうかを確認します。

ご不明な点がある場合

ご不明な点がある場合StackOverflow の getInstalledRelatedApps タグで、他のユーザーが同様の質問をしていないかどうかを確認してください。質問がない場合は、質問を投稿し、progressive-web-apps タグを必ず追加してください。Google のチームがそのタグを頻繁にモニタリングし、質問に回答します。

フィードバック

Chrome の実装にバグが見つかった場合または、実装が仕様と異なる場合

• https://new.crbug.com でバグを報告してください。できるだけ詳細な情報を含め、バグを再現する手順を記載し、Mobile>WebAPKs を [Components] ボックスに入力してください。

関連情報

• Get Installed Related Apps API の公開説明
• 仕様のドラフト
• トラッキング バグ
• ChromeStatus.com のエントリ
• Blink コンポーネント: Mobile>WebAPKs

ありがとう

Windows アプリのテストの詳細についてご協力いただいた Microsoft の Sunggook Chue 氏、Chrome の詳細についてご協力いただいた Rayan Kanso 氏に感謝いたします。