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()?
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.
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 serplay
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.
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 serwindows
id
es el nombre de la familia de paquetes de tu app, unido por el valorId
de<Application>
en tu archivoPackage.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.
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 serwebapp
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
.
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 serwebapp
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.
- Comparte cómo planeas usar la API en la conversación del discurso de WICG.
- Envía un tweet a @ChromiumDev con el hashtag
#getInstalledRelatedApps
y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Explicación pública de la API de
getInstalledRelatedApps()
- Borrador de especificaciones
- Error de seguimiento
- Entrada de ChromeStatus.com
- Componente de Blink:
Mobile>WebAPKs
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.