Invite d'installation

Les utilisateurs ne sont peut-être pas familiarisés avec le processus d'installation des PWA. En tant que développeur, vous saurez quand inviter l'utilisateur à installer l'application. Vous pouvez également améliorer les invites d'installation du navigateur par défaut. Examinons les outils disponibles.

Améliorer la boîte de dialogue d'installation

Les navigateurs fournissent des invites d'installation par défaut lorsque les PWA répondent aux critères d'installation. Le navigateur utilise les propriétés name et icons de votre fichier manifeste d'application Web pour créer l'invite.

Invite d'installation de Microsoft Edge.

Certains navigateurs améliorent l'expérience d'invite à l'installation à l'aide des champs promotionnels du fichier manifeste, y compris description, categories et screenshots. Par exemple, si votre PWA fournit des valeurs pour les champs description et screenshots lorsque vous utilisez Chrome sur Android, la boîte de dialogue d'installation passe d'une petite barre d'informations Ajouter à l'écran d'accueil à une boîte de dialogue plus grande et plus détaillée, semblable aux invites d'installation d'un app store.

L'événement beforeinstallprompt

Les invites d'installation du navigateur sont la première étape pour inciter les utilisateurs à installer votre PWA. Pour implémenter votre propre expérience d'installation, votre application doit toujours respecter les critères d'installation : lorsque le navigateur détecte que votre application peut être installée, il déclenche l'événement beforeinstallprompt. Vous devez implémenter ce gestionnaire d'événements pour personnaliser l'expérience utilisateur. Voici comment procéder :

  1. Écoutez l'événement beforeinstallprompt.
  2. Enregistrez-le (vous en aurez besoin plus tard).
  3. Déclenchez-le depuis votre UI.

Consultez le code ci-dessous pour obtenir un exemple d'écouteur d'événement pour l'événement beforeinstallprompt, sa capture et son utilisation personnalisée ultérieure.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

Ensuite, si l'utilisateur clique sur votre bouton d'installation personnalisé, utilisez l'objet deferredPrompt précédemment enregistré et appelez sa méthode prompt(), car l'utilisateur doit toujours passer par le processus du navigateur pour installer votre application. Vous avez simplement retardé l'événement jusqu'à ce que vous donniez à l'utilisateur le bon contexte pour l'encourager à installer la PWA.

En capturant l'événement, vous avez la possibilité d'ajouter des indices et des incitations pour que vos utilisateurs installent votre application, et de choisir d'inviter à l'installation lorsque vous savez que les utilisateurs sont plus engagés.

L'événement ne se déclenchera pas si :

  • L'utilisateur a déjà installé la PWA actuelle (valable uniquement pour les WebAPK sur ordinateur et Android).
  • L'application ne répond pas aux critères d'installation des PWA.
  • La PWA ne peut pas être installée sur l'appareil actuel pour d'autres raisons (par exemple, un appareil en mode kiosque ou sans autorisation).

Où saisir vos requêtes

L'emplacement de l'invite dépend de votre application et du moment où vos utilisateurs sont le plus engagés avec vos contenus et services. Lorsque vous captez l'beforeinstallprompt, vous pouvez expliquer aux utilisateurs pourquoi ils devraient continuer à utiliser votre application et les avantages qu'ils en tireront en l'installant. Vous pouvez choisir d'afficher des suggestions d'installation n'importe où dans votre application. Voici quelques exemples courants : dans le menu latéral, après un parcours utilisateur essentiel tel que la finalisation d'une commande ou après une page d'inscription. Pour en savoir plus, consultez Modèles pour promouvoir l'installation des PWA.

Collecte des données analytiques

Les données analytiques vous aideront à mieux comprendre où et quand présenter vos invites. Vous pouvez utiliser la propriété userChoice de l'événement beforeinstallprompt. userChoice est une promesse qui sera résolue avec l'action effectuée par l'utilisateur.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

Action de remplacement

Si le navigateur n'est pas compatible avec beforeinstallprompt ou si l'événement ne se déclenche pas, il n'existe aucune autre méthode pour déclencher l'invite d'installation du navigateur. Toutefois, sur les plates-formes qui permettent à l'utilisateur d'installer manuellement des PWA, comme iOS, vous pouvez afficher ces instructions à l'utilisateur.

Vous ne devez afficher ces instructions qu'en mode navigateur. Les autres options d'affichage, telles que standalone ou fullscreen, signifient que l'utilisateur a déjà installé l'application.

Pour afficher l'élément uniquement en mode navigateur, utilisez la requête média display-mode :

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Atelier de programmation

Bibliothèques

Consultez ces bibliothèques pour obtenir de l'aide concernant l'affichage d'une invite d'installation personnalisée :

Ressources