Votre application est-elle installée ? La méthode get prochaineApps() vous indique !

La méthode getInstalledRelatedApps() permet à votre site Web de vérifier si votre application Android/UWP ou votre PWA est installée sur l'appareil d'un utilisateur.

Pete LePage

Alexey Rodionov

Qu'est-ce que l'API getInstalledRelatedApps() ?

La méthode getInstalledRelatedApps() renvoie la liste des applications associées installées.

L'appel à navigator.getInstalledRelatedApps() renvoie une promesse qui se résout avec un tableau d'applications associées installées sur l'appareil de l'utilisateur.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Elle permet à votre page de vérifier si votre application Android, votre application Universal Windows Platform (UWP) ou votre progressive web app (PWA) est déjà installée sur l'appareil d'un utilisateur, et vous permet de personnaliser l'expérience utilisateur si c'est le cas.

Par exemple, si votre application est déjà installée :

• Rediriger l'utilisateur d'une page marketing produit directement vers votre application.
• Centraliser certaines fonctionnalités, comme les notifications, dans l'autre application pour éviter les notifications en double.
• Ne faites pas la promotion de l'installation de votre PWA si votre autre application est déjà installée.

Types d'applications compatibles que vous pouvez vérifier

Vérifier si votre application Android est installée

Votre site Web peut vérifier si votre application Android est installée.

Indiquer à votre application Android l'existence de votre site Web

Vous devez d'abord 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. Cela permet de vérifier que seul votre site Web peut vérifier si votre application Android est installée.

Dans le AndroidManifest.xml de votre application Android, ajoutez une entrée asset_statements :

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

Ensuite, dans strings.xml, ajoutez la déclaration d'asset suivante, en remplaçant site par votre domaine. Veillez à 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, installez l'application mise à jour sur l'appareil ou publiez-la sur le Google Play Store ou sur l'une des autres plates-formes de distribution d'applications Android.

Indiquer à votre site Web l'existence de votre application Android

Ensuite, informez votre site Web de l'existence de votre application Android en ajoutant un fichier manifeste d'application Web à votre page. Le fichier manifeste doit inclure la propriété related_applications, un tableau qui fournit des informations sur votre application, y compris platform et id.

• platform doit être play
• id est l'ID du package Android.

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

Vérifier si votre application est installée

Enfin, appelez la fonction asynchrone navigator.getInstalledRelatedApps() pour vérifier si votre application Android est installée.

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.

Indiquer à votre application Windows des informations sur votre site Web

Vous devrez mettre à jour votre application Windows pour définir la relation entre votre site Web et votre application Windows à l'aide des gestionnaires d'URI. Cela permet de vérifier que seul votre site Web peut vérifier si votre application Windows est installée.

Ajoutez l'enregistrement de l'extension Windows.appUriHandler au fichier manifeste Package.appxmanifest de votre application. Par exemple, si l'adresse de votre site Web est example.com, vous devez ajouter l'entrée suivante dans le 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 attribut <Package>.

Créez ensuite 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. Placez ce fichier à la racine de votre serveur ou dans le répertoire /.well-known/. Vous trouverez le nom de famille du package dans la section "Packaging" (Packaging) du concepteur de fichier manifeste de l'application.

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

Consultez cette démonstration.

Pour en savoir plus sur la configuration des gestionnaires d'URI, consultez Activer les applications pour les sites Web à l'aide des gestionnaires d'URI d'application.

Indiquer à votre site Web l'existence de votre application Windows

Ensuite, informez votre site Web de l'existence de votre application Windows en ajoutant un fichier manifeste d'application Web à votre page. Le fichier manifeste doit inclure la propriété related_applications, un tableau qui fournit des informations sur votre application, y compris platform et id.

• platform doit être windows
• id correspond au nom de famille du package de votre application, auquel est ajoutée la valeur Id de <Application> dans votre fichier Package.appxmanifest.

{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App"
  }]
}

Vérifier si votre application est installée

Enfin, appelez la fonction asynchrone navigator.getInstalledRelatedApps() pour vérifier si votre application Windows est installée.

Vérifier si votre application Web progressive 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 requête doit se trouver sur le même domaine et dans le champ d'application de votre PWA, tel que défini par le champ d'application dans le fichier manifeste de l'application Web.

Parlez à votre PWA d'elle-même

Indiquez à votre PWA des informations sur elle-même en ajoutant une entrée related_applications dans le fichier manifeste de l'application Web de votre PWA.

• platform doit être webapp
• url est le chemin d'accès (qui peut être relatif) au fichier manifeste de l'application Web de votre PWA.
• id correspond au chemin d'accès complet à l'application Web (obligatoire pour ordinateur, non requis pour Android).

{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com"
  }],
  …
}

Vérifier si votre PWA est installée

Enfin, appelez la fonction asynchrone navigator.getInstalledRelatedApps() depuis la portée 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 renverra []. Reportez-vous à la section suivante pour plus d'informations.

Vérifier si votre progressive web app est installée (hors champ d'application)

Votre site Web peut vérifier si votre PWA est installée, même si la page se trouve en dehors du 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 page de destination est diffusée depuis www.example.com et votre PWA depuis app.example.com.

Indiquer à votre PWA l'adresse de votre site Web

Vous devez d'abord ajouter des liens d'éléments numériques au serveur à partir duquel votre PWA est diffusée. Cela permet de définir la relation entre votre site Web et votre PWA, et de vérifier que seul votre site Web peut vérifier si votre PWA est installée.

Ajoutez un fichier assetlinks.json au répertoire /.well-known/ du domaine où réside la PWA, par exemple app.example.com. Dans la propriété 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 de l'application Web progressive).

// 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"
    }
  }
]

Indiquer à votre site Web que vous avez une PWA

Ensuite, informez votre site Web de votre application PWA en ajoutant un fichier manifeste d'application Web à votre page. Le fichier manifeste doit inclure la propriété related_applications, un tableau qui fournit des informations sur votre PWA, y compris platform et url.

• platform doit être webapp
• url correspond au chemin d'accès complet au fichier manifeste de l'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 la fonction asynchrone navigator.getInstalledRelatedApps() pour vérifier si votre PWA est installée.

Vous avez d'autres questions ?

Vous avez d'autres questions ? Consultez le tag getInstalledRelatedApps sur StackOverflow pour voir si d'autres utilisateurs ont posé des questions similaires. Si ce n'est pas le cas, posez votre question et assurez-vous d'y ajouter le tag progressive-web-apps. Notre équipe surveille régulièrement ce tag et s'efforce de répondre à vos questions.

Commentaires

Avez-vous trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ?

• Signalez le bug sur https://new.crbug.com. Incluez autant de détails que possible, fournissez des instructions pour reproduire le bug et saisissez Mobile>WebAPKs dans la zone Composants.

Soutenir l'API

Comptez-vous utiliser l'API getInstalledRelatedApps() ? Votre soutien public aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres 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 WICG Discourse.
• Envoyez un tweet à @ChromiumDev avec le hashtag #getInstalledRelatedApps pour nous indiquer où et comment vous l'utilisez.

Liens utiles

• Explication publique de l'API getInstalledRelatedApps()
• Brouillon de spécification
• Bug de suivi
• Entrée ChromeStatus.com
• Composant Blink : Mobile>WebAPKs

Merci

Merci tout particulièrement à Sunggook Chue de Microsoft pour son aide concernant les détails des tests des applications Windows, et à Rayan Kanso pour son aide concernant les détails de Chrome.