Level Up Your Progressive Web Application With Shortcuts
Last Updated -
Making your Progressive Web App (PWA) easier to use will increase adoption and provide incentive to install. Shortcuts are a way to surface common activities to the homescreen and desktop.
Many native applications have enjoyed the ability to define shortcut actions to allow users to create new records, search a database and more. Until now this has been reserved to native apps.
Recent versions of Chrome and Edge have added support for shortcuts. These are defined in the web manifest file.
A user must install or add your PWA to their homescreen to enable this feature. That's because shortcuts are available through a context menu triggered from the PWA's icon.
Shortcuts are accessible through long press on phones and right-clicking on desktop. When a user does these actions on a PWA icon with shortcuts defined the user will see the links as an option on the context menu.
A shortcut link is a direct link to a URL. The URL can be any page in the site and include queryString parameters.
- How to Add Shortcuts to Your PWA
- How to Enable PWA Shortcuts
- What Sort of Targets Should Shortcuts Open?
- PWA Shortcut Browser Support
- Action Items
How to Add Shortcuts to Your PWA
It is easy to add shortcuts to your progressive web application. They are defined in a new manifest property, 'shortcuts'.
This property is an array of shortcut objects. You can define one or more shortcuts. Shortcuts should be listed in order of importance as the browser determines which shortcuts will be offered.
Each shortcut has a name, an optional description, a target URL and an array of icons. The icons follow the same object structure as the PWA icons.
"shortcuts": [
{
"name": "Shortcut name to show in the menu",
"description": "A description of what the shortcut does",
"url": "Link to shortcut",
"icons": [
{
"src": "/icons/play-later.svg",
"type": "image/svg+xml",
"purpose": "any"
}
]
}
]
The shortcut icons do not have to be the same icons used for the homescreen icon. They can be any icon you want. I do recommend using a maskable icon to get the best effect. You should also craft the icon to convey the shortcut's action.
As you can see in the example Twitter shortcut icon it conveys the concept of writing a new tweet visually.
The new shortcut property has been added to the web manifest specification.
There is no explicit limit to the number of shortcuts a PWA can define, it is left to the browser to determine how many to display. This is why you need to list shortcuts in order of importance.
Right now, I would recommend keeping shortcuts to 4 or less as this feature is rolling out.
It is also up to the browser to determine the appropriate way to display shortcuts. The specifications says the browser should display the shortcut list in a way consistent with the platform (operating system) expectations.
This is not the first time this sort of feature has been available to web sites. Internet Explorer had support for shortcuts or jump links before it was deprecated several years ago. Unfortunately very few sites leveraged this capability at the time.
Hopefully more sites will leverage PWA shortcuts.
A progressive web application needs to be added to the homescreen or installed before shortcuts are enabled. If there is no icon on the homescreen, start menu, desktop or taskbar there is no way to display shortcuts.
I think this feature can be used as an incentive to tease users to install a PWA to access these conviences. It is up to you, the site owner to determine how to promote this feature to the user.
You should also highlight this feature when a user installs your PWA so they are aware of this capability.
How to Enable PWA Shortcuts
As I am writing this article PWA Shortcuts are not generally available. Only Edge and Chrome development channel and canary versions offer shortcuts. But you also need to enable the feature via a flag.
To access the flag open edge://flags or chrome://flags (of course match the browser) and then search for shortcut. You will see the feature listed.
Select 'enable' from the corresponding dropdown. You should then see a button to restart the browser. Click or press the button to restart the browser and you should fine support for shortcuts enabled.
If you have an installed PWA and add shortcuts to the web manifest it may take a few days for the update to matriculate to the installed instance. I am told it will eventually update as the latest web manifest file is ingested and processed.
What Sort of Targets Should Shortcuts Open?
This depends on your PWA. Each one has its own personality and tasks and resources. First prioritize what content or actions are common entry points to yout application.
Twitter added shortcuts to create a new tweet and one for a direct message. These are both common activities users make when they open the application. The shortcuts mean users can now bypass the main news feed and directly access the form to perform these actions.
If you have multi-media, like a Spotify or a podcast application, you may want to add a shortcut to continue playing where the user last stopped.
On this site I am adding shortcuts to my main blog index and the contact form. Not really the sexiest shortcuts, but demonstrate the feature for now.
A good rule to determine the best PWA shortcuts is to review what features to you prioritize and make accessible in your application. If you have a link in an app bar or common navigation, then it might be a good candidate for a shortcut.
PWA Shortcut Browser Support
At the moment just Edge and Chrome support PWA shortcuts. At this time I have not discovered any signals FireFox, Opera, Samsung Internet or Safari are offering or have shortcuts on their roadmaps.
This does not surprise me as these other browsers are often behind the two market leaders. It also does not mean they will not ship support in the future.
Action Items
If you want a hook to encourage more brand engagement and homescreen installations, shortcuts are another benefit to offer users.
They are easy to add to your website and they trigger more app-like functionality.
