Mensaje de instalación de aplicación nativa

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

¿Cuáles son los criterios?

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

  • Ni la aplicación web ni la aplicación nativa instalada actualmente en el dispositivo
  • Incluye un manifiesto de aplicación web que incluye lo siguiente:
  • Se entrega a través de HTTPS

Cuando cumplas con estos criterios, se activará un evento beforeinstallprompt. 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 la 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 que use tu aplicación nativa en lugar de la aplicación web. Si dejas este valor sin configurar, o false, el navegador le pedirá al usuario que instale la aplicación web.

related_applications es un array con una lista de objetos que le informan al navegador acerca de tu aplicación nativa preferida. Cada objeto debe incluir una propiedad platform y una propiedad id. En el 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. Notificar 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 la indicación, 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 tu app se puede instalar y, luego, pedirle al usuario que la instale.

Cuando se haya activado 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;
});

Notificar al usuario que se puede instalar tu app

La mejor manera de notificar al usuario que se puede instalar tu app es agregando un botón o algún otro elemento a tu interfaz de usuario. No muestres un elemento intersticial de página completa ni otros elementos que puedan ser molestos o distractores.

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 el mensaje

Para mostrar la solicitud de instalación, llama a prompt() en el evento guardado desde un gesto del usuario. Se mostrará un diálogo modal en el que se le solicitará al usuario que agregue tu app a su pantalla principal.

Luego, busca la promesa que muestra la propiedad userChoice. La promesa muestra un objeto con una propiedad outcome después de que se mostró el mensaje y el usuario lo respondió.

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 a prompt() en el evento diferido una vez. Si el usuario lo descarta, deberás esperar hasta que se active el evento beforeinstallprompt en la navegación de la página siguiente.

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, 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 que deseas. Es posible limitar esto mediante la depuración remota de un dispositivo Android para determinar la URL del ícono de la app.