Los accesos directos a aplicaciones proporcionan acceso rápido a algunas acciones comunes que los usuarios necesitan con frecuencia.
Para mejorar la productividad de los usuarios y facilitar la reactivación de la participación con tareas clave, la plataforma web ahora admite accesos directos a aplicaciones. Permiten a los desarrolladores web proporcionar acceso rápido a algunas acciones comunes que los usuarios necesitan con frecuencia.
En este artículo, aprenderás a definir accesos directos a aplicaciones. Además, conocerás algunas prácticas recomendadas relacionadas.
Información acerca de los accesos directos a aplicaciones
Los accesos directos a aplicaciones ayudan a los usuarios a iniciar rápidamente tareas comunes o recomendadas dentro de tu app web. El acceso fácil a esas tareas desde cualquier lugar donde se muestre el ícono de la app mejorará la productividad de los usuarios y su interacción con la app web.
Para invocar el menú de accesos directos a aplicaciones, haz clic con el botón derecho en el ícono de la app en la barra de tareas (Windows) o en el conector (macOS) del escritorio del usuario, o mantén presionado el ícono de selector de la app en Android.
El menú de accesos directos a aplicaciones solo se muestra para las apps web progresivas que están instaladas en la computadora de escritorio o el dispositivo móvil del usuario. Consulta la sección Instalación en nuestro módulo "Información sobre la AWP" para obtener más información sobre los requisitos de instalación.
Cada acceso directo a la app expresa un intent del usuario, el cual está asociado con una URL dentro del alcance de tu app web. La URL se abre cuando un usuario activa el acceso directo a la app. Estos son algunos ejemplos de accesos directos a aplicaciones:
- Elementos de navegación de nivel superior (p.ej., página principal, cronograma, pedidos recientes)
- Buscar
- Tareas de ingreso de datos (p.ej., redactar un correo electrónico o tweet, agregar un recibo)
- Actividades (p.ej., iniciar un chat con los contactos más populares)
Cómo definir accesos directos a aplicaciones en el manifiesto de aplicaciones web
Los accesos directos a aplicaciones se definen de forma opcional en el manifiesto de aplicaciones web, un archivo JSON que le informa al navegador acerca de tu aplicación web y cómo debería comportarse cuando se instala en la computadora o el dispositivo móvil del usuario. De manera más específica, se declaran en el miembro del array shortcuts. A continuación, se muestra un ejemplo de un posible manifiesto de app web.
{
"name": "Player FM",
"start_url": "https://player.fm?utm_source=homescreen",
…
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later?utm_source=homescreen",
"icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
},
{
"name": "View Subscriptions",
"short_name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "/subscriptions?utm_source=homescreen",
"icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
}
]
}
Cada miembro del array shortcuts es un diccionario que contiene al menos un name y un url. La opción de otros miembros es opcional.
name- Es la etiqueta legible por humanos para el acceso directo a la app cuando se le muestra al usuario.
short_name(opcional)- Es la etiqueta legible por humanos que se usa cuando el espacio es limitado. Se recomienda que lo proporciones, aunque es opcional.
description(opcional)- Es el propósito legible por humanos del acceso directo a la app. No se usa en el momento de la redacción, pero es posible que se exponga a tecnología de accesibilidad en el futuro.
url- Es la URL que se abre cuando un usuario activa el acceso directo a la app. Esta URL debe existir dentro del alcance del manifiesto de la aplicación web. Si se trata de una URL relativa, la URL base será la URL del manifiesto de la app web.
icons(opcional)Un array de objetos de recursos de imagen. Cada objeto debe incluir las propiedades
srcysizes. A diferencia de los íconos del manifiesto de la app web, eltypede la imagen es opcional. Los archivos SVG no son compatibles al momento de escribirlos. En su lugar, usa PNG.Si quieres íconos perfectos, proporciónalos en incrementos de 48 dp (es decir, 36 × 36, 48 × 48, 72 × 72, 96 × 96, 144 × 144 o 192 × 192 píxeles). De lo contrario, te recomendamos que uses un solo ícono de 192 x 192 píxeles.
Como medida de calidad, los íconos deben ser de 48 dp como mínimo del tamaño ideal del dispositivo en Android. Por ejemplo, para que se muestre en una pantalla xxhdpi, el ícono debe tener al menos 72 x 72 píxeles. (Derivada de la fórmula para convertir unidades dp para unidades de píxeles)
Cómo probar los accesos directos a aplicaciones
Para verificar que los accesos directos a aplicaciones estén configurados correctamente, usa el panel Manifiesto del panel Aplicación de Herramientas para desarrolladores.
Este panel proporciona una versión legible de muchas de las propiedades de tu manifiesto, incluidas las combinaciones de teclas a las apps. Facilita la verificación de que todos los íconos de accesos directos, si se proporcionan, se carguen correctamente.
Es posible que los accesos directos a aplicaciones no estén disponibles de inmediato para todos los usuarios porque las actualizaciones de las apps web progresivas se limitan a una vez al día. Obtén más información sobre cómo Chrome maneja las actualizaciones del manifiesto de la app web.
Prácticas recomendadas
Ordena los accesos directos a aplicaciones por prioridad
Las combinaciones de teclas se muestran en el orden en que las defines en el manifiesto. Te recomendamos que ordenes los accesos directos a aplicaciones por prioridad porque el límite de la cantidad de accesos directos a aplicaciones que se muestran varía según la plataforma. Por ejemplo, Chrome y Edge en Windows limitan la cantidad de combinaciones de teclas a 10, mientras que Chrome para Android solo muestra 3. Antes de Chrome 92 para Android 7, se permitían 4 versiones. En Chrome 92, se agregó un acceso directo a la configuración del sitio y se tomó uno de los espacios disponibles para accesos directos de la app.
Usa nombres distintos de accesos directos a aplicaciones
No debes depender de los íconos para diferenciar los accesos directos a aplicaciones, ya que es posible que no siempre estén visibles. Por ejemplo, macOS no admite íconos en el menú de combinaciones de teclas del conector. Usa nombres distintos para cada acceso directo a la app.
Cómo medir el uso de accesos directos a aplicaciones
Debes anotar las entradas url de accesos directos a aplicaciones como lo harías con start_url para fines estadísticos (p.ej., url:
"/my-shortcut?utm_source=homescreen").
Navegadores compatibles
Los accesos directos a aplicaciones están disponibles en las plataformas y versiones que se indican a continuación.
Asistencia de Trusted Web Activity
Bubblewrap, la herramienta recomendada para compilar apps para Android que usen Trusted Web Activity, lee los accesos directos a las apps desde el manifiesto de la app web y genera automáticamente la configuración correspondiente para la app para Android. Ten en cuenta que los íconos de los accesos directos a apps son obligatorios y deben tener al menos 96 por 96 píxeles en Burbblewrap.
PWABuilder, una gran herramienta para convertir fácilmente una app web progresiva en una actividad web de confianza, admite accesos directos a aplicaciones con algunas advertencias.
En el caso de los desarrolladores que integren la actividad web de confianza de forma manual en su aplicación para Android, se pueden usar los accesos directos a aplicaciones para Android a fin de implementar los mismos comportamientos.
Ejemplo
Consulta la muestra de accesos directos a aplicaciones y su fuente.