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 instalación de la AWP.
• Aplicación relacionada instalada desde una tienda de aplicaciones

Puedes usar estos datos para generar 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 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.

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 puedes hacer coincidir varias consultas en la cadena de consulta de medios usando 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 la solicitud de instalación en el navegador, el evento appinstalled se activa 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 la app demore algunos segundos en instalarse 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 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 la 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 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.

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

Desde los navegadores de escritorio, la navegación actual se transfiere de inmediato a la app en la instalación. Se cierra la pestaña del navegador y se abre la app instalada recientemente, lo que continúa con lo que estaba haciendo el usuario.

En los navegadores para dispositivos móviles, tu navegación actual permanece en el navegador cuando instalas la app. Si los usuarios quieren pasar a la app, deben abrirla de forma manual, y será una nueva navegación.

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 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 la AWP que instale tendrá su propio almacenamiento, aislado de la pestaña de Safari y otros íconos. Cuando un usuario abre el ícono de instalación, no se comparte el almacenamiento con Safari. Si tu AWP requiere acceso, el usuario deberá volver a acceder. Si la app se agregó a la pantalla principal varias veces, para cada instancia de AWP, el usuario tendrá 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 representa 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 Play.
• webapp: Apps web
• windows: Microsoft Store (Windows 10 y 11)
• f-droid: Droide F.
• amazon: Amazon AppStore (FireOS).

Preferir 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 los navegadores compatibles, los flujos de instalación no instalarán la AWP. En su lugar, activan una instalación de 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 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 nuevo dispositivo.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Banners de apps inteligentes de Apple

Safari no es compatible con el miembro related_applications, pero ofrece banners de aplicaciones inteligentes para las aplicaciones de la tienda de aplicaciones. Por lo tanto, si quieres promocionar una AWP o alguna 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.

Cómo detectar apps instaladas relacionadas

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

Verificar si una app relacionada ya está instalada 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í. Según la plataforma, cada app incluye metadatos para reconocer el sitio web, y este incluirá la app instalada esperada en el campo related_applications del manifiesto.

Las herramientas como BubbleWrap o AWP 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 instalaciones desde fuera del alcance de la AWP

A partir de Chrome en Android 89, puedes detectar si una AWP está instalada, incluso desde fuera de su alcance. Tu AWP debe establecer un archivo JSON dentro de la carpeta /.well-known/ y otorgar permiso al otro permiso, como se describe en este artículo.

Recursos

• ¿Tu app está instalada? getInstalledRelatedApps() te lo dirá.
• MDN: Aplicaciones relacionadas
• MDN: Evento AppInstalled
• Apple: Promociona aplicaciones con banners de aplicaciones inteligentes