Permitir la instalación

Pete LePage

Este error contiene el manifiesto web con los campos obligatorios para que una app web sea instalable.

También tiene un botón de instalación que está oculto de forma predeterminada.

Detecta el evento beforeinstallprompt

Cuando el navegador activa el evento beforeinstallprompt, es la indicación de que se puede instalar la app web y se puede mostrar un botón de instalación al usuario. El evento beforeinstallprompt se activa cuando la app cumple con los criterios de instalabilidad.

Capturar el evento permite a los desarrolladores personalizar la instalación y solicitarle al usuario que la realice cuando consideren que es el mejor momento.

  1. Haz clic en Remix to Edit para que el proyecto sea editable.
  2. Agrega un controlador de eventos beforeinstallprompt al objeto window.
  3. Guarda event como una variable global. La necesitaremos más adelante para mostrar el mensaje.
  4. Muestra el botón de instalación.

Código:

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);
});

Controla el clic en el botón de instalación

Para mostrar el mensaje de instalación, llama a prompt() en el evento beforeinstallprompt guardado. La llamada a prompt() se realiza en el controlador de clics del botón de instalación porque se debe llamar a prompt() desde un gesto del usuario.

  1. Agrega un controlador de eventos de clic para el botón de instalación.
  2. Llama a prompt() en el evento beforeinstallprompt guardado.
  3. Registra los resultados de la instrucción.
  4. Establece el evento beforeinstallprompt guardado como nulo.
  5. Oculta el botón de instalación.

Código:

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);
});

Realiza un seguimiento del evento de instalación

Instalar una app web a través de un botón de instalación es solo una de las formas en que los usuarios pueden instalarla. También pueden usar el menú de Chrome, la minibarra de información y un ícono en el cuadro multifunción. Puedes hacer un seguimiento de todas estas formas de instalación si escuchas el evento appinstalled.

  1. Agrega un controlador de eventos appinstalled al objeto window.
  2. Registra el evento de instalación en Analytics o en otro mecanismo.

Código:

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

Lecturas adicionales

¡Felicitaciones! Ahora puedes instalar tu app.

Estas son algunas acciones adicionales que puedes realizar: