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:
short_name
name
(se usa en el mensaje del banner)icons
, incluida una versión de 192 px y otra de 512 pxprefer_related_applications
estrue
- Objeto
related_applications
con información sobre la app
- 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"
}
]
prefer_related_applications
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
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:
- Escucha el evento
beforeinstallprompt
. - 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
- Para mostrar la indicación, llama a
prompt()
en el eventobeforeinstallprompt
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.