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

El método getInstalledRelatedApps() permite que tu sitio web compruebe si Que tu app de escritorio (iOS/Android/computadora) o AWP esté instalada en el dispositivo de un usuario.

Pete LePage

¿Qué es la API de getInstalledRelatedApps()?

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

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

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

Para usar la API de getInstalledRelatedApps(), debes informarle a tu app lo siguiente: tu sitio y, luego, infórmale sobre tu aplicación. Una vez que hayas definido el relación entre ambos, puedes comprobar si la app está instalada.

Tipos de apps compatibles que puedes consultar

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

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

Informa a tu app para Android sobre tu sitio web

Primero, actualiza tu app para Android a fin de definir la relación entre tu sitio web y tu aplicación para Android Sistema de Vínculos de Recursos Digitales. Esto garantiza que solo tu sitio web puede comprobar si tu app para Android está instalada.

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

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

Luego, en strings.xml, agrega la siguiente declaración del recurso y actualiza el 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 sobre la aplicación para Android

A continuación, indícale a tu sitio web tu aplicación para Android agregar un manifiesto de aplicación web a tu página. El manifiesto debe Incluye 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 aplicación de Google Play de tu app para Android.

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

Comprueba si tu app está instalada

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

Prueba la demostración.

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

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

Informa a tu app de Windows sobre tu sitio web

Debes actualizar tu app de Windows para definir la relación entre tu sitio web y una aplicación de Windows con controladores URI. Esta garantiza que solo tu sitio web pueda comprobar si tu aplicación de Windows está instalada.

Agrega el registro de extensión Windows.appUriHandler al manifiesto de tu app archivo Package.appxmanifest. Por ejemplo, si la dirección de tu sitio web es example.com debes agregar 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 <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. Lugar ese archivo, ya sea en la raíz del servidor o en el directorio /.well-known/. Tú Puedes encontrar el nombre de la familia de paquetes en la sección Packaging del manifiesto de la app. diseñador.

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

Consulta Habilita apps para sitios web con controladores de URI de la app para obtener más información los detalles completos sobre la configuración de los controladores de URI.

Informa a tu sitio web sobre la app para Windows

A continuación, indícale a tu sitio web tu aplicación para Windows agregar un manifiesto de aplicación web a tu página. El manifiesto debe Incluye la propiedad related_applications, un array que brinda detalles sobre tu app, incluidos platform y id.

• platform debe ser windows
• id es el nombre de la familia de paquetes de tu app, agregado por <Application> Id. en tu archivo Package.appxmanifest.

{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

Comprueba si tu app está instalada

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

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

La AWP puede comprobar si ya está instalada. En este caso, la página que realice la solicitud debe estar en el mismo dominio y dentro del alcance de tu AWP, según lo define el alcance en el manifiesto de la aplicación web.

Cuéntale a la AWP sobre sí misma

Cuéntale a la AWP sobre sí misma agregando una entrada related_applications en tu El manifiesto de la app web de las AWP

• platform debe ser webapp
• url es la ruta de acceso 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 comprobar si tu AWP está instalada

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

Prueba la demostración.

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

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

Informa a la AWP sobre tu sitio web

Primero, deberás agregar vínculos de recursos digitales al servidor donde está tu AWP. sirvieron para los usuarios. Esto te ayudará a definir la relación entre tu sitio web y tu AWP y garantiza que solo tu sitio web pueda comprobar si 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 site proporciona la ruta de acceso completa al manifiesto de app web que realizará la verificación (no el manifiesto de 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, indícale a tu sitio web tu AWP agregar un manifiesto de aplicación web a tu página. El manifiesto debe Incluye la propiedad related_applications, un array que proporciona los detalles sobre tu AWP, incluidas 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",
  }]
}

Cómo comprobar si tu AWP está instalada

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

Prueba la demostración.

Llamando a getInstalledRelatedApps()

Llamar a navigator.getInstalledRelatedApps() muestra 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 aplicaciones, solo se mostrarán las tres primeras aplicaciones declaradas en el manifiesto de aplicaciones web tener en cuenta.

Como la mayoría de las otras APIs web potentes, la API de getInstalledRelatedApps() es Solo está disponible cuando se publica 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 tuvo preguntas similares. De lo contrario, pregúntale a tu Pregunta allí y asegúrate de etiquetarla con el progressive-web-apps. Nuestro equipo supervisa con frecuencia esa etiqueta e intenta responder tus preguntas.

Comentarios

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

• Informa un error en https://new.crbug.com. Incluye tanto detalles como puedas, proporcionar instrucciones simples para reproducir el error y ingresa Mobile>WebAPKs en el cuadro Componentes. Error funciona muy bien para compartir repros rápidos y sencillos.

Demuestra compatibilidad con la API

¿Planeas usar la API de getInstalledRelatedApps()? Tu público ayuda al equipo de Chrome a priorizar funciones y muestra otros proveedores de navegadores cuán importante es respaldarlos.

• Comparte cómo planeas usar la API en la conversación de Discourse de WICG.
• Envía un tweet a @ChromiumDev con el hashtag #getInstalledRelatedApps y cuéntanos dónde y cómo la utilizas.

Vínculos útiles

• Explicación pública de la API de getInstalledRelatedApps()
• Borrador de especificaciones
• Seguimiento de errores
• Entrada de ChromeStatus.com
• Componente de parpadeo: Mobile>WebAPKs

Gracias

Queremos dar un agradecimiento especial a Sunggook Chue de Microsoft por ayudarme con los detalles. para probar apps de Windows, y Rayan Kanso para obtener ayuda con los detalles de Chrome.