Definir accesos directos de aplicaciones

Los accesos directos de la aplicación permiten a los usuarios realizar tareas comunes de forma más rápida y sencilla y pueden aumentar su interacción con una aplicación.

En dispositivos móviles, normalmente se puede acceder a los accesos directos presionando durante mucho tiempo un icono de la aplicación. En Windows, los accesos directos se integran como listas de accesos directos. Las listas de accesos emergentes definen menús emergentes que aparecen al hacer clic con el botón secundario en un icono de la menú Inicio o al hacer clic con el botón secundario en un icono de la barra de tareas.

En la siguiente figura se muestran los accesos directos Microsoft Edge, en iOS:

Accesos directos Microsoft Edge en iOS.

La siguiente figura muestra una lista de saltos en la aplicación Webboard, en Windows:

Una lista de saltos en la aplicación Webboard en Windows.

Las aplicaciones web progresivas (PWA) también pueden definir tareas comunes como accesos directos en el manifiesto de aplicación web.

Definir accesos directos

La definición de accesos directos se realiza mediante el shortcuts miembro del manifiesto. Este miembro es una matriz que puede contener varios accesos directos. Cada acceso directo es básicamente una dirección URL que se solicita cuando se usa el acceso directo y se inicia la aplicación.

{
    "shortcuts" : [
        {
            "name": "Today's agenda",
            "url": "/today",
            "description": "List of events planned for today"
        },
        {
            "name": "New event",
            "url": "/create/event"
        },
        {
            "name": "New reminder",
            "url": "/create/reminder"
        }
    ]
}

Se pueden usar las siguientes propiedades:

Propiedad Detalles
name Cadena que se muestra al usuario en listas de saltos o en el menú contextual.
short_name Cadena que se muestra cuando hay espacio insuficiente para mostrar el nombre completo del acceso directo.
description Cadena que describe el propósito del acceso directo. A la cadena se puede obtener acceso mediante tecnología de asistencia.
url Uri de la aplicación web que se abre cuando se activa el acceso directo.
icons Un conjunto de iconos que representa el acceso directo.

Para obtener más información, vea accesos directos en MDN.

Depurar accesos directos

Puede probar que los accesos directos están configurados correctamente mediante el panel Aplicación de DevTools.

Para probar que los accesos directos están configurados correctamente:

  1. En Microsoft Edge, ve a la aplicación.
  2. Abra DevTools, como presionando Ctrl + Shift + I (en Windows/Linux) o Command + Option + I (en macOS).
  3. En la barra de herramientas principal, seleccione la herramienta Aplicación. Si es necesario, haga clic en Más herramientas (+) y, a continuación, seleccione Aplicación.
  4. En la herramienta Aplicación, seleccione Manifiesto.
  5. Desplácese hacia abajo para mostrar la lista de accesos directos.

Los accesos directos se enumeran en el panel Aplicación.

Para obtener más información sobre cómo usar el panel Aplicación para depurar pwas, vea Depurar aplicaciones web progresivas.