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

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

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

getInstalledRelatedApps() を使用すると、ページでモバイルアプリまたはデスクトップアプリがインストールされているかどうか、またはプログレッシブ ウェブアプリ(PWA)がユーザーのデバイスにすでにインストールされているかどうかを確認できます。インストールされている場合は、ユーザー エクスペリエンスをカスタマイズできます。

たとえば、アプリがすでにインストールされている場合:

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

getInstalledRelatedApps() API を使用するには、アプリにサイトについて伝え、サイトにアプリについて伝える必要があります。両者の関係を定義したら、アプリがインストールされているかどうかを確認できます。

確認できるサポートされているアプリの種類

アプリの種類 確認できる場所
Android アプリ Android のみ
Chrome 80 以降
Windows(UWP)アプリ Windows のみ
Chrome 85 以降
Edge 85 以降
プログレッシブ ウェブアプリ
同じスコープまたは別のスコープにインストールされている。
Android のみ
Chrome 84 以降

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

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

サポート対象

Android: Chrome 80 以降

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

まず、Digital Asset Links システムを使用して、ウェブサイトと Android アプリの関係を定義するように Android アプリを更新する必要があります。これにより、Android アプリがインストールされているかどうかをウェブサイトのみが確認できるようになります。

Android アプリの AndroidManifest.xmlasset_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 アプリがあることを通知します。マニフェストには、platformid など、アプリに関する詳細情報を提供する配列である related_applications プロパティを含める必要があります。

  • platformplay にする必要があります。
  • 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 アプリについてウェブサイトに伝えます。マニフェストには、platformid など、アプリの詳細を提供する配列である related_applications プロパティを含める必要があります。

  • platformwindows にする必要があります。
  • 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 に自身について伝えます。

  • platformwebapp にする必要があります。
  • 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"
    }
  }
]

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

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

  • platformwebapp にする必要があります。
  • 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 チームが機能の優先順位付けを行う際に役立ち、他のブラウザ ベンダーに、その機能のサポートがどれほど重要であるかを示します。

関連情報

ありがとう

Windows アプリのテストに関する詳細についてサポートしてくれた Microsoft の Sunggook Chue 氏と、Chrome の詳細についてサポートしてくれた Rayan Kanso 氏に感謝いたします。