¿Tu app está instalada? getInstalledRelatedApps() te lo dirá.

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

Pete LePage
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

¿Qué es la API de getInstalledRelatedApps()?

Un sitio web que usa getInstalledRelatedApps() para determinar si su app para Android ya está instalada.

El getInstalledRelatedApps() permite que tu página verifique si tu app para dispositivos móviles o computadoras, o, en algunos casos, si tu app web progresiva (PWA) ya está instalada en el dispositivo de un usuario, y te permite personalizar la experiencia del usuario si es así.

Por ejemplo, si tu app ya está instalada, haz lo siguiente:

  • Redirigir al usuario desde una página de marketing de productos directamente a tu app
  • Centralizar algunas funciones, como las notificaciones, en la otra app para evitar notificaciones duplicadas
  • No promocionar la instalación de tu AWP si ya está instalada tu otra app

Para usar la API de getInstalledRelatedApps(), debes informar a tu app sobre tu sitio y, luego, informar a tu sitio sobre tu app. Una vez que definas la relación entre ambos, podrás verificar si la app está instalada.

Tipos de apps compatibles que puedes verificar

Tipo de aplicación Se puede marcar desde
App para Android Solo para Android
Chrome 80 o versiones posteriores
App para Windows (UWP) Solo para Windows
Chrome 85 o versiones posteriores
Edge 85 o versiones posteriores
App web progresiva
Instalada en el mismo alcance o en un alcance 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.

Compatible con

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 termines, publica tu app para Android actualizada en Play Store.

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 de la aplicación de Google Play para tu app para 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.

Compatible con

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 controladores de URI. Esto verifica que solo tu sitio web pueda comprobar si tu app para Windows está instalada.

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 esta demostración.

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 <Application> Id de 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.

Verifica si tu app web progresiva ya está instalada (dentro del 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 se define en el manifiesto de la app web.

Compatible con

Android: Chrome 84 o versiones posteriores

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

Para que tu AWP se describa a sí misma, agrega una entrada related_applications en el manifiesto de la app web de tu AWP.

  • platform debe ser webapp
  • url es la ruta de acceso completa al manifiesto de la app web de tu AWP.
  • id es la ruta de acceso completa a la app web (obligatoria para computadoras de escritorio, no necesaria para Android).
{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com"
  }],
  …
}

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 getInstalledRelatedApps() fuera del alcance de tu PWA, devolverá false. 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 la AWP que se publica desde /pwa/ está instalada, 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

Android: Chrome 84 o versiones posteriores

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

Informa a tu AWP sobre tu sitio web

Primero, deberás agregar vínculos de recursos digitales al servidor desde el que se publica 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 encuentra 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"
    }
  }
]

Informa a tu sitio web sobre tu AWP

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 PWA, 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.

Cómo usar getInstalledRelatedApps()

La llamada a navigator.getInstalledRelatedApps() devuelve una promesa que se resuelve con un array de las apps instaladas en el dispositivo del usuario.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

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 getInstalledRelatedApps() solo está disponible cuando se entrega a través de HTTPS.

¿Tienes más preguntas?

¿Tienes más preguntas? Consulta la etiqueta getInstalledRelatedApps en StackOverflow para ver si alguien más tuvo preguntas similares. Si no es así, haz tu pregunta allí y asegúrate de etiquetarla con 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 las especificaciones?

Cómo mostrar compatibilidad con la API

¿Planeas usar la API de getInstalledRelatedApps()? Tu apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es admitirlas.

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.