Invite d'installation d'une application native

L'invite d'installation d'application native vous permet de permettre aux utilisateurs d'installer rapidement et facilement votre application native sur leur appareil directement depuis la plate-forme de téléchargement, sans quitter le navigateur et sans afficher d'interstitiel agaçant.

Quels sont les critères à remplir ?

Pour que l'utilisateur puisse voir l'invite d'installation de l'application native, votre site doit répondre 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 :
  • Diffusée via HTTPS

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

Propriétés du fichier manifeste requises

Pour inviter l'utilisateur à installer votre application native, vous devez ajouter deux propriétés au 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 l'utilisateur à utiliser votre application native plutôt que l'application Web. Si vous ne définissez pas cette valeur, ou false, le navigateur invite l'utilisateur à installer l'application Web à la place.

related_applications est un tableau contenant une liste d'objets qui indiquent au navigateur votre application native préférée. Chaque objet doit inclure une propriété platform et une propriété id. Où platform correspond à play et id à 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. Informez l'utilisateur que votre application native peut être installée avec un bouton ou un autre élément qui générera un événement de geste utilisateur.
  3. Affichez l'invite en appelant prompt() sur l'événement beforeinstallprompt enregistré.

Détecter beforeinstallprompt

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

Lorsque l'événement beforeinstallprompt s'est déclenché, enregistrez une référence à cet événement et mettez à jour votre interface utilisateur pour indiquer qu'il 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;
});

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

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

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é depuis un geste de l'utilisateur. Une boîte de dialogue modale s'affichera pour demander à l'utilisateur d'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() qu'une seule fois sur l'événement différé. Si l'utilisateur le ferme, vous devez attendre que l'événement beforeinstallprompt se déclenche lors de la navigation sur les pages suivantes.

Points à prendre en compte lors de l'utilisation d'une stratégie de sécurité du contenu

Si votre site applique une Content Security Policy 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 détaillé que souhaité. Vous pouvez affiner cette précision en effectuant un débogage à distance sur un appareil Android afin de déterminer l'URL de l'icône d'application.