Invite d'installation

Les utilisateurs ne connaissent peut-être pas le processus d'installation d'une PWA. En tant que développeur, vous saurez à quel moment inviter l'utilisateur à installer l'application. Les invites d'installation par défaut du navigateur peuvent également être améliorées. Découvrons les outils disponibles.

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

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

Invite d'installation de Microsoft Edge.

Certains navigateurs améliorent l'expérience d'invite d'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 dans Chrome sous 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'une plate-forme de téléchargement d'applications.

Découvrez comment fonctionnent les champs promotionnels:

Événement beforeinstallprompt

Les invites d'installation du navigateur constituent 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-la (vous en aurez besoin plus tard).
  3. Déclenchez-la depuis votre interface utilisateur.

Consultez le code ci-dessous pour obtenir un exemple d'écouteur d'événements 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 le deferredPrompt précédemment enregistré et appelez sa méthode prompt(), car l'utilisateur doit encore suivre le processus du navigateur pour installer votre application. Vous avez retardé l'événement jusqu'à ce que vous donniez à l'utilisateur le contexte approprié pour l'encourager à installer la PWA.

Capturer l'événement vous permet d'ajouter des conseils et des incitations à vos utilisateurs pour les inciter à installer votre application, et de choisir de les inviter à installer lorsque vous savez que les utilisateurs sont plus intéressés.

L'événement ne se déclenche pas dans les cas suivants:

  • L'utilisateur a déjà installé la PWA actuelle (valide uniquement pour ordinateur et WebAPK sur Android).
  • L'application ne répond pas aux critères d'installation de la 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 autorisations).

Le meilleur endroit pour demander

L'emplacement de l'invite dépend de votre application et du moment où les utilisateurs interagissent le plus avec votre contenu et vos services. Lorsque vous capturez le beforeinstallprompt, vous pouvez expliquer aux utilisateurs les raisons de continuer à utiliser votre application et les avantages qu'ils peuvent en retirer. Vous pouvez choisir d'afficher les conseils d'installation n'importe où dans votre application. Voici quelques tendances courantes: dans le menu latéral, après un parcours utilisateur critique tel que la finalisation d'une commande, ou après une page d'inscription. Pour en savoir plus, consultez l'article Modèles de promotion de l'installation d'une PWA.

Collecte des données analytiques...

Les analyses 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 se résout 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');
  }
});

Démonstration

Essayez l'exemple ci-dessous dans un navigateur Chromium (ordinateur ou Android).

Action de remplacement

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

Ces instructions ne doivent s'afficher qu'en mode navigateur. d'autres options d'affichage, comme standalone ou fullscreen, signifient que l'utilisateur a déjà installé l'application.

Pour n'afficher l'élément qu'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