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

Pete LePage

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

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

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, 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 être play
• 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.

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 être windows
• id est le nom de famille de package de votre application, ajouté à la suite du Id <Application>. 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 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.

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

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