getInstalledRelatedApps()
メソッドを使用すると、ウェブサイトがユーザーのデバイスに iOS/Android/デスクトップ アプリまたは PWA がインストールされているかどうかを確認できます。
getInstalledRelatedApps() API とは何ですか?
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.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"
}
}
]
ウェブサイトに 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 氏に感謝いたします。