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

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

Pete LePage

Alexey Rodionov

インストール済みの関連アプリを取得する API を使用すると、インストール済みの関連アプリのリストとそれらの詳細を取得できます。

これにより、PWA 自体と関連するウェブページ（プロダクトマーケティングウェブサイトなど）の両方から、プログレッシブウェブアプリ（PWA）、Android アプリ、ユニバーサル Windows プラットフォーム（UWP）アプリが現在のデバイスにインストールされているかどうかを確認できます。

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 をパッケージ化します。

アプリがすでにインストールされている場合は、ユーザーエクスペリエンスをカスタマイズできます。

次に例を示します。

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

Get Installed Related Apps API を使用するには、アプリにページについて伝え、ページにアプリについて伝える必要があります。アプリとページの関連性を定義すると、関連するアプリがインストールされているかどうかを確認できます。

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

他の強力なウェブ API のほとんどと同様に、Get Installed Related Apps API は HTTPS 経由で提供される場合にのみ使用できます。

Get Installed Related Apps API とは何ですか？

非同期の navigator.getInstalledRelatedApps() メソッドを呼び出すと、次のアプリに関する詳細情報を含むオブジェクトの配列で解決される Promise が返されます。

現在のデバイスにインストールされている、
ウェブアプリマニフェストの related_applications フィールドで定義されている
navigator.getInstalledRelatedApps() メソッドが呼び出されるページとの関係が確認されている（詳しくは次のセクションをご覧ください）。

const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

console.log(installedRelatedApps) を呼び出すと、次のような結果が返されます。

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

たとえば、関連アプリがユーザーのデバイスにインストールされているかどうかを確認するには、次の 1 行のコードを使用します。

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

パッケージ ID がわかっている場合は、インストールされている関連する Android アプリのバージョン番号を取得するために、次の 1 行のコードを使用できます。

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

つまり、navigator.getInstalledRelatedApps() メソッドは、関連アプリのバージョンが min_version より低い場合や、署名証明書がウェブアプリマニフェストの related_applications フィールドで宣言されている fingerprints と一致しない場合でも、インストールされている関連アプリを返します。

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

アプリの種類	チェック可能
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 アプリ配信プラットフォームに公開します。

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

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

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 自身について PWA に伝えます。

platform は webapp でなければなりません
url は、PWA のウェブアプリマニフェストへのパス（相対パスも可）です。
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 の配信元サーバーにデジタルアセットリンクを追加する必要があります。これにより、ウェブサイトと 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"
    }
  }
]

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

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

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

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

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

ご不明な点がある場合

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

フィードバック

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

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

ありがとう

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

アプリはインストールされていますか？Get Installed Related Apps API を使用すると、確認できます。 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Get Installed Related Apps API とは何ですか？

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

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

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

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

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

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

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

ウェブサイトで Windows アプリについて説明する

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

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

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

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

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

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

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

ご不明な点がある場合

フィードバック

関連情報

ありがとう

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

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

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