getInstalledRelatedApps()
メソッドを使用すると、ウェブサイトで
ユーザーのデバイスに iOS、Android、デスクトップ アプリ、PWA がインストールされていること。
getInstalledRelatedApps() API とは何ですか?
<ph type="x-smartling-placeholder">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 アプリにウェブサイトについて設定する
まず、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 アプリについてウェブサイトに
ページにウェブアプリ マニフェストを追加します。マニフェストでは、
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 アプリにウェブサイトについて設定する
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>
必要に応じて、uap3
名前空間を
<Package>
属性。
次に、次の名前の JSON ファイル(.json
ファイル拡張子は除く)を作成します。
windows-app-web-link
を指定し、アプリのパッケージ ファミリー名を指定します。場所
このファイルは、サーバーのルートまたは /.well-known/
ディレクトリにあります。マイページ
パッケージ ファミリー名はアプリ マニフェストの [Packageaging] セクションで確認できます。
デザイナーです。
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
詳しくは、アプリ URI ハンドラを使用してウェブサイトに対してアプリを有効にするをご覧ください。 URI ハンドラの設定に関する詳細をすべて記載しています。
Windows アプリに関する情報をウェブサイトに設定してください
次に、Windows アプリについてウェブサイトに
ページにウェブアプリ マニフェストを追加します。マニフェストでは、
related_applications
プロパティを含める。これは、詳細を指定する配列です。
アプリに関する情報(platform
、id
など)が表示されます。
platform
はwindows
にする必要があります。id
は、アプリのパッケージ ファミリー名に<Application>
Id
を付加したものです の値をPackage.appxmanifest
ファイルに含めます。
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
アプリがインストールされているかどうかを確認する
最後に、navigator.getInstalledRelatedApps()
を呼び出して、
Windows アプリがインストールされている。
プログレッシブ ウェブアプリがすでにインストールされているかどうかを確認する(サポート範囲内)
PWA は、インストールがすでにインストールされているかどうかを確認できます。この例では リクエストの発行は、同じドメイン上かつスコープ内に存在する必要があります。 ウェブアプリ マニフェストのスコープで定義された PWA のスコープに基づいて作成されます。
Android: Chrome 84 以降
PWA に自身について言及する
related_applications
エントリを
PWA のウェブアプリ マニフェスト。
platform
はwebapp
にする必要があります。url
は、PWA のウェブアプリ マニフェストのフルパスです。
{
…
"scope": "/",
"start_url": "/",
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
…
}
PWA がインストールされているかどうかを確認する
最後に、Python 内から navigator.getInstalledRelatedApps()
を呼び出します。
PWA のスコープを調べて、インストールされているかどうかを確認します。条件
getInstalledRelatedApps()
が PWA の範囲外で呼び出された場合は、
false を返します。詳細については、次のセクションをご覧ください。
デモを試す
プログレッシブ ウェブアプリがインストールされているかどうかを確認する(サポート範囲外)
PWA がインストールされているかどうかをウェブサイトで確認できます(ページが外部にあってもかまいません)
PWA の範囲を確認します。たとえば、ランディングページが
/landing/
は、/pwa/
から配信される PWA がインストールされているか、または
ランディング ページは www.example.com
から配信され、PWA は
app.example.com
。
Android: Chrome 84 以降
PWA にウェブサイトに関する情報を伝える
まず、PWA がインストールされているサーバーにデジタル アセット リンクを追加する必要があります。 指定します。これにより、ウェブサイトと Google の また、PWA がインストールされているかどうかをウェブサイトのみが確認できるようにします。
assetlinks.json
ファイルを /.well-known/
ディレクトリに追加します。
(例: 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
など)。
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 でバグを報告します。できるだけ多くの
バグを再現するための簡単な手順を提供する。
[コンポーネント] ボックスに「
Mobile>WebAPKs
」と入力します。グリッチ すばやく簡単に再現を共有するのに最適です。
API のサポートを表示する
getInstalledRelatedApps()
API を使用する予定はありますか?公開
サポートにより、Chrome チームは機能の優先順位付けを行い、他の
サポートの重要性を認識しています。
- API の使用方法を WICG のディスカッション スレッドで共有してください。
- ハッシュタグを使用して @ChromiumDev にツイートしてください
#getInstalledRelatedApps
どこで、どのように使用されているかをお知らせください。
関連情報
getInstalledRelatedApps()
API の公開説明- 仕様ドラフト
- バグのトラッキング
- ChromeStatus.com のエントリ
- Blink コンポーネント:
Mobile>WebAPKs
ありがとう
Microsoft の Sunggook Chue に詳細に協力してくれてありがとう をご覧ください。Chrome の詳細については、Rayan Kanso をご覧ください。