App shortcuts provide quick access to a handful of common actions that users frequently need.
Updated
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.
At the time of writing, app shortcuts are available on Android (Chrome 84) and Windows (Chrome 85 and Edge 85).
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.
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 Username, o presionando prolongadamente el icono del iniciador de la aplicación en 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 Url dentro del scope 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 tweet, agregar un recibo)
- Activities (eg, start a chat with the most popular contacts)
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.
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 browser 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.
DevTools support for app shortcuts is available in Chrome 84 and Edge 84 and later.
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
