Desde que lanzamos el banner para agregar a la pantalla principal por primera vez, trabajamos para etiquetar las apps web progresivas con mayor claridad y simplificar la forma en que los usuarios pueden instalarlas. Nuestro objetivo final es proporcionar un botón de instalación en el cuadro multifunción en todas las plataformas y, en Chrome 68, realizaremos cambios para lograr ese objetivo.
¿Qué cambios implementaremos?
A partir de Chrome 68 en Android (estable en julio de 2018), Chrome ya no mostrará el banner Agregar a la pantalla principal. Si el sitio cumple con los criterios para agregar a la pantalla principal, Chrome mostrará la minibarra de información. Luego, si el usuario hace clic en la minibarra de información o si llamas a prompt() en el evento beforeinstallprompt desde un gesto del usuario, Chrome mostrará un diálogo modal de agregar a la pantalla principal.
Banner A2HS Chrome 67 y versiones anteriores
Se muestra automáticamente cuando el sitio cumple con los criterios para agregar a la pantalla principal y no llama a preventDefault() en el evento beforeinstallprompt.
O
Se muestra llamando a prompt() en el evento beforeinstallprompt.
Minibarra de información Chrome 68 y versiones posteriores
Si un usuario la descarta, no se mostrará hasta que haya transcurrido un período suficiente (aproximadamente 3 meses).
Se muestra sin importar si se llamó a preventDefault() en el evento beforeinstallprompt.
Este tratamiento de la IU se quitará en una versión futura de Chrome cuando se presente el botón de instalación del cuadro multifunción.
Diálogo de A2HS
Se muestra llamando a prompt() desde un gesto del usuario en el evento beforeinstallprompt en Chrome 68 y versiones posteriores.
O
Se muestra cuando un usuario presiona la minibarra de información en Chrome 68 y versiones posteriores.
O
Se muestra después de que el usuario hace clic en "Agregar a la pantalla principal" en el menú de Chrome en todas las versiones de Chrome.
Minibar
La minibarra de información es un componente de la IU de Chrome y el sitio no puede controlarla, pero el usuario puede descartarla fácilmente. Una vez que el usuario lo descarte, no volverá a aparecer hasta que haya transcurrido un tiempo suficiente (actualmente, 3 meses). La barra de información en miniatura aparecerá cuando el sitio cumpla con los criterios para agregar a la pantalla principal, independientemente de si preventDefault() en el evento beforeinstallprompt o no.
En lugar de solicitar al usuario que se cargue la página (un antipatrón para las solicitudes de permisos), puedes indicar que tu app se puede instalar con alguna IU, que luego mostrará el mensaje modal de instalación. Por ejemplo, esta AWP de escritorio agrega el botón "Instalar app" justo encima del nombre de perfil del usuario.
Solicitar la instalación de tu app en un gesto del usuario parece menos spam y aumenta la probabilidad de que haga clic en "Agregar" en lugar de "Cancelar". Incorporar un botón Instalar en tu app significa que, incluso si el usuario elige no instalar la app hoy, el botón seguirá allí al día siguiente o cuando esté listo para instalarla.
Escuchando el evento beforeinstallprompt
Si tu sitio cumple con los criterios para agregar a la pantalla principal, Chrome activará un evento beforeinstallprompt, guardará una referencia al evento y actualizará tu interfaz de usuario para indicar que el usuario puede agregar tu app a su pantalla principal.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
El evento beforeinstallprompt no se activará si la app ya está instalada (consulta los criterios para agregar a la pantalla principal).
Sin embargo, si el usuario desinstala la app más adelante, se volverá a activar el evento beforeinstallprompt en cada navegación de página.
Se muestra el diálogo con prompt()
Para mostrar el diálogo Agregar a la pantalla principal, llama a prompt() en el evento guardado desde un gesto del usuario. Chrome mostrará el cuadro de diálogo modal para solicitarle al usuario que agregue tu app a la pantalla principal. Luego, busca la promesa que muestra la propiedad userChoice del evento beforeinstallprompt. La promesa muestra un objeto con una propiedad outcome después de que se mostró el mensaje y el usuario lo respondió.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
Solo puedes llamar a prompt() en el evento diferido una vez. Si el usuario hace clic en Cancelar en el diálogo, deberás esperar hasta que se active el evento beforeinstallprompt en la navegación de la página siguiente. A diferencia de las solicitudes de permiso tradicionales, si haces clic en Cancelar, no se bloquearán las llamadas futuras a prompt() porque esta debe llamarse con un gesto del usuario.
Recursos adicionales
Consulta los banners de instalación de apps para obtener más información, incluido lo siguiente:
- Detalles del evento
beforeinstallprompt - Seguimiento de la respuesta del usuario al mensaje para agregar la pantalla principal
- Cómo realizar un seguimiento de la instalación de la app
- Cómo determinar si tu app se ejecuta como una app instalada