Desde que lanzamos el banner de agregar a la pantalla principal, trabajamos para etiquetar las apps web progresivas de forma más clara y simplificar la manera 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 alcanzar ese objetivo.
¿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 mini barra 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 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 en miniatura Chrome 68 y versiones posteriores
Si un usuario la descarta, no se mostrará hasta que haya transcurrido 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 introduzca el botón de instalación de la barra de direcciones.
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.
La mini barra de información
La minibarra de información es un componente de la IU de Chrome y el sitio no la puede controlar, 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 mostrarle un mensaje al usuario cuando se carga 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 para computadoras agrega un botón "Instalar la app" justo arriba del nombre del perfil del usuario.
Solicitar la instalación de tu app en un gesto del usuario se siente menos como spam 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á 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, 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 la pantalla principal. Luego, escucha la promesa que devuelve la propiedad userChoice del evento beforeinstallprompt. La promesa devuelve un objeto con una propiedad outcome después de que se muestra la instrucción y el usuario responde a ella.
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 esta llamada debe realizarse dentro de un gesto del usuario.
Recursos adicionales
Consulta Banners de instalación de la app para obtener más información, incluida la siguiente:
- Detalles sobre el evento de
beforeinstallprompt - Seguimiento de la respuesta del usuario a la solicitud para agregar la pantalla principal
- Realiza un seguimiento para saber si se instaló la app
- Cómo determinar si tu app se ejecuta como una app instalada