Get things done quickly with app shortcuts

App shortcuts provide quick access to a handful of common actions that users frequently need.

May 20, 2020
Updated July 22, 2020

It appears in:
Progressive web applications

To improve user productivity and facilitate participation in key tasks, the web platform now supports application shortcuts. They allow web developers to provide quick access to a handful of common actions that users frequently need.

This article will teach you how to define those app shortcuts. Plus, you'll learn some of the associated best practices.

About application shortcuts

Application shortcuts help users quickly launch common or recommended tasks within their web application. Easy access to those tasks from anywhere the application icon is displayed will improve user productivity and increase their engagement with the web application.

The application shortcut menu is invoked by right-clicking the application icon on the taskbar (Windows) or the dock (macOS) on the user's desktop, or by long-pressing the launcher icon of the application on Android.

The application shortcut menu is displayed only for progressive web applications that are installed on the user's desktop or mobile device. See What does it take to be installable? for installation requirements.

Cada acceso directo de la aplicación expresa la intención del usuario, cada uno de los cuales está asociado con una UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo plus 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:

• Top-level navigation elements (eg, Home, schedule, recent orders)
• Look for
• Tareas de ingreso de datos (por ejemplo, redactar un correo electrónico o tweetUn tweet es un mensaje corto que puede ser enviado por medio de del servicio de microblogging Twitter. ¿Qué es un tweet? Un tweet es un mensaje de estado en Twitter que puede tener hasta 280 caracteres. Los tweets solían limitarse a 140 caracteres, pero esta cantidad se incrementó a 280 en septiembre de 2017. Debido al espacio limitado para el texto, las URLs para uso en tweets son normalmente plus, agregar un recibo)
• Activities (eg, start a chat with the most popular contacts)

Define application shortcuts in the web application manifest

Los accesos directos a aplicaciones se definen opcionalmente en el manifiesto de la aplicación web, un archivo JSON que le informa al browserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los plus 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 member of the matrix. Here is an example of a possible web application manifest.

{
"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" }]
}
]
}

Each member of the shortcuts array is a dictionary containing at least one
yam and a url. Other members are optional.

Name

The human-readable label for the application's shortcut when displayed to the user.

short_name (optional)

The human readable label used where space is limited. It is recommended that you provide it, although it is optional.

Description (optional)

The human-readable purpose of the application shortcut. Not used at the time of writing, but may be exposed to assistive technology in the future.

url

The URL that opens when a user activates the application shortcut. This URL must exist within the scope of the web application manifest. If it is a relative URL, the base URL will be the URL of the web application manifest.

icons (optional)

An array of image resource objects. Each object must include the src and a sizes property. Unlike web app manifest icons,
type Image is optional.

SVG files are not supported at the time of writing, please use PNG instead.

If you want pixel perfect icons, please provide in 48 dp increments (ie 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 pixel icons). Otherwise, it is recommended that you use a single 192 × 192 pixel icon.

As a measure of quality, the icons should be at least half the ideal size of the Android device, which is 48dp. For example, to display in a screen xxhdpi, the icon must be at least 72 by 72 pixels. (This is derived from the
formula to convert dp units for pixel units).

Try your application shortcuts

To verify that your app's shortcuts are configured correctly, use the Manifest panel in the
Request DevTools panel.

This panel provides a human-readable version of many of your manifest properties, including application shortcuts. Makes it easy to verify that all shortcut icons, if provided, load correctly.

App shortcuts may not be immediately available to all users because progressive web app updates are limited to once per day. You can find more details in this
Article.

Better practices

Sort app shortcuts by priority

We recommend that you sort your app shortcuts by priority, and that the most important app shortcuts appear first on the screen. shortcuts matrix, as the limit on the number of displayed app shortcuts varies by platform. Chrome and Edge on Windows, for example, limit the number of app shortcuts to 10, while Chrome for Android only takes into account the first 4 app shortcuts.

Use different app shortcut names

You shouldn't rely on icons to differentiate app shortcuts as they may not always be visible. For example, macOS doesn't support icons in the dock's shortcut menu. Use different names for each application shortcut.

Measure use of app shortcuts

You must write down the application shortcuts url inputs as you would with
start_url for analytical purposes (eg. url: "/ my-shortcut? utm_source = homescreen").

Browser support

App shortcuts are available on Android (Chrome 84) and Windows (Chrome 85 and Edge 85). More support for desktop platforms will follow.

Reliable web activity support

Bubble wrap, the recommended tool for building Android applications that use Trusted Web Activity, reads the application shortcuts from the web application manifest and automatically generates the corresponding settings for the Android application. Note that the application shortcut icons necessary and it must be at least 96 by 96 pixels in Bubblewrap.

PWABuilder, a great tool to easily turn progressive web app into reliable web activity, supports app shortcuts with some warnings.

For developers who manually integrate Trusted Web Activity into their Android application, Android app shortcuts can be used to implement the same behaviors.

Shows

Review the app shortcut sample And it is source.

Helpful Links