Adding app shortcuts / Jumplist shortcuts to PWA

06 Nov 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 userful. 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.

How 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,

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

"shortcuts": [
    {
        "name": "Home",
        "short_name": "Home",
        "description": "Homepage of kolappan.dev",
        "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,

Screenshot of PWA app shortcuts in Android
PWA app shortcuts in Android

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.

Tags: PWA Web-Technologies View Blog Archive

Loading Comments