Adding app shortcuts / Jumplist shortcuts to PWA

Nov 06, 2020 by Kolappan N

Have you ever used Android’s app shortcuts or the Jump lists in Windows? They are handy links to go to a particular section of an application directly. I use them often particularly on Windows and find them greatly useful. It is now possible to do the same for your PWA and send users directly into their desired section of your webapp directly. Navbar items, Search buttons, major sections of your website are some of the best choices to add as a shortcut. Chrome 84 first introduced app shortcuts to Android and Chrome 85 expanded on this by adding Jumplists support on Windows and MAC.

Steps to add them

All you need to do is tweak your web manifest file a little bit. Add a shortcuts property to your web manifest file. It is an array of objects. The objects will contain the following fields,

name - Name that is displayed on the App shortcut or jump list.
short_name - This is shorter version of the name that is supposed to be shown in areas where needed.
url - The URL of the page to open for the corresponding shortcut.
icons - An icon for the shortcut. You can provide icons in multiple sizes. But it is enough to provide a single 192x192 icon. It keeps the things simple.
description - Might be used to provide accessibility services to end users.

Here is how it looks on my site’s web manifest,

"shortcuts": [
    {
        "name": "Home",
        "short_name": "Home",
        "description": "Homepage of kolappan.com",
        "url": "/",
        "icons": [{ "src": "/assets/shortcuts/home.png", "sizes": "192x192" }]
    },
    {
        "name": "Blog",
        "short_name": "Blog",
        "description": "Blog of Kolappan Nathan",
        "url": "/blog",
        "icons": [{ "src": "/assets/shortcuts/blog.png", "sizes": "192x192" }]
    }
    ,
    {
        "name": "Projects",
        "short_name": "Projects",
        "description": "Project details and Docs",
        "url": "/project",
        "icons": [{ "src": "/assets/shortcuts/projects.png", "sizes": "192x192" }]
    }
]

And here it is how it looks on an Android mobile,

The order in which they are present in the web.manifest file is the order in which they are presented. Make sure you order them in the order of your preference.