Completa tareas rápidamente con accesos directos a aplicaciones

Los accesos directos a aplicaciones brindan acceso rápido a algunas acciones comunes que los usuarios necesitan con frecuencia.

François Beaufort

Jungkee Song

Para mejorar la experiencia productividad y facilitar la reactivación de la participación con tareas clave, el plataforma web ahora admite accesos directos a aplicaciones. Permiten que los desarrolladores web ofrezcan 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: conocerá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 para mejorar la experiencia la productividad y el compromiso con la Web. .

Para invocar el menú de accesos directos a aplicaciones, debes hacer clic con el botón derecho en el ícono de la app que aparece en la barra de tareas. (Windows) o a la estación de carga (macOS) en el escritorio del usuario, o toca y con el botón de la app ícono de selector en Android.

Menú de accesos directos a aplicaciones abierto en Android

Menú de accesos directos a aplicaciones abierto en Windows

El menú de accesos directos a aplicaciones solo se muestra para las apps web progresivas que se instalada en el escritorio o dispositivo móvil del usuario. Consulta la sección Instalación de nuestra guía "Aprender sobre la AWP" para obtener información sobre los requisitos de instalación.

Cada atajo a una app expresa un intent de usuario, cada uno de los cuales se asocia con un URL dentro del alcance de tu aplicación web. La URL se abre cuando un usuario la activa el atajo 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)

Nota: Muchas gracias a los empleados de Intel y Microsoft Edge por diseñar y estandarizar los accesos directos a aplicaciones. Chrome depende de una comunidad de confirmadores que trabajan juntos para hacer avanzar el proyecto de Chromium. No todos los confirmadores de Chromium son empleados de Google, y estos colaboradores merecen un reconocimiento especial.

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 sobre tu app web y cómo debe comportarse cuando instalada en el escritorio o dispositivo móvil del usuario. Más concretamente, son declarada en el miembro del array shortcuts. A continuación, se incluye una 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 url. El uso de otros miembros es opcional.

name

La etiqueta legible para el acceso directo a una app cuando que se le muestran al usuario.

short_name (opcional)

La etiqueta legible por humanos que se usa donde el espacio es limitado. Se recomienda que proporciones, aunque sea 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 puede estar expuesto a tecnología de accesibilidad. en el futuro.

url

La URL que se abre cuando un usuario activa la app atajo. Esta URL debe existir dentro del alcance del manifiesto de la app web. Si es 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 Incluye las propiedades src y sizes. A diferencia de los íconos del manifiesto de las aplicaciones web, el El campo type de 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, 36 x 36, íconos de 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 píxeles). De lo contrario, se recomienda que uses un solo ícono de 192 x 192 píxeles.

Como medida de calidad, los iconos 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 por 72 píxeles. (esto se deriva de la fórmula para convertir unidades dp en unidades de píxeles).

Cómo probar los accesos directos a aplicaciones

Para verificar que los accesos directos de tu app estén configurados correctamente, usa el panel Manifest en la sección Panel Application de Herramientas para desarrolladores.

Combinaciones de teclas que se muestran en Herramientas para desarrolladores

Este panel proporciona una versión en lenguaje natural de muchos de los archivos propiedades, incluidos los accesos directos a aplicaciones. Facilita la verificación de que todos los los íconos de acceso directo, si se proporcionan, se cargan correctamente.

Es posible que los accesos directos a aplicaciones no estén disponibles de inmediato para todos los usuarios porque el modo progresivo Las actualizaciones de apps web se limitan a una vez al día. Obtén más información sobre Cómo controla Chrome las actualizaciones del manifiesto de apps 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 la cantidad de accesos directos a aplicaciones que se muestran varía según la plataforma. Chrome y Edge activados Por ejemplo, Windows limita el número de accesos directos a aplicaciones a 10, mientras que Chrome para Pantalla 3 solo para Android. Antes de Chrome 92 para Android 7, se permitían 4 versiones. Chrome 92 agregó un acceso directo a la configuración del sitio, tomando uno de los accesos directos disponibles ranuras 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 lo hagan. siempre sea visible. Por ejemplo, macOS no admite íconos en el conector. el menú de combinaciones de teclas. Usa nombres distintos para cada acceso directo a la app.

Cómo medir el uso de accesos directos a aplicaciones

Debes anotar las entradas de 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.

Navegadores compatibles

• (96)
• (96)
• ×
• 17.4

Origen

Se abrió el menú de accesos directos a aplicaciones en ChromeOS

Compatibilidad con la Actividad web de confianza

Bubblewrap, la herramienta recomendada para compilar apps para Android que usan la Web de confianza Activity, lee los accesos directos a aplicaciones desde el manifiesto de la aplicación web y automáticamente genera la configuración correspondiente para la app para Android. Ten en cuenta que los íconos para los accesos directos a aplicaciones son obligatorios y deben tener al menos 96 x 96 píxeles de Envoltorio de burbujas.

PWABuilder, una excelente herramienta para convertir fácilmente una app web progresiva en una app web de confianza La Actividad web admite accesos directos a aplicaciones con algunas advertencias.

Para los desarrolladores que integran la Actividad web de confianza manualmente en su dispositivo Android app, puedes usar los atajos de apps para Android para implementar el mismo los comportamientos del modelo.

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 de parpadeo: UI>Browser>WebAppInstalls