Solicitud de instalación

Es posible que los usuarios no estén familiarizados con el proceso de instalación de la AWP. Como desarrollador, entenderás cuándo es el momento adecuado para invitar al usuario a instalar la app. También puedes mejorar los mensajes de instalación predeterminados del navegador. Echemos un vistazo a las herramientas disponibles.

Cómo mejorar 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, cuando usas Chrome en Android, si tu 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 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.

Observa los campos promocionales en acción:

El evento beforeinstallprompt

Los mensajes de instalación del navegador son el primer paso para que los usuarios instalen tu AWP. Para implementar tu propia experiencia de instalación, tu app aún debe cumplir 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. Aquí te indicamos cómo hacerlo:

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

Consulta 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 completar el proceso del navegador para instalar tu app. Lo que hiciste fue retrasar el evento hasta que le brindaras al usuario el contexto adecuado para alentarlo a instalar la AWP.

La captura del evento te da la oportunidad de agregar incentivos y sugerencias para que los usuarios instalen tu app y de elegir solicitar la instalación cuando sabes 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 cumple con los criterios de instalación de AWP.
  • La AWP no se puede instalar en el dispositivo actual por otros motivos (por ejemplo, un dispositivo en modo kiosco o sin permisos).

El mejor lugar para enviar instrucciones

El lugar de respuesta dependerá de tu aplicación y de cuándo los usuarios están más comprometidos con tu contenido y tus servicios. Cuando capturas la beforeinstallprompt, puedes guiar a los usuarios por los motivos para seguir usando tu app y las ventajas que obtendrán si la instalan. Puedes elegir mostrar las sugerencias de instalación en cualquier parte de la app. Algunos patrones comunes son los siguientes: 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. Puede obtener más información al respecto en Patrones para promocionar la instalación de AWP.

Recopilar estadísticas

Usar el análisis 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 es compatible con el beforeinstallprompt o el evento no se activa, no hay otra manera de activar el mensaje de instalación del navegador. Sin embargo, en las plataformas que permiten que los usuarios instalen AWP manualmente, como iOS, puedes mostrarles estas instrucciones.

Solo debes renderizar estas instrucciones en 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 con la renderización de un mensaje de instalación personalizado:

Recursos