Muchos navegadores te permiten habilitar y promocionar la instalación de tu app web progresiva (AWP) directamente en la interfaz de usuario. La instalación (también conocida como Agregar a la pantalla principal) permite a los usuarios instalar tu AWP en su dispositivo móvil o de escritorio. Cuando instalas una AWP, se agrega al directorio para que se ejecute como cualquier otra app instalada.
Además de la experiencia de instalación que proporciona el navegador, puedes ofrecer tu propio flujo de instalación personalizado directamente en tu app.
![Botón Instalar app incluido en la AWP de Spotify](https://web.developers.google.cn/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?authuser=7&hl=es-419)
Cuando consideres si promocionarás
la instalación, ten en cuenta cómo los usuarios
usar tu AWP. Por ejemplo, si hay un conjunto de usuarios que usan tu AWP
varias veces a la semana, estos usuarios podrían beneficiarse de la comodidad adicional de
iniciar tu app desde la pantalla principal de un teléfono o desde el menú Inicio en una computadora de escritorio
un sistema operativo completo. Algunas aplicaciones de productividad y entretenimiento también se benefician
del espacio extra de pantalla creado al eliminar las barras de herramientas del navegador de la
en los modos standalone
o minimal-ui
instalados.
Requisitos previos
Antes de comenzar, asegúrate de que tu AWP cumpla con los requisitos de instalación, que, por lo general, incluyen tener un manifiesto de aplicación web.
Promover la instalación
Para mostrar que tu Progressive Web App se puede instalar y proporcionar una Flujo de instalación en la app:
- Escucha el evento
beforeinstallprompt
. - Guarda el evento
beforeinstallprompt
para que pueda activar el flujo de instalación. más adelante. - Informa al usuario que tu AWP se puede instalar y proporciona un botón u otro elemento para iniciar el flujo de instalación integrada en la app.
Escucha el evento beforeinstallprompt
Si tu app web progresiva cumple con los criterios de instalación obligatorios,
el navegador activa un evento beforeinstallprompt
. Guarda una referencia al evento
y actualiza la interfaz de usuario para indicar que el usuario puede instalar tu AWP.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
Flujo de instalación en la app
Para proporcionar la instalación en la app, proporciona un botón u otro elemento de la interfaz
en los que un usuario puede hacer clic o presionar para instalar tu aplicación. Cuando se hace clic en el elemento o
presionado, llama a prompt()
en el evento beforeinstallprompt
guardado (almacenado en
la variable deferredPrompt
). Muestra al usuario un cuadro de diálogo de instalación modal en el que se le pregunta
para confirmar que desea instalar tu AWP.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
La propiedad userChoice
es una promesa que se resuelve con la elección del usuario.
Solo puedes llamar una vez a prompt()
en el evento diferido. Si el usuario
lo descarta, deberás esperar hasta que aparezca el evento beforeinstallprompt
se vuelve a activar, por lo general, inmediatamente después de la propiedad userChoice
ha resuelto.
Cómo detectar cuándo se instaló correctamente la AWP
Puedes usar la propiedad userChoice
para determinar si el usuario instaló
tu aplicación desde tu interfaz de usuario. Sin embargo, si el usuario instala tu AWP
desde la barra de direcciones o algún otro componente del navegador, userChoice
no te ayudará.
En cambio, debes escuchar el evento appinstalled
, que se activa cada vez que
tu AWP esté instalada, independientemente del mecanismo que se utilice para instalarla.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
Detecta cómo se inició la AWP
La consulta de medios display-mode
del CSS indica cómo se inició la AWP, ya sea en
una pestaña del navegador
o como una AWP instalada. Esto permite aplicar diferentes
estilos según cómo se haya lanzado la aplicación. Por ejemplo, puedes configurarlo
ocultar siempre el botón de instalación y proporcionar un botón Atrás cuando se inicie como un
o la AWP instalada.
Realiza un seguimiento de cómo se inició la AWP
Para realizar un seguimiento de cómo los usuarios inician tu AWP, usa matchMedia()
para probar la
display-mode
consulta de medios. Safari en iOS aún no admite esta opción, por lo que
en su lugar, marca navigator.standalone
, que muestra un valor booleano que indica si
El navegador se ejecuta en modo independiente.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
Realiza un seguimiento de los cambios en el modo de visualización
Para realizar un seguimiento si el usuario cambia entre standalone
y browser tab
, busca
Cambios en la consulta de medios display-mode
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
Cómo actualizar la IU en función del modo de visualización actual
Para aplicar un color de fondo diferente para una AWP cuando se inicia como instalada AWP, usa CSS condicional:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Cómo actualizar el ícono y el nombre de la app
¿Qué ocurre si necesitas actualizar el nombre de tu aplicación o proporcionar íconos nuevos? Consulta Cómo maneja Chrome las actualizaciones del manifiesto de la app web. para ver cuándo y cómo se reflejan esos cambios en Chrome.