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 apps web que incluye lo siguiente:
  • Se entrega a través de HTTPS

Se activará un evento beforeinstallprompt cuando cumplas con estos criterios. Puedes usarlo para pedirle al usuario que instale tu app nativa.

Propiedades obligatorias del manifiesto

Para solicitarle al usuario que instale tu app 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 le solicite al usuario 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 app web.

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. En la que platform es play y id es el ID de tu app de Play Store.

Cómo mostrar el mensaje 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 app nativa se puede instalar con un botón o algún otro elemento que genere un evento de gesto del usuario.
  3. Para mostrar el mensaje, llama a prompt() en el evento beforeinstallprompt guardado.

Escucha beforeinstallprompt

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

Cuando se active el evento beforeinstallprompt, guarda una referencia al evento y actualiza 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 o algún otro elemento a la interfaz de usuario. No muestres un anuncio intersticial de página completa ni otros elementos que puedan ser molestos o distraer.

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

Mostrar la instrucción

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 pedirá al usuario que agregue tu app a la 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 usar la política de seguridad del contenido

Si tu sitio tiene una política de seguridad del contenido restrictiva, asegúrate de agregar *.googleusercontent.com a la directiva img-src para que Chrome pueda descargar el ícono asociado con tu app desde Play Store.

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