Los accesos directos a aplicaciones brindan acceso rápido a algunas acciones comunes que los usuarios necesitan con frecuencia.
Para mejorar la productividad de los usuarios y facilitar que vuelvan a participar 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 los accesos directos a aplicaciones. Además, aprenderás algunas prácticas recomendadas asociadas.
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 aplicación web. El fácil acceso a esas tareas desde cualquier lugar en el que se muestre el ícono de la app mejorará la productividad de los usuarios y aumentará su participación en ella.
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 Dock (macOS) en el escritorio del usuario, o bien 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 se instalan en el escritorio o dispositivo móvil del usuario. Consulta Instalación en nuestro módulo "Aprende sobre la AWP" para conocer los requisitos de instalación.
Cada acceso directo a la app expresa un intent de usuario, cada uno de los cuales 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 tweeter, o 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
De manera opcional, los accesos directos a apps se definen en el manifiesto de apps web, un archivo JSON que informa al navegador sobre tu app web y cómo debe comportarse cuando se instala en el escritorio o dispositivo móvil del usuario. Más específicamente, 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. El uso de otros miembros es opcional.
name- Es la etiqueta legible para el acceso directo a la app cuando se muestra al usuario.
short_name(opcional)- La etiqueta legible por humanos que se usa donde el espacio es limitado. Te recomendamos que lo proporciones, aunque es opcional.
description(opcional)- El propósito legible por humanos del acceso directo a la app. No se utiliza en el momento de la redacción, pero se puede exponer 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 app web. Si se trata de una URL relativa, la URL base será la URL del manifiesto de la app web.
icons(opcional)Es un array de objetos de recursos de imagen. Cada objeto debe incluir las propiedades
srcysizes. A diferencia de los íconos de manifiesto de apps web, eltypede la imagen es opcional. Los archivos SVG no son compatibles al momento de escribirlos. En su lugar, usa PNG.Si quieres íconos de píxeles perfectos, proporciónalos en incrementos de 48 dp (es decir, íconos de 36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144 o 192 x 192 píxeles). De lo contrario, se recomienda usar un solo ícono de 192 x 192 píxeles.
Como medida de calidad, los íconos deben ser, al menos, la mitad del tamaño ideal del dispositivo en Android, que es de 48 dp. Por ejemplo, para mostrarse en una pantalla xxhdpi, el ícono debe tener al menos 72 x 72 píxeles. (se obtiene de la fórmula para convertir unidades dp en unidades de píxeles).
Cómo probar los accesos directos a aplicaciones
Para verificar que las combinaciones de teclas de tu app estén configuradas correctamente, usa el panel Manifest en el panel Application de Herramientas para desarrolladores.
En este panel, se proporciona una versión legible de muchas de las propiedades de tu manifiesto, incluidos los accesos directos a aplicaciones. Facilita la verificación de que todos los íconos de combinación de teclas, si se proporcionan, se carguen correctamente.
Es posible que los accesos directos a apps 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
Ordenar los accesos directos a aplicaciones por prioridad
Los accesos directos se muestran en el orden en que los defines en el manifiesto. Te recomendamos que ordenes los accesos directos a aplicaciones por prioridad, ya que el límite de la cantidad de accesos directos que se muestran varía según la plataforma. Por ejemplo, Chrome y Edge en Windows limitan la cantidad de accesos directos a aplicaciones 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 tomó una de las ranuras disponibles para la app.
Usa nombres distintos para los accesos directos a aplicaciones
No debes confiar en 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 con 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.
Compatibilidad con la Actividad web de confianza
Bubblewrap, la herramienta recomendada para compilar apps para Android que usan Actividad web de confianza, lee accesos directos a aplicaciones 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 Bubblewrap.
PWABuilder es una herramienta excelente para convertir fácilmente una app web progresiva en una actividad web de confianza. Además, es compatible con accesos directos a aplicaciones con algunas advertencias.
En el caso de los desarrolladores que integran la Actividad web de confianza de forma manual en su aplicación para Android, se pueden usar atajos de apps para Android para implementar los mismos comportamientos.
Ejemplo
Consulta la muestra de accesos directos a aplicaciones y su fuente.