Esta falla contiene el manifiesto web con los campos obligatorios para hacer que una aplicación web sea instalable.
También tiene un botón de instalación que está oculto de forma predeterminada.
Detecta el evento beforeinstallprompt
Cuando el navegador activa el evento beforeinstallprompt
, esa es la indicación.
que se puede instalar la app web y que se puede mostrar un botón de instalación
para el usuario. El evento beforeinstallprompt
se activa cuando la app cumple con los
criterios de instalación.
La captura del evento permite a los desarrolladores personalizar la instalación y enviarle solicitudes al usuario instalar cuando consideran que es el mejor momento.
- Haz clic en Remix para editar para que el proyecto se pueda editar.
- Agrega un controlador de eventos
beforeinstallprompt
al objetowindow
. - Guarda
event
como una variable global. lo necesitaremos más adelante para mostrar el mensaje. - Muestra el botón de instalación.
Código:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
Cómo controlar el clic en el botón de instalación
Para mostrar el mensaje de instalación, llama a prompt()
en el beforeinstallprompt
guardado
para cada evento. La llamada a prompt()
se realiza en el controlador de clics del botón de instalación porque
Se debe llamar a prompt()
desde un gesto del usuario.
- Agrega un controlador de eventos de clic para el botón de instalación.
- Llama a
prompt()
en el eventobeforeinstallprompt
guardado. - Registra los resultados de la instrucción.
- Establece el evento
beforeinstallprompt
guardado como nulo. - Ocultar el botón de instalación
Código:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
Realiza un seguimiento del evento de instalación
Instalar una aplicación web a través de un botón de instalación es solo una de las formas en que los usuarios
puedan instalarlo. También pueden usar el menú de Chrome, la barra de información en miniatura y
mediante un ícono en el cuadro multifunción. Puedes
Escucha el appinstalled
para hacer un seguimiento de todas estas formas de instalación.
para cada evento.
- Agrega un controlador de eventos
appinstalled
al objetowindow
. - Registra el evento de instalación en Analytics o en otro mecanismo.
Código:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Lecturas adicionales
Felicitaciones, ya puedes instalar tu app.
Estas son algunas acciones adicionales que puedes hacer: