La méthode getInstalledRelatedApps()
permet à votre site Web de vérifier si
votre application de bureau iOS/Android/ou PWA est installée sur l'appareil d'un utilisateur.
Qu'est-ce que l'API getInstallRelatedApps() ?
![](https://web.dev/static/articles/get-installed-related-apps/image/vjamv2uyz6NxBPxPIm11.jpg?authuser=6&hl=fr)
getInstalledRelatedApps()
pour déterminer si
L'application Android est déjà installée.
Le getInstalledRelatedApps()
permet à votre page de
vérifiez si votre application mobile ou de bureau, ou, dans certains cas, si votre campagne
L'application Web (PWA) est déjà installée sur l'appareil de l'utilisateur et vous permet
personnaliser l'expérience
utilisateur si c'est le cas.
Par exemple, si votre application est déjà installée:
- Rediriger l'utilisateur directement vers votre application à partir d'une page marketing de produit.
- Centraliser certaines fonctionnalités, comme les notifications dans l'autre application, pour pour éviter les notifications en double.
- Ne pas promouvoir l'installation de votre PWA si votre autre application est déjà installée.
Pour utiliser l'API getInstalledRelatedApps()
, vous devez indiquer à votre application
votre site, puis parlez-lui de votre application. Une fois que vous avez défini
entre les deux, vous pouvez vérifier si l'application est installée.
Types d'applications compatibles que vous pouvez vérifier
Type d'application | Cochable depuis |
---|---|
Application Android |
Android uniquement Chrome 80 ou version ultérieure |
Application Windows (UWP) |
Windows uniquement Chrome 85 ou version ultérieure Edge 85 ou version ultérieure |
Progressive web app Installé dans la même portée ou dans un un champ d'application différent. |
Android uniquement Chrome 84 ou version ultérieure |
Vérifier si votre application Android est installée
Votre site Web peut vérifier si votre application Android est installée.
Android: Chrome 80 ou version ultérieure
Présenter votre site Web à votre application Android
Tout d'abord, vous devez mettre à jour votre application Android pour définir la relation entre votre site Web et votre application Android à l'aide du Système Digital Asset Links : Ainsi, seules vos données site Web peut vérifier si votre application Android est installée.
Dans le AndroidManifest.xml
de votre application Android, ajoutez un asset_statements
entrée:
<manifest>
<application>
…
<meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
…
</application>
</manifest>
Ensuite, dans strings.xml
, ajoutez l'instruction d'élément suivante, en remplaçant site
par
votre domaine. N'oubliez pas d'inclure les caractères d'échappement.
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://example.com\"
}
}]
</string>
Une fois l'opération terminée, publiez votre application Android mise à jour sur le Play Store.
Décrivez votre application Android sur votre site Web
Ensuite, décrivez votre application Android à votre site Web en
ajouter un fichier manifeste d'application Web à votre page ; Le fichier manifeste doit
incluez la propriété related_applications
, un tableau qui fournit les détails
concernant votre application, y compris platform
et id
.
platform
doit êtreplay
id
est l'ID d'application Google Play de votre application Android.
{
"related_applications": [{
"platform": "play",
"id": "com.android.chrome",
}]
}
Vérifier si votre application est installée
Enfin, appelez navigator.getInstalledRelatedApps()
pour vérifier si votre
L'application Android est installée.
Essayez la démonstration
Vérifier si votre application Windows (UWP) est installée
Votre site Web peut vérifier si votre application Windows (créée à l'aide d'UWP) est installée.
Windows: Chrome 85 ou version ultérieure, Edge 85 ou version ultérieure
Indiquer à votre application Windows l'existence de votre site Web
Vous devez mettre à jour votre application Windows pour définir la relation entre vos sur votre site Web et dans votre application Windows à l'aide de gestionnaires d'URI. Ce garantit que seul votre site web peut vérifier si votre application Windows est installée.
Ajouter l'enregistrement de l'extension Windows.appUriHandler
au fichier manifeste de votre application
fichier Package.appxmanifest
. Par exemple, si l'adresse de votre site Web est
example.com
, vous devez ajouter l'entrée suivante au fichier manifeste de votre application:
<Applications>
<Application Id="App" ... >
...
<Extensions>
<uap3:Extension Category="windows.appUriHandler">
<uap3:AppUriHandler>
<uap3:Host Name="example.com" />
</uap3:AppUriHandler>
</uap3:Extension>
</Extensions>
</Application>
</Applications>
Notez que vous devrez peut-être ajouter l'espace de noms uap3
à votre
<Package>
.
Ensuite, créez un fichier JSON (sans l'extension de fichier .json
) nommé
windows-app-web-link
et indiquez le nom de famille du package de votre application. Lieu
ce fichier à la racine de votre serveur ou dans le répertoire /.well-known/
. Toi
vous pouvez trouver le nom de la famille de packages dans la section "Packaging" du fichier manifeste de l'application
concepteur.
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
Consultez l'article Activer des applications pour les sites Web à l'aide de gestionnaires d'URI d'application. des informations complètes sur la configuration des gestionnaires d'URI.
Présenter votre application Windows à votre site Web
Ensuite, informez votre site web de votre application Windows en
ajouter un fichier manifeste d'application Web à votre page ; Le fichier manifeste doit
inclure la propriété related_applications
, un tableau qui fournit les détails
concernant votre application, y compris platform
et id
.
platform
doit êtrewindows
id
est le nom de famille de package de votre application, ajouté à la suite duId
<Application>
. dans votre fichierPackage.appxmanifest
.
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
Vérifier si votre application est installée
Enfin, appelez navigator.getInstalledRelatedApps()
pour vérifier si votre
L'application Windows est installée.
Vérifier si votre progressive web app est déjà installée (dans le champ d'application)
Votre PWA peut vérifier si elle est déjà installée. Dans ce cas, la page qui effectue la demande doivent appartenir au même domaine et dans le champ d'application de votre PWA, selon le champ d'application indiqué dans le fichier manifeste de l'application Web.
Android: Chrome 84 ou version ultérieure
Présentez-vous à votre PWA
Ajoutez une entrée related_applications
dans votre fichier PWA pour qu'il se présente d'elle-même.
Fichier manifeste d'application Web des PWA.
platform
doit êtrewebapp
url
est le chemin d'accès complet au fichier manifeste d'application Web de votre PWA.
{
…
"scope": "/",
"start_url": "/",
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
…
}
Vérifier si votre PWA est installée
Enfin, appelez navigator.getInstalledRelatedApps()
depuis la
champ d'application de votre PWA pour vérifier si elle est installée. Si
getInstalledRelatedApps()
est appelé en dehors du champ d'application de votre PWA, il
renvoie la valeur "false". Reportez-vous à la section suivante pour plus d'informations.
Essayez la démonstration
Vérifier si votre progressive web app est installée (hors du champ d'application)
Votre site Web peut vérifier si votre PWA est installée, même si la page se trouve en dehors
le champ d'application de votre PWA. Par exemple, une page de destination diffusée depuis
/landing/
peut vérifier si la PWA diffusée depuis /pwa/
est installée, ou si votre
la page de destination est diffusée depuis www.example.com
, et votre PWA est diffusée depuis
app.example.com
Android: Chrome 84 ou version ultérieure
Décrivez votre site Web à votre PWA
Tout d'abord, ajoutez des liens vers des ressources numériques au serveur sur lequel votre PWA est d'où provient la diffusion. Cela vous aidera à définir la relation entre votre site Web et votre PWA, et garantit que seul votre site Web peut vérifier si elle est installée.
Ajoutez un fichier assetlinks.json
au répertoire /.well-known/
.
du domaine où se trouve la PWA, par exemple app.example.com
. Dans le site
, indiquez le chemin d'accès complet au fichier manifeste de l'application Web qui effectuera
la vérification (et non le fichier manifeste d'application Web de votre 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"
}
}
]
Présentez votre PWA à votre site Web
Ensuite, décrivez votre application PWA à votre site Web en
ajouter un fichier manifeste d'application Web à votre page ; Le fichier manifeste doit
incluez la propriété related_applications
, un tableau qui fournit les détails
concernant votre PWA, y compris platform
et url
.
platform
doit êtrewebapp
url
est le chemin d'accès complet au fichier manifeste d'application Web de votre PWA.
{
"related_applications": [{
"platform": "webapp",
"url": "https://app.example.com/manifest.json",
}]
}
Vérifier si votre PWA est installée
Enfin, appelez navigator.getInstalledRelatedApps()
pour vérifier si votre
La PWA est installée.
Essayez la démonstration
Appeler getInstallRelatedApps()
L'appel de navigator.getInstalledRelatedApps()
renvoie une promesse
se résout avec un tableau de vos applications
qui sont installées sur l'appareil de l'utilisateur.
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});
Pour éviter que les sites testent un ensemble trop large de leurs propres applications, seules les trois premières applications déclarées dans le fichier manifeste de l'application Web seront prises en compte.
Comme la plupart des autres API Web performantes, l'API getInstalledRelatedApps()
est
disponibles uniquement lorsqu'elles sont diffusées via HTTPS.
Vous avez d'autres questions ?
Vous avez d'autres questions ? Vérifier la balise getInstalledRelatedApps
sur StackOverflow
pour voir si quelqu'un d'autre a posé des questions similaires. Si ce n'est pas le cas, demandez à votre
question, et n'oubliez pas de lui ajouter le tag
progressive-web-apps
. Notre équipe surveille régulièrement
ce tag et essaie de répondre à vos questions.
Commentaires
Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation différent des spécifications ?
- Signalez un bug sur https://new.crbug.com. Inclure autant d'éléments
détails que possible, fournissez des instructions simples pour reproduire le bug et
saisissez
Mobile>WebAPKs
dans la zone Composants. Glitch est idéal pour partager des répétitions rapidement et facilement.
Apportez votre soutien à l'API
Prévoyez-vous d'utiliser l'API getInstalledRelatedApps()
? Votre contenu public
aide l'équipe Chrome à hiérarchiser les fonctionnalités et
les fournisseurs de navigateurs à quel
point il est essentiel de les prendre en charge.
- Expliquez comment vous prévoyez d'utiliser l'API dans le fil de discussion du discours de WiCG.
- Envoyez un tweet à @ChromiumDev en utilisant le hashtag.
#getInstalledRelatedApps
et n'hésitez pas à nous dire où et comment vous l'utilisez.
Liens utiles
- Explication publique pour l'API
getInstalledRelatedApps()
- Brouillon de la spécification
- Bug de suivi
- Entrée ChromeStatus.com
- Composant Blink:
Mobile>WebAPKs
Merci
Un grand merci à Sunggook Chue de Microsoft pour son aide concernant ces détails pour tester les applications Windows, et Rayan Kanso pour obtenir de l'aide sur Chrome.