Puedes detectar si el usuario utiliza tu AWP en el navegador o en modo independiente. En los navegadores basados en Chromium (Android y computadoras de escritorio), también puedes detectar los siguientes eventos:
- Estado y resultado del diálogo de la invitación de instalación
- Se completó la instalación.
- Transferencia de navegación del navegador a la ventana de la AWP y viceversa
- Estado de instalación de la AWP.
- Se instaló una app relacionada desde una tienda de aplicaciones.
Puedes usar estos datos para obtener estadísticas, comprender las preferencias de los usuarios y personalizar su experiencia. Para capturar estos eventos, puedes usar herramientas como consultas de medios, eventos de window o las APIs de funciones que puedes encontrar aquí.
Detecta el modo de visualización
Para realizar un seguimiento de cómo los usuarios inician tu AWP, puedes usar matchMedia() para probar la consulta de medios display-mode.
window.addEventListener('DOMContentLoaded', () => {
let displayMode = 'browser tab';
if (window.matchMedia('(display-mode: standalone)').matches) {
displayMode = 'standalone';
}
// Log launch display mode to analytics
console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});
Si usas este ejemplo, recuerda hacer coincidir el modo de visualización del manifiesto de tu app web, por ejemplo, standalone, minimal-ui o fullscreen. También puede hacer coincidir varias consultas en la cadena de consulta de medios usando condiciones separadas por comas.
También puedes agregar un parámetro de búsqueda al start_url de tu manifiesto que puedes capturar con estadísticas para realizar un seguimiento de las estadísticas sobre cuándo, de qué manera y cuánto se usa tu AWP.
Instalación de apps
Cuando un usuario acepta la solicitud de instalación en el navegador, se activa el evento appinstalled en los navegadores basados en Chromium. Este controlador de eventos sirve para quitar cualquier promoción de instalación integrada en la app que hayas agregado.
window.addEventListener('appinstalled', () => {
// If visible, hide the install promotion
hideInAppInstallPromotion();
// Log install to analytics
console.log('INSTALL: Success');
});
Recuerda que, en dispositivos Android con WebAPK, el evento se activa cuando el usuario acepta el diálogo y no después de que se crea e instala el WebAPK. Es posible que haya una demora de algunos segundos hasta que la app se instale por completo.
El capítulo Solicitud de instalación explica cómo detectar si la solicitud de instalación está disponible y qué opciones hace el usuario.
Transferencia de sesión
Los usuarios pueden utilizar la AWP dentro del navegador y en el formulario independiente instalado. En los navegadores de escritorio, puedes transferir la navegación actual entre estos contextos mediante insignias o elementos de menú, como se muestra en la siguiente imagen.
En Android, hay un elemento de menú similar al de computadoras de escritorio del navegador que transfiere la navegación a la app. En este caso, se abre la URL actual, pero será una navegación de página nueva en la app.
En la siguiente imagen, puedes ver el elemento de menú en Android cuando la app ya está instalada.
Transferir después de la instalación
Desde los navegadores de escritorio, la navegación actual se transfiere de inmediato a la app durante la instalación. Se cierra la pestaña del navegador y se abre la app instalada recientemente, que continúa lo que estaba haciendo el usuario.
En los navegadores para dispositivos móviles, la navegación actual permanece en el navegador cuando instalas la app. Si los usuarios quieren pasar a la app, deberán abrirla de forma manual, y la navegación será una nueva.
Detecta la transferencia
Para detectar la transferencia entre el navegador y la ventana, puedes usar una consulta de medios:
window.addEventListener('DOMContentLoaded', () => {
// replace standalone with your display used in manifest
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);
});
});
Aislamiento de almacenamiento de iOS y iPadOS
En iOS y iPadOS, no se realiza ninguna transferencia de URL ni navegación entre el navegador y el ícono instalado. Incluso si se trata de la misma AWP, cada ícono de AWP que el usuario instale tendrá su propio almacenamiento, aislado de la pestaña de Safari y de otros íconos. Cuando un usuario abre el ícono de instalación, no se comparte ningún almacenamiento con Safari. Si tu AWP necesita acceder, el usuario deberá volver a acceder. Si la app se agregó a la pantalla principal varias veces, para cada instancia de AWP, el usuario tiene una sesión diferente.
Aplicaciones relacionadas
Un sitio web indica una relación con una aplicación a través del manifiesto. Para ello, usa el miembro related_applications de la especificación del manifiesto de apps web. La clave related_applications es un array de objetos que representan cada aplicación relacionada. Cada entrada contiene platform, url y un id opcional.
Estos son los valores de la plataforma posibles:
chrome_web_store: Google Chrome Web Store.play: Apps de Google Play (Android y ChromeOS).chromeos_play: ChromeOS de Play.webapp: Apps web.windows: Microsoft Store (Windows 10 y 11)f-droid: F-droid.amazon: Amazon AppStore (FireOS)
Prefiero una app relacionada
Cuando el usuario instala una app, puedes redireccionarlo a una app relacionada si configuras el campo prefer_related_applications como true en tu manifiesto. Con esta configuración, en navegadores compatibles, los flujos de instalación no instalarán la AWP, sino que activarán una instalación en la tienda desde el url o el id que especificaste en la entrada related_applications.
La aplicación relacionada podría ser tu AWP y se instalará a través de una tienda de aplicaciones. Una de las ventajas de esta configuración es que, por el momento, solo las apps instaladas a través de la tienda de aplicaciones se recuperan con una copia de seguridad o cuando cambias a un dispositivo nuevo.
{
...
"related_applications:" [
{
"platform": "play",
"url": "https://play.google.com/..."
}
],
"prefer_related_applications": true
}
Banners de apps inteligentes de Apple
Safari no admite el miembro related_applications, pero ofrece banners de apps inteligentes para apps de la App Store. Por lo tanto, si deseas promocionar una AWP u otra app que hayas publicado en la App Store, puedes incluir metaetiquetas en el código HTML de la AWP para invitar al usuario a instalar la app (consulta el vínculo proporcionado) o transferir la navegación si ya está instalada.
Detecta apps instaladas relacionadas
El método getInstalledRelatedApps() permite que tu sitio web verifique si tu AWP o app de iOS/Android/computadoras está instalada en el dispositivo del usuario.
Verificar si ya está instalada una app relacionada te ayuda a implementar funciones, como ocultar mensajes instalados personalizados o redireccionar al usuario directamente a la app instalada, en lugar de ir a un sitio web de uso general.
Para usar el método getInstalledRelatedApps(), la app instalada y el sitio web deben configurar su conexión entre sí. Cada app, según su plataforma, incluye metadatos para reconocer el sitio web, y este incluye la app instalada esperada en el campo related_applications del manifiesto.
Las herramientas como BubbleWrap o PWA Builder, que te permiten publicar tu AWP en tiendas de aplicaciones, ya agregan los metadatos necesarios para que tu sitio web pueda usar getInstalledRelatedApps() de inmediato.
Para detectar si una AWP ya está instalada con getInstalledRelatedApps(), define webapp en el campo related_applications del manifiesto con la URL de tu manifiesto:
...
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
...
getInstalledRelatedApps() muestra un array de objetos de app. Si el array está vacío, la app relacionada no está instalada.
const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;
Detecta la instalación desde fuera del permiso de la AWP
Desde Chrome en Android 89, puedes detectar si una AWP está instalada, incluso fuera de su alcance. Tu AWP debe configurar un archivo JSON dentro de la carpeta /.well-known/ y otorgar permiso al otro alcance, como se describe en este artículo.