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 de l'utilisateur.

Pete LePage

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

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. Si c'est le cas, vous pouvez personnaliser l'expérience utilisateur.

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

• Rediriger les utilisateurs d'une page de marketing de 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 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.

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. 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>

Lorsque vous avez terminé, 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 ajoutant 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 de votre application, y compris platform et id.

• platform doit être play
• id est l'ID 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é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 de la technologie UWP) est installée.

Indiquer à votre application Windows l'existence de 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 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 à l'attribut <Package>.

Créez ensuite un fichier JSON (sans l'extension de fichier .json) nommé windows-app-web-link et indiquez le nom de la famille de packages 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" (Package) du concepteur du fichier manifeste d'application.

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

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

Décrire votre application Windows à votre site Web

Ensuite, décrivez 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 les détails de votre application, y compris platform et id.

• platform doit être windows
• id est le nom de famille du package de votre application, ajouté par la valeur <Application> Id dans votre 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 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 à l'origine de 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.

Présentez-vous à votre PWA

Donnez des informations sur votre PWA en ajoutant une entrée related_applications dans le fichier manifeste d'application Web de votre PWA.

• 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() depuis le 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, la valeur "false" est renvoyée. 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 situe en dehors du 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 depuis /pwa/ est installée, ou si elle est diffusée depuis www.example.com et si votre PWA est diffusée depuis app.example.com.

Décrivez votre site Web à votre PWA

Tout d'abord, vous devez ajouter des liens vers des ressources numériques au serveur à partir duquel votre PWA est diffusée. Cela vous aidera à définir la relation entre votre site Web et votre PWA, et vous garantira que seul votre site Web pourra 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 au 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"
    }
  }
]

Décrivez votre PWA sur votre site Web

Ensuite, décrivez votre application PWA à 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 les détails de 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émonstration

Appeler la méthode getInstallRelatedApps()

Appeler 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 empêcher les sites de tester un trop grand nombre 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 personnes ont posé des questions similaires. Si ce n'est pas le cas, posez votre question ici, en la taguant avec la balise progressive-web-apps. Notre équipe surveille fréquemment ce tag et s'efforce de répondre à vos questions.

Commentaires

Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente des spécifications ?

• Signalez le bug à l'adresse https://new.crbug.com. Fournissez 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 sur le WICG Discourse.
• Envoyez un tweet à @ChromiumDev avec le hashtag #getInstalledRelatedApps, et indiquez-nous où et comment vous l'utilisez.

Liens utiles

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

Merci

Un grand merci à Sunggook Chue de Microsoft pour l'aide que nous avons apportée aux tests des applications Windows, et à Rayan Kanso pour son aide concernant Chrome.