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 iOS/Android/de bureau ou votre PWA est installée sur l'appareil d'un utilisateur.

Pete LePage

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

getInstalledRelatedApps() permet à votre page de vérifier si votre application mobile ou de bureau, ou, dans certains cas, si 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 depuis une page de marketing produit directement vers votre application
• Centraliser certaines fonctionnalités telles que les notifications dans l'autre application 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 décrire votre site à votre application, puis lui présenter votre application. Une fois que vous avez défini la relation entre les deux, vous pouvez vérifier si l'application est 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.

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, seul votre site Web peut vérifier si votre application Android est installée.

Dans le fichier 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 l'instruction d'élément 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, publiez votre application Android mise à jour sur le Play Store.

Présenter votre application Android sur votre site Web

Ensuite, informez votre site Web 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 correspond à 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 application Android est installée.

Essayez la démo

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'un UWP) est installée.

Indiquer à votre application Windows votre site Web

Vous devez mettre à jour votre application Windows pour définir la relation entre votre site Web et votre application Windows à l'aide de gestionnaires d'URI. Ainsi, 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 fournissez le nom de famille de package de votre application. Placez ce fichier à la racine de votre serveur ou dans le répertoire /.well-known/. Vous trouverez le nom de la famille de packages dans la section "Packaging" du concepteur de fichier manifeste d'application.

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

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

Annoncer votre application Windows sur votre site Web

Ensuite, présentez votre application Windows à votre site Web 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 est le nom de famille de packages de votre application, suivi de la valeur Id <Application> dans le fichier Package.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 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 envoie la requête doit se trouver dans 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.

Présentez-vous à votre PWA

Informez votre PWA d'elle-même en ajoutant une entrée related_applications à son fichier manifeste d'application Web.

• platform doit être webapp
• 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() dans le champ d'application de votre PWA pour vérifier s'il est installé. 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.

Essayer la démonstration

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 n'entre pas dans le champ d'application de votre PWA. Par exemple, une page de destination diffusée à partir de /landing/ peut vérifier si la PWA diffusée à partir de /pwa/ est installée, ou si votre page de destination est diffusée à partir de www.example.com et votre PWA à partir de app.example.com.

Indiquer à votre PWA des informations sur votre site Web

Tout d'abord, vous devez ajouter des liens vers des é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 garantit 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ù se trouve 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 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ésenter votre PWA sur votre site Web

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 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 PWA est installée.

Essayez la démo

Appel de getInstalledRelatedApps()

L'appel de navigator.getInstalledRelatedApps() renvoie une promesse qui se résout avec un tableau de vos applications 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 ne 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 puissantes, l'API getInstalledRelatedApps() n'est disponible que lorsqu'elle est diffusée via HTTPS.

Vous avez d'autres questions ?

Vous avez d'autres questions ? Consultez la balise getInstalledRelatedApps sur StackOverflow pour voir si d'autres utilisateurs ont posé des questions similaires. Si ce n'est pas le cas, posez-y votre question et veillez à l'étiqueter avec le tag progressive-web-apps. Notre équipe surveille régulièrement cette balise et essaie 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 des spécifications ?

• Signalez un bug sur la page https://new.crbug.com. Incluez autant de détails que possible, fournissez des instructions simples pour reproduire le bug, puis saisissez Mobile>WebAPKs dans la zone Composants. Glitch est idéal pour partager des reproductions rapides et faciles.

Afficher la compatibilité avec l'API

Comptez-vous utiliser l'API getInstalledRelatedApps() ? Votre assistance publique 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.

• Indiquez comment vous prévoyez d'utiliser l'API dans le fil de discussion Discourse de la W3C.
• Envoyez un tweet à @ChromiumDev en utilisant le hashtag #getInstalledRelatedApps et indiquez-nous où et comment vous l'utilisez.

Liens utiles

• Explication publique de l'API getInstalledRelatedApps()
• Brouillon de spécifications
• Bug de suivi
• Enregistrement sur ChromeStatus.com
• Composant clignotement : Mobile>WebAPKs

Merci

Nous remercions 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 Chrome.