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

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

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

Pete LePage

getInstalledRelatedApps() API とは何ですか？

Android アプリがすでにインストールされているかどうかを `getInstalledRelatedApps()` を使用して確認するウェブサイト。

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 アプリにウェブサイトについて設定する

URI ハンドラを使用してウェブサイトと Windows アプリの関係を定義するように、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() を呼び出すと、ユーザーのデバイスにインストールされているアプリの配列で解決される 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 タグを付けてください。YouTube の担当チームがそのタグを頻繁にモニタリングし、質問に回答するよう努めています。

フィードバック

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

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

API のサポートを表示する

getInstalledRelatedApps() API を使用する予定ですか？一般公開のサポートは、Chrome チームが機能の優先順位付けを行う際に役立ち、他のブラウザベンダーにその機能のサポートがどれほど重要であるかを示します。

API の使用方法を WICG のディスカッションスレッドで共有してください。
ハッシュタグ #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 のサポートを表示する

関連情報

ありがとう

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

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