Permettre l'installation

Pete LePage

Écouter l'événement beforeinstallprompt

Lorsque le navigateur déclenche l'événement beforeinstallprompt, cela indique que l'application Web peut être installée et qu'un bouton d'installation peut être affiché à l'utilisateur. L'événement beforeinstallprompt est déclenché lorsque l'application répond aux critères d'installabilité.

La capture de l'événement permet aux développeurs de personnaliser l'installation et d'inviter l'utilisateur à installer l'application au moment le plus opportun.

  1. Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
  2. Ajoutez un gestionnaire d'événements beforeinstallprompt à l'objet window.
  3. Enregistrez event en tant que variable globale. Nous en aurons besoin plus tard pour afficher l'invite.
  4. Affichez le bouton d'installation.

Code :

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});

Gérer le clic sur le bouton d'installation

Pour afficher l'invite d'installation, appelez prompt() sur l'événement beforeinstallprompt enregistré. L'appel de prompt() s'effectue dans le gestionnaire de clics du bouton d'installation, car prompt() doit être appelé à partir d'un geste de l'utilisateur.

  1. Ajoutez un gestionnaire d'événements de clic pour le bouton d'installation.
  2. Appelez prompt() sur l'événement beforeinstallprompt enregistré.
  3. Enregistrez les résultats de la requête.
  4. Définissez l'événement beforeinstallprompt enregistré sur "null".
  5. Masquez le bouton d'installation.

Code :

butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});

Suivre l'événement d'installation

L'installation d'une application Web à l'aide d'un bouton d'installation n'est qu'une des méthodes d'installation possibles. Ils peuvent également utiliser le menu de Chrome, la mini-barre d'informations et une icône dans l'omnibox. Vous pouvez suivre toutes ces méthodes d'installation en écoutant l'événement appinstalled.

  1. Ajoutez un gestionnaire d'événements appinstalled à l'objet window.
  2. Enregistrez l'événement d'installation dans un outil d'analyse ou un autre mécanisme.

Code :

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

Documentation complémentaire

Félicitations, votre application est désormais installable !

Voici quelques autres actions que vous pouvez effectuer :