このページは 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 アプリにウェブサイトの情報を指定する

まず 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 アプリを 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 アプリにウェブサイトの URL を指定する

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 アプリについてウェブサイトに指示します。マニフェストには related_applications プロパティを含める必要があります。これは、platform や id など、アプリに関する詳細情報を提供する配列です。

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() を呼び出して、インストールされているかどうかを確認します。PWA の範囲外で getInstalledRelatedApps() が呼び出された場合は、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」を追加していたことに気づきました。

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 タグをタグ付けしてください。担当チームがタグを頻繁に確認し、お客様のご質問にお答えします。

フィードバック

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

https://new.crbug.com でバグを報告します。できる限り詳細を記載し、バグを再現するための簡単な手順を提供し、[Components] ボックスに「Mobile>WebAPKs」と入力します。Glitch は、再現をすばやく簡単に共有するのに適しています。

API のサポートを表示する

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

API の使用計画を WICG Discourse スレッドで共有する。
ハッシュタグ #getInstalledRelatedApps を使用して @ChromiumDev 宛てにツイートを送信し、使用場所と使用方法をお知らせください。

ありがとう

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

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

getInstalledRelatedApps() API とは

確認可能な対応アプリの種類

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

Android アプリにウェブサイトの情報を指定する

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

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

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

Windows アプリにウェブサイトの URL を指定する

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

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

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

PWA にそれ自体について伝える

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

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

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

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

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

getInstalledRelatedApps() を呼び出す

ご不明な点がある場合

フィードバック

API のサポートを表示する

関連情報

ありがとう

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

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