Completa tareas rápidamente con accesos directos a aplicaciones

Los atajos de apps brindan acceso rápido a algunas acciones comunes que los usuarios necesitan con frecuencia.

François Beaufort

Jungkee Song

Para mejorar la productividad de los usuarios y facilitar el restablecimiento de la participación en tareas clave, la plataforma web ahora admite atajos de apps. Permiten que los desarrolladores web proporcionen 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 de la app 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 aumentará su participación en 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 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 de la app solo se muestra para las aplicaciones web progresivas que están instaladas en el dispositivo de escritorio o móvil del usuario. Consulta Instalación en nuestro módulo "Aprende sobre la AWP" para conocer los requisitos de instalación.

Cada atajo de la app expresa una intención del usuario, cada una de las cuales está asociada con una URL dentro del alcance de tu app web. La URL se abre cuando un usuario activa el atajo de la app. Estos son algunos ejemplos de accesos directos de apps:

• Elementos de navegación de nivel superior (p. ej., página principal, línea de tiempo, pedidos recientes)
• Buscar
• Tareas de entrada de datos (p. ej., escribir un correo electrónico o un tweet, agregar un recibo)
• Actividades (p. ej., iniciar un chat con los contactos más populares)

Define accesos directos a la app en el manifiesto de la app web

De manera opcional, los atajos de la app se definen en el manifiesto de la app web, un archivo JSON que le informa al navegador sobre tu app web y cómo debe comportarse cuando se instala en el dispositivo de escritorio o 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 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 del array shortcuts es un diccionario que contiene al menos un name y un url. Los demás miembros son opcionales.

name

Es la etiqueta legible por humanos del atajo de la app cuando se muestra al usuario.

short_name (opcional)

Es la etiqueta legible por humanos que se usa cuando el espacio es limitado. Te recomendamos que lo proporciones, aunque sea opcional.

description (opcional)

Es el propósito legible por humanos del atajo de la app. No se usa en el momento de escribir este artículo, pero es posible que se exponga a la tecnología de accesibilidad en el futuro.

url

La URL que se abre cuando un usuario activa el atajo de 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 src y una propiedad sizes. A diferencia de los íconos de manifiesto de apps web, el type de la imagen es opcional. En el momento de escribir este artículo, los archivos SVG no son compatibles. En su lugar, usa PNG.

Si deseas í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 y 192 x 192 píxeles). De lo contrario, se recomienda que uses un solo ícono de 192 × 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 × 72 píxeles. (Esto se deriva de la fórmula para convertir unidades de dp en unidades de píxeles).

Cómo probar los accesos directos a aplicaciones

Para verificar que los atajos de tu app estén configurados correctamente, usa el panel Manifiesto en el panel Aplicación de DevTools.

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 atajos de la app no estén disponibles de inmediato para todos los usuarios, ya que las actualizaciones de la app web progresiva se limitan a una vez al día. Obtén más información sobre cómo Chrome controla las actualizaciones del manifiesto de la app web.

Prácticas recomendadas

Ordenar 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 la app por prioridad, ya que el límite de la cantidad de accesos directos a la app 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. Chrome 92 agregó un atajo a la configuración del sitio, que ocupa uno de los espacios de acceso directo disponibles para la app.

Usa nombres distintos para los accesos directos a aplicaciones

No debes depender de los íconos para diferenciar los accesos directos de la app, ya que es posible que no siempre sean visibles. Por ejemplo, macOS no admite íconos en el menú de combinaciones de teclas del conector. Usa nombres distintos para cada atajo de la app.

Cómo medir el uso de los accesos directos a aplicaciones

Debes anotar las entradas url de los accesos directos de la app como lo harías con start_url con fines de estadísticas (p. ej., url: "/my-shortcut?utm_source=homescreen").

Navegadores compatibles

Las combinaciones de teclas de la app están disponibles en las plataformas y versiones que se indican a continuación.

Compatibilidad con Trusted Web Activities

Bubblewrap, la herramienta recomendada para compilar apps para Android que usan Trusted Web Activity, lee los atajos de la app 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 atajos de la app son obligatorios y deben tener al menos 96 por 96 píxeles en Bubblewrap.

PWABuilder, una excelente herramienta para convertir fácilmente una app web progresiva en una actividad web confiable, admite atajos de apps con algunas restricciones.

En el caso de los desarrolladores que integran Trusted Web Activity de forma manual en su aplicación para Android, se pueden usar los atajos de la app para Android para implementar los mismos comportamientos.

Muestra

Consulta la muestra de accesos directos a aplicaciones y su fuente.

Vínculos útiles

• MDN
• Spec
• Ejemplo de accesos directos a aplicaciones | Fuente de muestra de accesos directos a aplicaciones
• Componente Blink: UI>Browser>WebAppInstalls