Los atajos de aplicaciones brindan acceso rápido a un puñado de acciones comunes que los usuarios necesitan con frecuencia.
Actualizado
Aplicaciones web progresivas
Para mejorar la productividad de los usuarios y facilitar la participación en las tareas clave, la plataforma web ahora admite accesos directos a aplicaciones. Permiten a los desarrolladores web proporcionar acceso rápido a un puñado de acciones comunes que los usuarios necesitan con frecuencia.
En el momento de redactar este artículo, los accesos directos a aplicaciones están disponibles en Android (Chrome 84) y Windows (Chrome 85 y Edge 85).
Este artículo le enseñará cómo definir esos accesos directos a aplicaciones. Además, aprenderá algunas de las mejores prácticas asociadas.
Acerca de los atajos de aplicaciones
Los accesos directos a aplicaciones ayudan a los usuarios a iniciar rápidamente tareas comunes o recomendadas dentro de su aplicación web. El fácil acceso a esas tareas desde cualquier lugar en el que se muestre el icono de la aplicación mejorará la productividad de los usuarios y aumentará su compromiso con la aplicación web.
El menú de accesos directos de la aplicación se invoca haciendo clic con el botón derecho en el icono de la aplicación en la barra de tareas (Windows) o en el dock (macOS) en el escritorio del usuario, o presionando prolongadamente el icono del iniciador de la aplicación en Android.
El menú de accesos directos de la aplicación se muestra solo para las aplicaciones web progresivas que están instaladas en el escritorio o dispositivo móvil del usuario. Consulte ¿Qué se necesita para ser instalable? para conocer los requisitos de instalación.
Cada acceso directo de la aplicación expresa la intención del usuario, cada uno de los cuales está asociado con una URL dentro del alcance de su aplicación web. La URL se abre cuando los usuarios activan el acceso directo de la aplicación. Algunos ejemplos de accesos directos a aplicaciones son los siguientes:
- Elementos de navegación de nivel superior (p. Ej., Inicio, cronograma, pedidos recientes)
- Buscar
- Tareas de ingreso de datos (por ejemplo, redactar un correo electrónico o tweet, agregar un recibo)
- Actividades (p. Ej., Iniciar un chat con los contactos más populares)
Muchas gracias a la gente de Microsoft Edge e Intel por diseñar y estandarizar los accesos directos a las aplicaciones. Chrome depende de una comunidad de comprometidos que trabajen juntos para hacer avanzar el proyecto Chromium. No todos los usuarios de Chromium son Google y estos colaboradores merecen un reconocimiento especial.
Definir accesos directos a aplicaciones en el manifiesto de la aplicación web
Los accesos directos a aplicaciones se definen opcionalmente en el manifiesto de la aplicación web, un archivo JSON que le informa al navegador sobre su aplicación web progresiva y cómo debe comportarse cuando se instala en el escritorio o dispositivo móvil del usuario. Más concretamente, se declaran en el shortcuts miembro de la matriz. A continuación se muestra un ejemplo de un posible manifiesto de aplicación 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 de la shortcuts array es un diccionario que contiene al menos un
name y un url. Otros miembros son opcionales.
nombre
La etiqueta legible por humanos para el acceso directo de la aplicación cuando se muestra al usuario.
short_name (opcional)
La etiqueta legible por humanos utilizada donde el espacio es limitado. Se recomienda que lo proporcione, aunque es opcional.
Descripción (opcional)
El propósito legible por humanos del acceso directo a la aplicación. No se usa al momento de escribir este artículo, pero puede estar expuesto a tecnología de asistencia en el futuro.
url
La URL que se abre cuando un usuario activa el acceso directo de la aplicación. Esta URL debe existir dentro del alcance del manifiesto de la aplicación web. Si es una URL relativa, la URL base será la URL del manifiesto de la aplicación web.
iconos (opcional)
Una matriz de objetos de recursos de imágenes. Cada objeto debe incluir el src y un sizes propiedad. A diferencia de los iconos de manifiesto de aplicaciones web,
type de imagen es opcional.
Los archivos SVG no son compatibles en el momento de escribir este artículo, use PNG en su lugar.
Si desea iconos con píxeles perfectos, proporcione en incrementos de 48 dp (es decir, iconos de 36×36, 48×48, 72×72, 96×96, 144×144, 192×192 píxeles). De lo contrario, se recomienda que utilice un solo icono de 192×192 píxeles.
Como medida de calidad, los íconos deben tener al menos la mitad del tamaño ideal del dispositivo en Android, que es 48dp. Por ejemplo, para mostrar en un pantalla xxhdpi, el icono debe tener al menos 72 por 72 píxeles. (Esto se deriva de la
fórmula para convertir unidades dp para unidades de píxeles).
Prueba los atajos de tu aplicación
Para verificar que los accesos directos de su aplicación estén configurados correctamente, use el Manifiesto panel en el
Solicitud panel de DevTools.
Este panel proporciona una versión legible por humanos de muchas de las propiedades de su manifiesto, incluidos los accesos directos a aplicaciones. Facilita la verificación de que todos los iconos de acceso directo, si se proporcionan, se cargan correctamente.
El soporte de DevTools para accesos directos a aplicaciones está disponible en Chrome 84 y Edge 84 y versiones posteriores.
Es posible que los accesos directos a aplicaciones no estén disponibles de inmediato para todos los usuarios porque las actualizaciones de aplicaciones web progresivas están limitadas a una vez al día. Puede encontrar más detalles en este
artículo.
Mejores prácticas
Ordenar atajos de aplicaciones por prioridad
Le recomendamos que ordene los accesos directos a aplicaciones por prioridad, y que los accesos directos a aplicaciones más importantes aparezcan primero en la shortcuts matriz, ya que el límite en el número de accesos directos de aplicaciones que se muestran varía según la plataforma. Chrome y Edge en Windows, por ejemplo, limitan la cantidad de accesos directos a aplicaciones a 10, mientras que Chrome para Android solo tiene en cuenta los primeros 4 accesos directos a aplicaciones.
Utilice distintos nombres de atajos de aplicaciones
No debe confiar en los íconos para diferenciar los atajos de aplicaciones, ya que es posible que no siempre estén visibles. Por ejemplo, macOS no admite iconos en el menú de accesos directos de la base. Utilice nombres distintos para cada acceso directo de la aplicación.
Medir el uso de accesos directos a aplicaciones
Debes anotar los accesos directos de la aplicación url entradas como lo harías con
start_url para fines analíticos (p. ej. url: "/my-shortcut?utm_source=homescreen").
Soporte de navegador
Los accesos directos a aplicaciones están disponibles en Android (Chrome 84) y Windows (Chrome 85 y Edge 85). Seguirá más soporte para plataformas de escritorio.
Soporte de actividad web confiable
Plástico de burbujas, la herramienta recomendada para crear aplicaciones de Android que utilizan Trusted Web Activity, lee los accesos directos de la aplicación desde el manifiesto de la aplicación web y genera automáticamente la configuración correspondiente para la aplicación de Android. Tenga en cuenta que los iconos de los accesos directos a aplicaciones necesario y debe tener al menos 96 por 96 píxeles en Bubblewrap.
PWABuilder, una gran herramienta para convertir fácilmente una aplicación web progresiva en una actividad web confiable, admite accesos directos a aplicaciones con algunos advertencias.
Para los desarrolladores que integran Trusted Web Activity manualmente en su aplicación de Android, Atajos de aplicaciones de Android se puede utilizar para implementar los mismos comportamientos.
Muestra
Revisar la muestra de accesos directos de aplicaciones y es fuente.
Enlaces Útiles
