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 à quel moment inviter l'utilisateur à installer l'application. Vous pouvez également améliorer les invites d'installation par défaut du navigateur. Voyons les outils à votre disposition.

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

Lorsque les PWA répondent aux critères d'installation, les navigateurs fournissent des invites d'installation par défaut. 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'installation de l'invite à l'aide des champs promotionnels dans le fichier manifeste, y compris description, categories et screenshots. Par exemple, dans Chrome sur Android, si votre PWA fournit des valeurs pour les champs description et screenshots, la boîte de dialogue d'installation passera 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 provenant d'une plate-forme de téléchargement d'applications.

Découvrez comment fonctionnent les champs promotionnels:

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 répondre aux 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 l'deferredPrompt précédemment enregistrée 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.

L'enregistrement de l'événement vous permet d'ajouter des indications et des avantages aux utilisateurs pour les inciter à installer votre application. Vous pouvez également choisir de les inviter à l'installation lorsque vous savez qu'ils sont plus engagé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 les ordinateurs de bureau et WebAPK sur 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 (appareil en mode Kiosque ou sans autorisations, par exemple).

Le meilleur endroit pour générer des requêtes

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 l'beforeinstallprompt, vous pouvez expliquer aux utilisateurs pourquoi ils doivent continuer à utiliser votre application et les avantages dont ils bénéficieront en l'installant. Vous pouvez choisir d'afficher des conseils d'installation n'importe où dans votre application. Voici quelques modèles courants: dans le menu latéral, après un parcours utilisateur critique comme une commande, ou après une page d'inscription. Pour en savoir plus, consultez Modèles pour promouvoir l'installation de PWA.

Collecter des données analytiques

L'utilisation des données analytiques vous aidera à mieux comprendre où et quand présenter vos invites. Vous pouvez utiliser la propriété userChoice à partir 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 suivant dans un navigateur Chromium (ordinateur ou Android).

Action de remplacement

Si le navigateur n'est pas compatible avec beforeinstallprompt ou si l'événement ne se déclenche pas, il n'y a 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 lui présenter ces instructions.

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