Desde que lanzamos el banner "Agregar a la pantalla principal", 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, haremos 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 que permite agregar a la pantalla principal. Si el sitio cumple con los criterios para agregar a la pantalla principal, Chrome mostrará la barra de información en miniatura. Luego, si el usuario hace clic en la
minibarra de información 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 en 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.
Minibar de información Chrome 68 y versiones posteriores
Si un usuario la descarta, no se mostrará hasta que haya transcurrido un período suficiente (alrededor de 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 barra de información en miniatura 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.
La minibar de información
La barra de información en miniatura 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 la descarta, 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 que uses preventDefault() en el evento beforeinstallprompt o no.
En lugar de solicitar al usuario que se cargue la página (un antipatrón para solicitudes de permisos), puedes indicar que tu app se puede instalar con alguna IU, lo que mostrará la solicitud de instalación modal. Por ejemplo, esta AWP de escritorio agrega el botón "Instalar app" justo encima del nombre de perfil del usuario.
Solicitar que se instale tu app mediante un gesto del usuario parece menos spam para el usuario y aumenta la probabilidad de que haga clic en "Agregar" en lugar de "Cancelar". La incorporación de un botón de instalación en tu app significa que, incluso si el usuario elige no instalarla hoy, este seguirá allí mañana o cuando esté listo para hacerlo.
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á 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 contenido a la pantalla principal).
Sin embargo, si el usuario desinstala la app más tarde, se volverá a activar el evento beforeinstallprompt en cada navegación de la 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 diálogo modal y le pedirá al usuario
que agregue tu app a su 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 muestra la solicitud y de que el usuario la haya respondido.
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 permisos tradicionales, hacer clic en Cancelar no bloqueará las futuras llamadas a prompt(), ya que esta debe llamarse dentro de un gesto del usuario.
Recursos adicionales
Para obtener más información, consulta los banners de instalación de apps, incluidos los siguientes:
- Detalles del evento
beforeinstallprompt - Seguimiento de la respuesta del usuario al mensaje para agregar la pantalla principal
- Cómo realizar un seguimiento de si se instaló la app
- Cómo determinar si tu app se ejecuta como una app instalada