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

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

¿Qué es la API de getInstalledRelatedApps()?

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

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

Por ejemplo, si tu app ya está instalada:

  • Redireccionar al usuario desde la página de marketing de un producto directamente a tu app
  • Centralizar algunas funcionalidades, como las notificaciones, en la otra app para evitar notificaciones duplicadas.
  • No promocionar la instalación de la AWP si la otra app ya está instalada.

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

Tipos de apps compatibles que puedes consultar

Tipo de aplicación Se puede marcar desde
App para Android Solo para Android
Chrome 80 o versiones posteriores
App de Windows (UWP) Solo para Windows
Chrome 85 o versiones posteriores
Edge 85 o versiones posteriores
App web progresiva
Se instala en el mismo alcance o en un alcance diferente.
Solo para Android
Chrome 84 o versiones posteriores

Cómo comprobar si tu app para Android está instalada

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

Compatible con

Android: Chrome 80 o versiones posteriores

Cuéntale a tu app para Android sobre tu sitio web

Primero, debes actualizar la app para Android a fin de definir la relación entre tu sitio web y la aplicación para Android mediante el sistema de Vínculos de recursos digitales. Esto garantiza que solo tu sitio web pueda verificar si tu app para Android está instalada.

En la 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 sentencia del recurso 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>

Cuando termines, publica tu app para Android actualizada en Play Store.

Cuéntale a tu sitio web acerca de tu app para Android

A continuación, indícale a tu sitio web sobre la app para Android. Para ello, agrega un manifiesto de la app web a la página. El manifiesto debe incluir la propiedad related_applications, un array que proporciona los detalles de tu app, como platform y id.

  • platform debe ser play
  • id es el ID de aplicación de Google Play de tu app para Android.
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

Cómo comprobar si tu app está instalada

Por último, llama a navigator.getInstalledRelatedApps() a fin de comprobar si tu app para Android está instalada.

Prueba la demostración.

Verifica si tu app de Windows (UWP) está instalada

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

Compatible con

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

Informa a tu app de Windows sobre tu sitio web

Deberás actualizar tu app de Windows para definir la relación entre tu sitio web y la aplicación de Windows mediante controladores de URI. Esto garantiza que solo tu sitio web pueda verificar si tu app de Windows está instalada.

Agrega el registro de extensión Windows.appUriHandler al archivo de manifiesto Package.appxmanifest de tu app. Por ejemplo, si la dirección de tu sitio web es example.com, debes agregar la siguiente entrada en el manifiesto de la 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>

Nota: 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 familia del paquete 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 del paquete en la sección Empaquetado del diseñador de manifiestos de la app.

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

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

Informa a tu sitio web sobre tu app de Windows

A continuación, infórmale a tu sitio web sobre la app de Windows. Para ello, agrega un manifiesto de la aplicación web a la página. El manifiesto debe incluir la propiedad related_applications, un array que proporciona los detalles de tu app, como platform y id.

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

Cómo comprobar si tu app está instalada

Por último, llama a navigator.getInstalledRelatedApps() para verificar si tu app de Windows está instalada.

Comprueba si tu app web progresiva ya está instalada (dentro del alcance)

La 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 AWP, como lo define el alcance en el manifiesto de la aplicación web.

Compatible con

Android: Chrome 84 o versiones posteriores

Cuéntale a tu AWP sobre sí misma

Agrega una entrada related_applications en el manifiesto de la aplicación web de tus AWP para informarle sobre sí misma.

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

Cómo verificar si la AWP está instalada

Por último, llama a navigator.getInstalledRelatedApps() desde el alcance de tu AWP para verificar si está instalada. Si se llama a getInstalledRelatedApps() fuera del alcance de tu AWP, el resultado será falso. Consulte la siguiente sección para obtener más detalles.

Prueba la demostración.

Comprueba si tu app web progresiva está instalada (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 entrega desde /landing/ puede verificar si la AWP que se entrega desde /pwa/ está instalada o si la página de destino se entrega desde www.example.com y la AWP se entrega desde app.example.com.

Compatible con

Android: Chrome 84 o versiones posteriores

Cuéntale a tu AWP sobre tu sitio web

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

Agrega un archivo assetlinks.json al directorio /.well-known/ del dominio en el que se encuentra la AWP, 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 al 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"
    }
  }
]

Cuéntale a tu sitio web sobre la AWP

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

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

Cómo verificar si la AWP está instalada

Por último, llama a navigator.getInstalledRelatedApps() para verificar si la AWP está instalada.

Prueba la demostración.

Cómo llamar a getInstalledRelatedApps()

Llamar a navigator.getInstalledRelatedApps() muestra una promesa que se resuelve con un array de tus apps que se instalan 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? Verifica la etiqueta getInstalledRelatedApps en StackOverflow para ver si alguien más hizo 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? ¿La implementación es diferente de las especificaciones?

  • Informa un error en https://new.crbug.com. Incluye todos los detalles que puedas, proporciona instrucciones simples para reproducir el error y, luego, ingresa Mobile>WebAPKs en el cuadro Componentes. Glitch funciona muy bien para compartir repros rápidos y fáciles.

Muestra compatibilidad con la API

¿Planeas usar la API de getInstalledRelatedApps()? Tu asistencia pública ayuda al equipo de Chrome a priorizar funciones y le muestra a otros proveedores de navegadores la importancia de admitirlas.

Vínculos útiles

Gracias

Queremos dar un agradecimiento especial a Sunggook Chue de Microsoft por ayudar con los detalles necesarios para probar las apps para Windows y a Rayan Kanso por la ayuda con los detalles de Chrome.