Mensaje de instalación de aplicación nativa

El mensaje de instalación de la app nativa te permite permitir que los usuarios instalen tu app nativa en sus dispositivos de forma rápida y fluida directamente desde la tienda de aplicaciones, sin salir del navegador ni mostrar un intersticial molesto.

¿Cuáles son los criterios?

Para mostrarle al usuario el mensaje de instalación de la app nativa, tu sitio debe cumplir con los siguientes criterios:

  • Ni la app web ni la app nativa que se encuentran instaladas actualmente en el dispositivo.
  • Incluye un manifiesto de aplicación web que incluye lo siguiente:
  • Entregado por HTTPS

Se activará un evento beforeinstallprompt cuando cumplas con estos criterios. Tú puede usarlo para pedirle al usuario que instale tu aplicación nativa.

Propiedades obligatorias del manifiesto

Para pedirle al usuario que instale tu aplicación nativa, debes agregar dos propiedades al manifiesto de tu app web, prefer_related_applications y related_applications

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

La propiedad prefer_related_applications le indica al navegador que solicite el usuario con tu app nativa en lugar de la app web. Si no estableces este valor, o false, el navegador le pedirá al usuario que instale la aplicación web en su lugar.

related_applications es un array con una lista de objetos que le informan al navegador sobre tu aplicación nativa preferida. Cada objeto debe incluir una propiedad platform y una propiedad id. Donde el platform es play y id es tu ID de app de Play Store.

Cómo mostrar la solicitud de instalación

Para mostrar el diálogo de instalación, debes hacer lo siguiente:

  1. Escucha el evento beforeinstallprompt.
  2. Notifica al usuario que tu aplicación nativa se puede instalar con un botón u otro que generará un evento de gesto del usuario.
  3. Para mostrar el mensaje, llama a prompt() en el evento beforeinstallprompt guardado.

Escuchar beforeinstallprompt

Si se cumplen los criterios, Chrome activará un evento beforeinstallprompt. Puedes usarlo para indicar que se puede instalar la app y, luego, solicitar que el usuario la instale.

Cuando se active el evento beforeinstallprompt, guarda una referencia al evento. y actualizar la interfaz de usuario para indicar que el usuario puede instalar tu app.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Notifica al usuario que se puede instalar tu app

La mejor manera de notificar al usuario que tu app puede instalarse es agregando un botón. u otro elemento a tu interfaz de usuario. No muestres un anuncio intersticial de página completa. o algún otro elemento que pueda resultar molesto o distraído.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

Cómo mostrar el mensaje

Para mostrar el mensaje de instalación, llama a prompt() en el evento guardado desde un gesto del usuario. Mostrará un diálogo modal en el que se le preguntará al usuario para agregar tu app a su pantalla principal.

Luego, escucha la promesa que muestra la propiedad userChoice. La promesa muestra un objeto con una propiedad outcome después de que se muestra la instrucción y el usuario la responde.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

Solo puedes llamar una vez a prompt() en el evento diferido. Si el usuario lo descarta, deberás esperar hasta que se active el evento beforeinstallprompt en la siguiente navegación de página.

Consideraciones especiales para el uso de la política de seguridad del contenido

Si tu sitio tiene una Política de Seguridad del Contenido restrictiva, haz lo siguiente: asegúrate de agregar *.googleusercontent.com a la directiva img-src para que Chrome puedes descargar el ícono asociado a tu app desde Play Store.

En algunos casos, *.googleusercontent.com puede ser más detallado de lo deseado. Es posible acotar esto mediante la depuración remota de un dispositivo Android para determinar la URL del ícono de la app.