L'invite d'installation d'une 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 d'applications, sans quitter le navigateur et sans afficher d'annonce interstitielle ennuyeuse.
Quels sont les critères ?
Pour que l'invite d'installation de l'application native s'affiche auprès de l'utilisateur, votre site doit remplir les 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_namename(utilisée dans l'invite de bannière)icons, y compris une version de 192 pixels et une version de 512 pixelsprefer_related_applicationsesttrue- Objet
related_applicationscontenant des informations sur l'application
- Diffusion via HTTPS
Un événement beforeinstallprompt se déclenchera lorsque vous remplirez 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 à votre fichier manifeste d'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 l'utilisateur à utiliser votre application native plutôt que l'application Web. Si vous ne définissez pas cette valeur ou si vous définissez la valeur false, le navigateur invite l'utilisateur à installer l'application Web à la place.
related_applications
related_applications est un tableau contenant une liste d'objets qui informent le navigateur de votre application native préférée. 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, vous devez:
- Écoutez l'événement
beforeinstallprompt. - Informez l'utilisateur que votre application native peut être installée à l'aide d'un bouton ou d'un autre élément qui générera un événement de geste utilisateur.
- Affichez l'invite en appelant
prompt()sur l'événementbeforeinstallpromptenregistré.
Écouter 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 à 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 d'une page entière ni d'autres éléments susceptibles d'être ennuyeux 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é à partir d'un geste utilisateur. Une boîte de dialogue modale s'affiche, demandant à 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() 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.
Informations spécifiques à prendre en compte lors de l'utilisation de Content Security Policy
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 détaillé que souhaité. Vous pouvez affiner cette information en effectuant un débogage à distance sur un appareil Android pour déterminer l'URL de l'icône de l'application.