Desde que lanzamos el banner para agregar a la pantalla principal, trabajamos para etiquetar las apps web progresivas de forma más clara y simplificar la forma en que los usuarios pueden instalarlas. Nuestro objetivo final es proporcionar un botón de instalación en la barra de direcciones en todas las plataformas, y en Chrome 68 estamos realizando cambios para lograrlo.
¿Qué cambios implementaremos?
A partir de Chrome 68 para Android (estable en julio de 2018), Chrome ya no mostrará el banner para 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 barra de información mini o llamas a prompt() en el evento beforeinstallprompt desde un gesto del usuario, Chrome mostrará un diálogo modal para agregar a la pantalla principal.
Banner de A2HS Chrome 67 y versiones anteriores
Se muestra automáticamente cuando el sitio cumple con los criterios para agregarlo a la pantalla principal y no llama a preventDefault() en el evento beforeinstallprompt.
O
Se muestra llamando a prompt() en el
evento beforeinstallprompt.
Barra de información mini Chrome 68 y versiones posteriores
Si un usuario la descarta, no se mostrará hasta que transcurra un período suficiente (~3 meses).
Se muestra independientemente de 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 de la barra omni.
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
Aparece 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.
La minibarra de información
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 minibarra de información 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 solicitarle al usuario que realice la acción durante la carga de 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 de instalación modal. Por ejemplo, esta AWP para computadoras de escritorio agrega un botón "Install App" justo encima del nombre del perfil del usuario.
Solicitar que se instale la app con un gesto del usuario le parece menos spam al usuario y aumenta la probabilidad de que haga clic en "Agregar" en lugar de "Cancelar". Incorporar un botón de instalación en tu app significa que, incluso si el usuario decide no instalarla hoy, el botón seguirá allí mañana o cuando esté listo para instalarla.
Cómo detectar 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á la 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, el evento beforeinstallprompt se volverá a activar en cada navegación de página.
Cómo mostrar el diálogo con prompt()
Para mostrar el diálogo de agregar a la pantalla principal, llama a prompt() en el evento guardado desde un gesto del usuario. Chrome mostrará el diálogo modal y le pedirá al usuario que agregue tu app a su pantalla principal. Luego, escucha la promesa que muestra la propiedad userChoice del evento beforeinstallprompt. La promesa muestra un objeto con una propiedad outcome después de que se muestra la solicitud y el usuario la responde.
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 siguiente navegación de página. A diferencia de las solicitudes de permisos tradicionales, hacer clic en Cancelar no bloqueará las llamadas futuras a prompt(), ya que se debe llamar a esta dentro de un gesto del usuario.
Recursos adicionales
Consulta Banners de instalación de apps para obtener más información, como la siguiente:
- Detalles del evento
beforeinstallprompt - Seguimiento de la respuesta del usuario a la solicitud de agregar a la pantalla principal
- Seguimiento de si se instaló la app
- Cómo determinar si tu app se ejecuta como una app instalada