¿Tu app está instalada? La API de Get Installed Related Apps te lo dirá.

Pete LePage
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

La API de Get Installed Related Apps permite obtener la lista de apps relacionadas instaladas junto con sus detalles.

Te permite verificar si tu app web progresiva (AWP), app para Android o app para la Plataforma universal de Windows (UWP) está instalada en el dispositivo actual, tanto desde la AWP como desde una página web relacionada (p.ej., un sitio web de marketing de productos).

Bubblewrap es un conjunto de bibliotecas de código abierto y una herramienta de línea de comandos (CLI) para Node.js. Bubblewrap es desarrollado por el equipo de Google Chrome para ayudar a los desarrolladores a generar, compilar y firmar un proyecto para Android que inicie tu AWP como una Actividad web de confianza (TWA).

PWABuilder es un proyecto de código abierto desarrollado por Microsoft que permite a los desarrolladores empaquetar y firmar sus APW para publicarlas en varias tiendas, incluidas Microsoft Store, Google Play Store, App Store y Meta Quest Store. Para ello, deben ingresar la URL de una APW, ingresar o editar los metadatos de la app y hacer clic en el botón Generate.

PWABuilder usa Bubblewrap de forma interna para empaquetar AWP para Android y ChromeOS.

Si la app ya está instalada, puedes personalizar la experiencia del usuario.

Por ejemplo:

  • No promocionar la instalación de tu AWP si ya está instalada tu otra app
  • Redirigir al usuario desde un sitio web de marketing de productos directamente a tu aplicación
  • Centralizamos algunas funciones, como las notificaciones, en la otra app para evitar notificaciones duplicadas.

Para usar la API de Get Installed Related Apps, debes informar a tu app sobre tu página y, luego, informar a tu página sobre tu app. Una vez que hayas definido la relación entre ambas, podrás verificar si la app relacionada está instalada.

Para evitar que los sitios prueben un conjunto demasiado amplio de sus propias apps, solo se tendrán en cuenta las tres primeras apps declaradas en el manifiesto de la app web.

Al igual que la mayoría de las otras APIs web potentes, la API de Get Installed Related Apps solo está disponible cuando se entrega a través de HTTPS.

¿Qué es la API de Get Installed Related Apps?

Llamar al método asíncrono navigator.getInstalledRelatedApps() devuelve una promesa que se resuelve con un array de objetos que contienen detalles sobre las apps que cumplen con las siguientes condiciones:

  • instalada en el dispositivo actual
  • definido en el campo related_applications del manifiesto de la app web
  • tener una relación verificada con una página en la que se llama al método navigator.getInstalledRelatedApps() (consulta las siguientes secciones para obtener más detalles)
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

Si se llama a console.log(installedRelatedApps), se muestra un resultado similar al siguiente:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

Por ejemplo, para verificar si hay apps relacionadas instaladas en el dispositivo del usuario, puedes usar la siguiente línea:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

Si conoces el ID del paquete, puedes usar la siguiente línea para obtener el número de versión de la app para Android relacionada instalada:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

Esto significa que el método navigator.getInstalledRelatedApps() seguirá devolviendo apps relacionadas instaladas, incluso si su versión es inferior a min_version o si su certificado de firma no coincide con ningún fingerprints declarado en el campo related_applications del manifiesto de la app web.

Tipos de apps compatibles que puedes verificar

Tipo de app Se puede verificar desde
App para Android Solo para Android:
Chrome 80 o versiones posteriores
App de la Plataforma universal de Windows (UWP) Solo para Windows:
Chrome 85 o versiones posteriores
Edge 85 o versiones posteriores
App web progresiva (AWP) instalada en el mismo alcance en el mismo origen Android:
Chrome 84 o versiones posteriores
Computadoras (Windows, macOS, Linux, ChromeOS):
Chrome 140 o versiones posteriores
Edge 140 o versiones posteriores
App web progresiva (AWP)
instalada en el mismo o en un origen diferente 		Solo para Android:
Chrome 84 o versiones posteriores

Verifica si está instalada tu app para Android

Tu sitio web puede verificar si tu app para Android está instalada.

Solo para Android: Chrome 80 o versiones posteriores

Informa a tu app para Android sobre tu sitio web

Primero, deberás actualizar tu app para Android para definir la relación entre tu sitio web y la aplicación para Android con el sistema de vínculos de recursos digitales. Esto verifica que solo tu sitio web pueda comprobar si está instalada tu app para Android.

En el AndroidManifest.xml de tu app para Android, agrega una entrada asset_statements:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

Luego, en strings.xml, agrega la siguiente declaración de activos y actualiza site con tu dominio. Asegúrate de incluir los caracteres de escape.

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

Una vez que se complete, instala la app actualizada en el dispositivo o publícala en Google Play Store o en cualquier otra plataforma de distribución de apps para Android.

Informa a tu sitio web sobre tu app para Android

A continuación, informa a tu sitio web sobre tu app para Android agregando un manifiesto de la app web a tu página. El manifiesto debe incluir la propiedad related_applications, un array que proporciona los detalles sobre tu app, incluidos platform y id.

  • platform debe ser play
  • id es el ID del paquete de Android.
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

Cómo verificar si la app está instalada

Por último, llama a la función asíncrona navigator.getInstalledRelatedApps() para verificar si tu app para Android está instalada.

Cómo verificar si tu app para Windows (UWP) está instalada

Tu sitio web puede verificar si tu app para Windows (creada con UWP) está instalada.

Solo para Windows: Chrome 85 o versiones posteriores, Edge 85 o versiones posteriores

Cómo informar a tu app para Windows sobre tu sitio web

Deberás actualizar tu app para Windows y definir la relación entre tu sitio web y la aplicación para Windows con URI Handlers. Esto verifica que solo tu sitio web pueda comprobar si está instalada tu app para Windows.

Agrega el registro de la extensión Windows.appUriHandler al archivo de manifiesto de tu app Package.appxmanifest. Por ejemplo, si la dirección de tu sitio web es example.com, agregarías la siguiente entrada en el manifiesto de tu app:

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

Ten en cuenta que es posible que debas agregar el espacio de nombres uap3 a tu atributo <Package>.

Luego, crea un archivo JSON (sin la extensión de archivo .json) llamado windows-app-web-link y proporciona el nombre de la familia de paquetes de tu app. Coloca ese archivo en la raíz del servidor o en el directorio /.well-known/. Puedes encontrar el nombre de la familia de paquetes en la sección Packaging del diseñador de manifiestos de la app.

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

Consulta Cómo habilitar apps para sitios web con controladores de URI de la app para obtener todos los detalles sobre la configuración de los controladores de URI.

Informa a tu sitio web sobre tu app para Windows

A continuación, informa a tu sitio web sobre tu app para Windows agregando un manifiesto de la app web a tu página. El manifiesto debe incluir la propiedad related_applications, un array que proporciona los detalles sobre tu app, incluidos platform y id.

  • platform debe ser windows
  • id es el nombre de la familia de paquetes de tu app, al que se agrega el valor Id de <Application> en tu archivo Package.appxmanifest.
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App"
  }]
}

Cómo verificar si la app está instalada

Por último, llama a la función asíncrona navigator.getInstalledRelatedApps() para verificar si tu app para Windows está instalada.

Consulta esta demostración.

Verifica si tu app web progresiva ya está instalada (en el alcance)

Tu AWP puede verificar si ya está instalada. En este caso, la página que realiza la solicitud debe estar en el mismo dominio y dentro del alcance de tu PWA, según lo define el alcance en el manifiesto de la app web.

Compatible con:

Android: Chrome 84 o versiones posteriores

Computadoras (Windows, macOS, Linux y ChromeOS): Chrome 140 o versiones posteriores, Edge 140 o versiones posteriores

Cómo indicarle a tu PWA información sobre sí misma

Agrega una entrada related_applications en el manifiesto de la app web de tu AWP para que esta se conozca a sí misma.

  • platform debe ser webapp
  • url es la ruta de acceso (puede ser relativa) al manifiesto de la app web de tu AWP.
  • id es el ID de la app web declarado en el campo id del manifiesto de la app web o calculado por el navegador (obligatorio para computadoras, no necesario para Android).
{
  …
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com/?utm_source=home_screen"
  }],
  …
}

Comprueba si tu AWP está instalada

Por último, llama a la función asíncrona navigator.getInstalledRelatedApps() desde el alcance de tu PWA para verificar si está instalada. Si se llama a navigator.getInstalledRelatedApps() fuera del alcance de tu APW, devolverá []. Consulte la siguiente sección para obtener más detalles.

Verificar si está instalada tu app web progresiva (fuera del alcance)

Tu sitio web puede verificar si tu AWP está instalada, incluso si la página está fuera del alcance de tu AWP. Por ejemplo, una página de destino que se publica desde /landing/ puede verificar si está instalada la AWP que se publica desde /pwa/, o bien si tu página de destino se publica desde www.example.com y tu AWP se publica desde app.example.com.

Compatible con:

Solo para Android: Chrome 84 o versiones posteriores

Informa a tu AWP sobre tu sitio web

Primero, deberás agregar vínculos de activos digitales al servidor desde el que se entrega tu PWA. Esto ayudará a definir la relación entre tu sitio web y tu AWP, y verificará que solo tu sitio web pueda comprobar si tu AWP está instalada.

Agrega un archivo assetlinks.json al directorio /.well-known/ del dominio en el que se aloja la PWA, por ejemplo, app.example.com. En la propiedad site, proporciona la ruta de acceso completa al manifiesto de la app web que realizará la verificación (no el manifiesto de la app web de tu AWP).

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

A continuación, informa a tu sitio web sobre tu app de AWP agregando un manifiesto de la app web a tu página. El manifiesto debe incluir la propiedad related_applications, un array que proporciona los detalles sobre tu APW, incluidos platform y url.

  • platform debe ser webapp
  • url es la ruta de acceso completa al manifiesto de la app web de tu AWP.
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json"
  }]
}

Comprueba si tu AWP está instalada

Por último, llama a la función asíncrona navigator.getInstalledRelatedApps() para verificar si tu PWA está instalada.

¿Tienes más preguntas?

¿Tienes más preguntas? Consulta la etiqueta getInstalledRelatedApps en StackOverflow para ver si alguien más tiene preguntas similares. Si no es así, haz tu pregunta allí y asegúrate de etiquetarla con la etiqueta progressive-web-apps. Nuestro equipo supervisa con frecuencia esa etiqueta y trata de responder tus preguntas.

Comentarios

¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente de la especificación?

  • Presenta un error en https://new.crbug.com. Incluye tantos detalles como puedas, proporciona instrucciones para reproducir el error y, luego, ingresa Mobile>WebAPKs en el cuadro Components.

Vínculos útiles

Gracias

Agradecemos especialmente a Sunggook Chue de Microsoft por ayudar con los detalles para probar apps de Windows y a Rayan Kanso por su ayuda con los detalles de Chrome.