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 pxprefer_related_applications
esttrue
- 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"
}
]
prefer_related_applications
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
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:
- Écoutez l'événement
beforeinstallprompt
. - 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.
- Affichez l'invite en appelant
prompt()
sur lebeforeinstallprompt
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.