このページは Cloud Translation API によって翻訳されました。

アプリはインストールされていますか？getInstalledRelatedApps() が表示されます。

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

Pete LePage

Alexey Rodionov

`getInstalledRelatedApps()` API とは

getInstalledRelatedApps() メソッドは、インストールされている関連アプリのリストを返します。

navigator.getInstalledRelatedApps() を呼び出すと、ユーザーのデバイスにインストールされている関連アプリの配列で解決される Promise が返されます。

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

注:

getInstalledRelatedApps() API では、自分のアプリがインストールされているかどうかのみを確認できます。インストールされているすべてのアプリのリストを取得したり、他のサードパーティ製アプリがインストールされているかどうかを確認したりすることはできません。

getInstalledRelatedApps() API を使用するには、アプリにサイトについて伝え、サイトにアプリについて伝える必要があります。アプリとサイトの関係を定義したら、アプリがインストールされているかどうかを確認できます。

サイトが広範囲にわたる独自のアプリをテストすることを防ぐため、ウェブアプリマニフェストで宣言された最初の 3 つのアプリのみが考慮されます。

他の強力なウェブ API と同様に、getInstalledRelatedApps() API は HTTPS 経由で提供される場合にのみ使用できます。

これにより、あなたのページで、あなたの Android アプリ、ユニバーサル Windows プラットフォーム（UWP）アプリ、またはプログレッシブウェブアプリ（PWA）がユーザーのデバイスにすでにインストールされているかどうかを確認し、インストールされている場合はユーザーエクスペリエンスをカスタマイズできます。

たとえば、アプリがすでにインストールされている場合:

ユーザーをプロダクトマーケティングページからアプリに直接リダイレクトする。
通知などの一部の機能を別のアプリに集約して、通知の重複を防ぐ。
他のアプリがすでにインストールされている場合、PWA のインストールを促進しない。

確認できるサポート対象アプリの種類

アプリの種類	確認可能
Android アプリ	Android のみ: Chrome 80 以降
ユニバーサル Windows プラットフォーム（UWP）アプリ	Windows のみ: Chrome 85 以降、 Edge 85 以降
同じオリジンで同じスコープにインストールされたプログレッシブウェブアプリ（PWA）	Android: Chrome 84 以降パソコン（Windows、macOS、Linux、ChromeOS）: Chrome 140 以降、 Edge 140 以降
プログレッシブウェブアプリ（PWA）が同じオリジンまたは異なるオリジンの異なるスコープにインストールされている	Android のみ: Chrome 84 以降

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

ウェブサイトで Android アプリがインストールされているかどうかを確認できます。

サポート対象

Android のみ: Chrome 80 以降

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

まず、Digital Asset Links システムを使用して、ウェブサイトと Android アプリケーションの関係を定義するように Android アプリを更新する必要があります。これにより、ウェブサイトのみが Android アプリのインストール状況を確認できるようになります。

Android アプリの AndroidManifest.xml に asset_statements エントリを追加します。

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

次に、strings.xml で次のアセットステートメントを追加し、site を実際のドメインに更新します。エスケープ文字を必ず含めてください。

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

完了したら、更新したアプリをデバイスにインストールするか、Google Play ストアまたは他の Android アプリ配信プラットフォームに公開します。

注:

PWABuilder と Bubblewrap は、前述のアプリケーションに必要な変更をすべて自動的に行います。

Bubblewrap は、Node.js 用のオープンソースのライブラリとコマンドラインツール（CLI）のセットです。Bubblewrap は、Google Chrome チームが開発したツールです。デベロッパーは、このツールを使用して、PWA を Trusted Web Activity（TWA）として起動する Android プロジェクトを生成、ビルド、署名できます。

PWABuilder は、Microsoft が開発したオープンソースプロジェクトです。デベロッパーは、PWA の URL を入力し、アプリのメタデータを入力または編集して、[生成] ボタンをクリックするだけで、Microsoft Store、Google Play ストア、App Store、Meta Quest ストアなどのさまざまなストアに公開するために PWA をパッケージ化して署名できます。

PWABuilder は、内部で Bubblewrap を使用して、Android と ChromeOS 向けの PWA をパッケージ化します。

ウェブサイトで Android アプリについて知らせる

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

platform は play でなければなりません
id は Android パッケージ ID です

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

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

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

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

ウェブサイトで、Windows アプリ（UWP を使用して構築）がインストールされているかどうかを確認できます。

サポート対象

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

ウェブサイトに関する情報を Windows アプリに伝える

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

アプリのマニフェストファイル Package.appxmanifest に Windows.appUriHandler 拡張機能の登録を追加します。たとえば、ウェブサイトのアドレスが 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 名前空間を追加する必要がある場合があります。

次に、windows-app-web-link という名前の JSON ファイル（.json ファイル拡張子なし）を作成し、アプリのパッケージファミリー名を指定します。このファイルをサーバーのルートまたは /.well-known/ ディレクトリに配置します。パッケージファミリ名は、アプリマニフェストデザイナーの [パッケージ] セクションで確認できます。

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

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

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

ウェブサイトから Windows アプリについて通知する

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

platform は windows でなければなりません
id は、アプリのパッケージファミリー名に Package.appxmanifest ファイルの <Application> Id 値が付加されたものです。

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

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

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

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

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

サポート対象

Android: Chrome 84 以降

パソコン（Windows、macOS、Linux、ChromeOS）: Chrome 140 以降、Edge 140 以降

PWA に PWA 自身について伝える

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

platform は webapp でなければなりません
url は、PWA のウェブアプリマニフェストへのパス（相対パスも可）です。
id はウェブアプリのフルパスです（デスクトップでは必須、Android では不要）

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

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

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

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

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

サポート対象

Android のみ: Chrome 84 以降

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

まず、PWA が配信されるサーバーにデジタルアセットリンクを追加する必要があります。これにより、ウェブサイトと PWA の関係が定義され、ウェブサイトのみが PWA のインストール状況を確認できるようになります。

PWA が存在するドメインの /.well-known/ ディレクトリ（例: app.example.com）に assetlinks.json ファイルを追加します。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"
    }
  }
]

注: assetlinks.json ファイルを作成するときは、ファイル名を再確認してください。ファイル名に余分な「s」を追加したことに気づかず、デバッグに何時間も費やしたことがあります。

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

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

platform は webapp でなければなりません
url は、PWA のウェブアプリマニフェストへの完全なパスです。

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

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

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

ご不明な点がある場合

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

フィードバック

Chrome の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？

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

API のサポートを表示する

getInstalledRelatedApps() API を使用する予定はありますか？公開サポートは、Chrome チームが機能の優先順位を決定するのに役立ち、他のブラウザベンダーにサポートの重要性を示すことにもなります。

WICG Discourse スレッドで、API の使用計画を共有してください。
ハッシュタグ #getInstalledRelatedApps を使用して @ChromiumDev にツイートし、どこでどのように使用しているかをお知らせください。

ありがとう

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

アプリはインストールされていますか？getInstalledRelatedApps() が表示されます。

getInstalledRelatedApps() API とは

確認できるサポート対象アプリの種類

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

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

ウェブサイトで Android アプリについて知らせる

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

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

ウェブサイトに関する情報を Windows アプリに伝える

ウェブサイトから Windows アプリについて通知する

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

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

PWA に PWA 自身について伝える

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

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

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

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

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

ご不明な点がある場合

フィードバック

API のサポートを表示する

関連情報

ありがとう

`getInstalledRelatedApps()` API とは

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

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