Solicitud de instalación

Es posible que los usuarios no estén familiarizados con el proceso de instalación de la AWP. Como desarrollador, comprenderás cuándo es el momento adecuado para invitar al usuario a instalar la aplicación. También se pueden mejorar las solicitudes de instalación predeterminadas del navegador. Veamos las herramientas disponibles.

Mejora el diálogo de instalación

Los navegadores proporcionan mensajes de instalación predeterminados cuando las AWP pasan los criterios de instalación. El navegador usa las propiedades name y icons del manifiesto de apps web para compilar la instrucción.

Mensaje de instalación de Microsoft Edge.

Algunos navegadores mejoran la experiencia de solicitud de instalación mediante los campos promocionales del manifiesto, incluidos description, categories y screenshots. Por ejemplo, con Chrome en Android, si la AWP proporciona valores para los campos description y screenshots, la experiencia del diálogo de instalación se transforma de una pequeña barra de información en la sección Agregar a la pantalla principal a un diálogo más grande y detallado, similar a las solicitudes de instalación de una tienda de aplicaciones.

Descubre cómo funcionan los campos promocionales:

El evento beforeinstallprompt

Las solicitudes de instalación del navegador son el primer paso para lograr que los usuarios instalen tu AWP. Para implementar tu propia experiencia de instalación, tu app debe cumplir con los criterios de instalación: cuando el navegador detecta que se puede instalar, activa el evento beforeinstallprompt. Debes implementar este controlador de eventos para personalizar la experiencia del usuario. A continuación, le indicamos cómo hacerlo:

  1. Escucha el evento beforeinstallprompt.
  2. Guárdalo (lo necesitarás más adelante).
  3. Actívalo desde tu IU.

Revisa el siguiente código para ver un ejemplo de un objeto de escucha de eventos para el evento beforeinstallprompt, su captura y su uso personalizado posterior.

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

Luego, si el usuario hace clic en el botón de instalación personalizado, usa el deferredPrompt que se guardó anteriormente y llama a su método prompt(), ya que el usuario aún debe realizar el proceso del navegador para instalar tu app. Lo que hiciste fue retrasar el evento hasta que le diste al usuario el contexto adecuado para alentarlo a instalar la AWP.

Capturar el evento te da la oportunidad de agregar sugerencias e incentivos para que los usuarios instalen tu app, y de elegir solicitar la instalación cuando sepas que los usuarios están más comprometidos.

El evento no se activará en los siguientes casos:

  • El usuario ya instaló la AWP actual (válida solo para computadoras y WebAPK en Android).
  • La app no pasa los criterios de instalación de AWP.
  • No se puede instalar la AWP en el dispositivo actual por otros motivos (por ejemplo, un dispositivo en modo kiosco o sin permisos).

El mejor lugar para enviar instrucciones

La ubicación de estas instrucciones dependerá de tu aplicación y del momento en que los usuarios se involucren más con tu contenido y tus servicios. Cuando capturas la beforeinstallprompt, puedes guiar a los usuarios a través de los motivos para seguir usando tu app y las ventajas que obtendrán de instalarla. Puedes elegir que se muestren sugerencias de instalación en cualquier parte de la app. Algunos patrones comunes son: en el menú lateral, después de un recorrido crítico para el usuario, como completar un pedido, o después de una página de registro. Obtén más información al respecto en Patrones para promover la instalación de AWP.

Recopila estadísticas

Usar las estadísticas te ayudará a comprender mejor dónde y cuándo presentar tus instrucciones. Puedes usar la propiedad userChoice del evento beforeinstallprompt. userChoice es una promesa que se resolverá con la acción que realizó el usuario.

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

Observa cómo funciona

Prueba el siguiente ejemplo en acción en un navegador Chromium (computadora de escritorio o Android).

Resguardo

Si el navegador no admite beforeinstallprompt o no se activa el evento, no hay otra manera de activar el mensaje de instalación del navegador. Sin embargo, en las plataformas que permiten al usuario instalar AWP de forma manual, como iOS, puedes mostrarle estas instrucciones.

Solo debes renderizar estas instrucciones en el modo de navegador. otras opciones de visualización, como standalone o fullscreen, significan que el usuario ya instaló la app.

Para renderizar el elemento solo en el modo de navegador, usa la consulta de medios display-mode:

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

Codelab

Bibliotecas

Consulta estas bibliotecas para obtener ayuda sobre cómo renderizar un mensaje de instalación personalizado:

Recursos