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 アプリにウェブサイトの情報を指定する
まず 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"
}
}
]
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 宛てにツイートを送信し、使用場所と使用方法をお知らせください。
関連情報
getInstalledRelatedApps()
API の公開説明メール- 仕様のドラフト
- バグのトラッキング
- ChromeStatus.com のエントリ
- Blink コンポーネント:
Mobile>WebAPKs
ありがとう
Windows アプリのテストに協力してくれた Microsoft の Sunggook Chue、Chrome の詳細について Rayan Kanso に深く感謝します。