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

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

getInstalledRelatedApps() メソッドを使用すると、ウェブサイトでユーザーのデバイスに iOS、Android、デスクトップアプリ、PWA がインストールされていること。

Pete LePage

getInstalledRelatedApps() API とは何ですか？

</ph> `getInstalledRelatedApps()` を使用してウェブサイトが Android アプリはすでにインストールされています。

getInstalledRelatedApps() を使用すると、ページで次のことが可能になります。モバイルアプリかデスクトップアプリか、場合によってはプログレッシブアプリのウェブアプリ（PWA）はユーザーのデバイスにすでにインストールされており、次のことができます。カスタマイズが可能です。

たとえば、アプリがすでにインストールされている場合は、次のようにします。

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

getInstalledRelatedApps() API を使用するには、アプリに以下の情報を伝える必要があります。サイトにアプリについて伝えましょうルールをアプリがインストールされているかどうかを確認できます。

確認可能なサポート対象のアプリの種類

アプリの種類	確認元
Android アプリ	Android のみ Chrome 80 以降
Windows（UWP）アプリ	Windows のみ Chrome 85 以降 Edge 85 以降
プログレッシブウェブアプリ同じスコープでインストールされているか、異なるスコープです。	Android のみ Chrome 84 以降

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

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

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

サポート対象

Android: Chrome 80 以降

Android アプリにウェブサイトについて設定する

まず、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>

完了したら、更新した Android アプリを Google Play ストアに公開します。

Android アプリに関する情報をウェブサイトに掲載する

次に、Android アプリについてウェブサイトにページにウェブアプリマニフェストを追加します。マニフェストでは、 related_applications プロパティを含めます。これは、詳細を指定する配列です。アプリに関する情報（platform、id など）が表示されます。

platform は play にする必要があります。
id は、Android アプリの Google Play アプリケーション ID です。

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

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

最後に、navigator.getInstalledRelatedApps() を呼び出して、 Android アプリがインストールされている。

デモを試す

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

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

サポート対象

Windows: Chrome 85 以降、Edge 85 以降

Windows アプリにウェブサイトについて設定する

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

アプリのマニフェストに Windows.appUriHandler 拡張機能登録を追加するファイル 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>

必要に応じて、uap3 名前空間を <Package> 属性。

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

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

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

Windows アプリに関する情報をウェブサイトに設定してください

次に、Windows アプリについてウェブサイトにページにウェブアプリマニフェストを追加します。マニフェストでは、 related_applications プロパティを含める。これは、詳細を指定する配列です。アプリに関する情報（platform、id など）が表示されます。

platform は windows にする必要があります。
id は、アプリのパッケージファミリー名に <Application> Id を付加したものですの値をPackage.appxmanifestファイルに含めます。

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

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

最後に、navigator.getInstalledRelatedApps() を呼び出して、 Windows アプリがインストールされている。

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

PWA は、インストールがすでにインストールされているかどうかを確認できます。この例ではリクエストの発行は、同じドメイン上かつスコープ内に存在する必要があります。ウェブアプリマニフェストのスコープで定義された PWA のスコープに基づいて作成されます。

サポート対象

Android: Chrome 84 以降

PWA に自身について言及する

related_applications エントリを PWA のウェブアプリマニフェスト。

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

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

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

最後に、Python 内から navigator.getInstalledRelatedApps() を呼び出します。 PWA のスコープを調べて、インストールされているかどうかを確認します。条件 getInstalledRelatedApps() が PWA の範囲外で呼び出された場合は、 false を返します。詳細については、次のセクションをご覧ください。

デモを試す

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

PWA がインストールされているかどうかをウェブサイトで確認できます（ページが外部にあってもかまいません） PWA の範囲を確認します。たとえば、ランディングページが /landing/ は、/pwa/ から配信される PWA がインストールされているか、またはランディングページは www.example.com から配信され、PWA は app.example.com。

サポート対象

Android: Chrome 84 以降

PWA にウェブサイトに関する情報を伝える

まず、PWA がインストールされているサーバーにデジタルアセットリンクを追加する必要があります。指定します。これにより、ウェブサイトと Google のまた、PWA がインストールされているかどうかをウェブサイトのみが確認できるようにします。

assetlinks.json ファイルを /.well-known/ ディレクトリに追加します。（例: app.example.com）。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 アプリに関する情報をウェブサイトに設置します。ページにウェブアプリマニフェストを追加します。マニフェストでは、 related_applications プロパティを含めます。これは、詳細を指定する配列です。 platform、url など）。

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

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

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

最後に、navigator.getInstalledRelatedApps() を呼び出して、 PWA がインストールされていること。

デモを試す

getInstalledRelatedApps() を呼び出す

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

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

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

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

ご不明な点がある場合

ご不明な点がありましたら、StackOverflow の getInstalledRelatedApps タグを確認します。同様の質問が他にないか確認しましょうわからない場合は、質問を検索し、必ず progressive-web-apps タグ。当社のチームは質問に回答します。

フィードバック

Chrome の実装にバグは見つかりましたか？それともどうなるでしょうか

https://new.crbug.com でバグを報告します。できるだけ多くのバグを再現するための簡単な手順を提供する。 [コンポーネント] ボックスに「Mobile>WebAPKs」と入力します。グリッチすばやく簡単に再現を共有するのに最適です。

API のサポートを表示する

getInstalledRelatedApps() API を使用する予定はありますか？公開サポートにより、Chrome チームは機能の優先順位付けを行い、他のサポートの重要性を認識しています。

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

ありがとう

Microsoft の Sunggook Chue に詳細に協力してくれてありがとうをご覧ください。Chrome の詳細については、Rayan Kanso をご覧ください。

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

getInstalledRelatedApps() API とは何ですか？

確認可能なサポート対象のアプリの種類

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

Android アプリにウェブサイトについて設定する

Android アプリに関する情報をウェブサイトに掲載する

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

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

Windows アプリにウェブサイトについて設定する

Windows アプリに関する情報をウェブサイトに設定してください

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

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

PWA に自身について言及する

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

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

PWA にウェブサイトに関する情報を伝える

PWA についてウェブサイトに知らせる

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

getInstalledRelatedApps() を呼び出す

ご不明な点がある場合

フィードバック

API のサポートを表示する

関連情報

ありがとう

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

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