Detección

Puedes detectar si el usuario está usando 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 la instalación de la AWP
  • Aplicación relacionada instalada desde una tienda de aplicaciones

Puedes usar estos datos para las estadísticas, para comprender las preferencias de tus usuarios y para 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 enumeradas aquí.

Cómo detectar el modo de pantalla

Para realizar un seguimiento de cómo los usuarios inician tu AWP, puedes usar matchMedia() para probar la consulta de medios display-mode.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

Si usas este ejemplo, recuerda que debes hacer coincidir el modo de visualización del manifiesto de tu app web, por ejemplo, standalone, minimal-ui o fullscreen. También puedes hacer coincidir varias consultas en la cadena de consulta de medios con condiciones separadas por comas.

También puedes agregar un parámetro de consulta al start_url de tu manifiesto que puedes capturar con estadísticas para hacer 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 el mensaje de instalación en el navegador, se activa el evento appinstalled en los navegadores basados en Chromium. Un buen uso de este controlador de eventos es 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 crear e instalar el WebAPK. Es posible que haya una demora de algunos segundos antes de que la app se instale por completo.

En el capítulo Mensaje de instalación, se explica cómo detectar si la solicitud de instalación está disponible y qué decisiones toma el usuario.

Transferencia de sesión

Los usuarios pueden usar tu AWP dentro del navegador y en el formato independiente instalado. En los navegadores para computadoras, puedes transferir la navegación actual entre estos contextos con insignias o elementos de menú, como se ve en la siguiente imagen.

Transferencia de navegación entre una pestaña del navegador y una ventana de la AWP

En Android, hay un elemento de menú similar al de una computadora de escritorio desde el navegador que transfiere la navegación a la app. En este caso, se abre la URL actual, pero será una nueva navegación de páginas en la app.

En la siguiente imagen, puedes ver el elemento de menú en Android cuando la app ya está instalada.

Chrome para Android muestra el elemento de menú para abrir una nueva navegación en una ventana de la AWP.

Cómo transferir después de la instalación

Desde los navegadores para computadoras, 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 recién instalada, lo que permite continuar con 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 será una navegación nueva.

Cómo detectar la transferencia

Para detectar la transferencia entre el navegador y la ventana, puedes usar una consulta de medios:

window.addEventListener('DOMContentLoaded', () => {
  // Replace "standalone" with the display mode used in your manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', () => {
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
    });
});

Aislamiento de almacenamiento de iOS y iPadOS

En iOS y iPadOS, no hay navegación ni transferencia de URL entre el navegador y el ícono instalado. Incluso si se trata de la misma AWP, cada ícono de AWP que instale el usuario tendrá su propio almacenamiento, aislado de la pestaña de Safari y otros íconos. Cuando un usuario abre el ícono instalado, no se comparte almacenamiento con Safari. Si tu AWP necesita un acceso, el usuario deberá volver a acceder. Si la app se agregó a la pantalla principal varias veces, para cada instancia de la AWP, el usuario tiene una sesión diferente.

Navegadores compatibles

  • Chrome: No se admite.
  • Edge: No es compatible.
  • Firefox: No es compatible.
  • Safari: No se admite.

Origen

Un sitio web indica una relación con una aplicación a través del manifiesto. Para hacerlo, 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 plataforma posibles:

  • chrome_web_store: Google Chrome Web Store.
  • play: Apps de Google Play (Android y ChromeOS).
  • chromeos_play: ChromeOS Play.
  • webapp: Apps web.
  • windows: Microsoft Store (Windows 10 y 11)
  • f-droid: F-Droid.
  • amazon: Amazon AppStore (FireOS)

Cuando el usuario instala una app, puedes redirigirlo 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 de la tienda desde el url o 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 ventaja 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 aplicaciones inteligentes para las apps de la App Store. Por lo tanto, si quieres promocionar una AWP o cualquier 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 instalarla (consulta el vínculo que acabamos de proporcionar) o transferir la navegación si ya está instalada.

El método getInstalledRelatedApps() permite que tu sitio web verifique si tu app para iOS, Android, computadoras de escritorio o PWA está instalada en el dispositivo del usuario.

Verificar si ya se instaló una app relacionada te ayuda a implementar funciones como ocultar mensajes instalados de forma personalizada 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(), tanto la app instalada como el sitio web deben configurar su conexión entre sí. Cada app, según su plataforma, incluye metadatos para reconocer el sitio web, y el sitio web 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 ya se instaló una AWP 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, significa que la app relacionada no está instalada.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

Detecta las instalaciones desde fuera del alcance de la AWP

En Chrome para Android 89, puedes detectar si se instaló una AWP, incluso desde fuera de su alcance. Tu AWP debe establecer un archivo JSON dentro de la carpeta /.well-known/, que otorgue permiso al otro alcance, como se describe en este artículo.

Recursos