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

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

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

Pete LePage

getInstalledRelatedApps() API とは何ですか？

`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 アプリにウェブサイトについて伝える

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

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

ウェブサイトで Android アプリについて紹介する

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

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

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

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

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

デモを試す

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

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

サポート対象

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>

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

次に、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 以降

PWA に自身に関する情報を提供する

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

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

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

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

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

デモを試す

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

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

サポート対象

Android: Chrome 84 以降

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

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

PWA が存在するドメインの /.well-known/ ディレクトリに assetlinks.json ファイルを追加します（例: 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」が 1 つ余分に追加されていることに気づきました。

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

次に、ページにウェブアプリマニフェストを追加して、ウェブサイトに 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 がインストールされているかどうかを確認します。

デモを試す

getInstalledRelatedApps() の呼び出し

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

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 タグを付けて質問してください。YouTube の担当チームがそのタグを頻繁にモニタリングし、質問に回答するよう努めています。

フィードバック

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

https://new.crbug.com でバグを報告します。できるだけ詳細な情報を含め、バグの再現手順を簡単に説明します。[コンポーネント] ボックスに Mobile>WebAPKs と入力します。Glitch は、簡単な再現手順をすばやく共有するのに適しています。

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 がインストールされているかどうかを確認する

getInstalledRelatedApps() の呼び出し

ご不明な点がある場合

フィードバック

API のサポートを表示する

関連情報

ありがとう

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

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