Invite d'installation d'une application native

L'invite d'installation de l'application native permet aux utilisateurs installer facilement votre application native sur leur appareil, directement depuis la plate-forme de téléchargement d'applications ; sans quitter le navigateur ni afficher d'interstitiels gênants.

Quels sont les critères d'éligibilité ?

Pour afficher l'invite d'installation de l'application native, votre site doit répondent aux critères suivants:

  • Ni l'application Web, ni l'application native actuellement installées sur l'appareil
  • Inclut un fichier manifeste d'application Web qui inclut les éléments suivants :
    • short_name
    • name (utilisée dans l'invite de bannière)
    • icons, y compris une version 192 x 192 px et une version 512 x 512 px
    • prefer_related_applications est true
    • Objet related_applications contenant des informations sur l'application
  • Diffusion via HTTPS

Un événement beforeinstallprompt se déclenchera lorsque vous répondrez à ces critères. Vous pouvez l'utiliser pour inviter l'utilisateur à installer votre application native.

Propriétés de fichier manifeste obligatoires

Pour inviter l'utilisateur à installer votre application native, vous devez ajouter deux propriétés dans le fichier manifeste de votre application Web, prefer_related_applications et related_applications

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

La propriété prefer_related_applications indique au navigateur d'inviter le vers votre application native plutôt que vers l'application Web. Si vous ne définissez pas cette valeur, ou false, le navigateur invitera l'utilisateur à installer l'application Web.

related_applications est un tableau avec une liste d'objets qui indiquent au sur l'application native de votre choix. Chaque objet doit inclure une propriété platform et une propriété id. où platform est play et id est votre ID d'application Play Store.

Afficher l'invite d'installation

Pour afficher la boîte de dialogue d'installation, procédez comme suit:

  1. Écoutez l'événement beforeinstallprompt.
  2. Indiquez à l'utilisateur que votre application native peut être installée avec un bouton ou une autre qui va générer un événement de type geste de l'utilisateur.
  3. Affichez l'invite en appelant prompt() sur le beforeinstallprompt enregistré .

Écouter beforeinstallprompt

Si les critères sont remplis, Chrome déclenche une beforeinstallprompt . Vous pouvez l'utiliser pour indiquer que votre application peut être installée, puis pour inviter à l'utilisateur de l'installer.

Lorsque l'événement beforeinstallprompt se déclenche, enregistrez une référence à l'événement et mettez à jour votre interface utilisateur pour indiquer que l'utilisateur peut installer votre application.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Informer l'utilisateur que votre application peut être installée

Le meilleur moyen d'avertir l'utilisateur que votre application peut être installée consiste à ajouter un bouton ou un autre élément à votre interface utilisateur. N'affichez pas d'interstitiel en pleine page ni d'autres éléments susceptibles d'être gênants ou distrayants.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

Afficher l'invite

Pour afficher l'invite d'installation, appelez prompt() sur l'événement enregistré à partir d'un geste utilisateur. Il affiche une boîte de dialogue modale, demandant à l'utilisateur pour ajouter votre application à son écran d'accueil.

Ensuite, écoutez la promesse renvoyée par la propriété userChoice. La promesse renvoie un objet avec une propriété outcome une fois que l'invite s'est affichée et que l'utilisateur y a répondu.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

Vous ne pouvez appeler prompt() sur l'événement différé qu'une seule fois. Si l'utilisateur la ferme, vous devrez attendre que l'événement beforeinstallprompt se déclenche lors de la navigation vers la page suivante.

Points à prendre en compte lorsque vous utilisez une règle de sécurité du contenu

Si votre site dispose d'une politique de sécurité des contenus restrictive, veillez à ajouter *.googleusercontent.com à la directive img-src afin que Chrome puisse télécharger l'icône associée à votre application depuis le Play Store.

Dans certains cas, *.googleusercontent.com peut être plus verbeux que souhaité. Il est Possibilité de procéder à un débogage à distance un appareil Android pour déterminer l'URL de l'icône de l'application.