{"id":7595,"date":"2020-10-26T18:40:50","date_gmt":"2020-10-26T17:40:50","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=7595"},"modified":"2020-10-26T18:41:49","modified_gmt":"2020-10-26T17:41:49","slug":"pwa-add-shortcuts-to-your-application","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/tutorials\/pwa-add-shortcuts-to-your-application","title":{"rendered":"PWA – Add shortcuts to your application"},"content":{"rendered":"

You have probably already used these shortcuts available at “force touch” or “long touch” on your mobile application icons? It’s a way to access shortcuts inside your application to quickly access a section, or directly start a more precise action. It is now possible to do this for your Progressive Web App (PWA).<\/p>\n

<\/p>\n

Note:<\/strong> At the time of writing these lines, this feature is not yet functional on all browsers. Only the 86+ version of Chrome Android, and Edge seems to include this feature.<\/p>\n

What do PWA Shortcuts look like?<\/h2>\n

PWA (Progressive Web App) Shortcuts, are a good way to provide quick access to a few well-defined features of your Progressive Web App.
\nI’ve been working on it recently for a small WordPress plugin website of share buttons<\/a> to do some testing. I’ve implemented 2 shortcuts which look like this, in image and video.<\/p>\n

\"\" \"\"<\/p>\n

Here are two videos of PWA Shortcuts in their natural environment, one when you activate one of the shortcuts, the other shows you how PWA Shortcuts work like the native versions of applications: you can layout them on your phone’s homepage, and they can even have their own icons.<\/p>\n

https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/10\/pwa-open-shortcut.mp4<\/a><\/video><\/div>\n
https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/10\/pwa-shortcuts-on-home.mp4<\/a><\/video><\/div>\n

How to create a PWA shortcut?<\/h2>\n

The creation of a shortcut for a Progressive Web App is done via the manifest.json (or site.webmanifest) file which already declares several essential elements for your web application, such as: the name of the application, its theme color, screenshots, the notion of start_url<\/code>, etc.<\/p>\n

Webmanifest to create a PWA Shortcut<\/h3>\n

In this list, it is therefore necessary to add the notion of shortcuts, if you feel the need for it for your users, of course.<\/p>\n

{    "name": "Nobs - Share Buttons",    "short_name": "Nobs",    "icons": [        {            "src": "\/android-chrome-192x192.png",            "sizes": "192x192",            "type": "image\/png"        },        {            "src": "\/android-chrome-384x384.png",            "sizes": "384x384",            "type": "image\/png"        }    ],    "theme_color": "#067FA5",    "background_color": "#ffffff",    "display": "standalone",    "start_url": "https:\/\/sharebuttons.social\/",    "url" : "https:\/\/sharebuttons.social",    "lang": "English",    "screenshots" : [        {            "src": "\/assets\/img\/screenshot-1.jpg",            "sizes": "1280x800",            "type": "image\/jpg"        },        {            "src": "\/assets\/img\/screenshot-2.jpg",            "sizes": "1280x800",            "type": "image\/jpg"        }    ],    "categories" : [        "navigation",        "lifestyle",        "personalization",        "productivity",        "social",        "utilities"    ],    "shortcuts": [        {            "name": "Features",             "description": "A list of plugin features.",            "url": "\/features.html",            "icons": [                {                    "src": "\/assets\/img\/picto-feat.png",                    "type": "image\/png",                    "purpose": "any"                }            ]        },        {            "name": "Pricing",             "description": "The plugin offers",            "url": "\/free-plugin.html",            "icons": [                {                    "src": "\/assets\/img\/picto-price.png",                    "type": "image\/png",                    "purpose": "any"                }            ]        }    ] }<\/code><\/pre> 
 Nobs - Social Share Buttons .webmanifest file<\/span> <\/div> <\/div>\n
As you can see on the highlighted lines of code in this file extracted from the mentioned web site, it is an array in JSON format allowing you to list the shortcuts you want to declare. You will find there, for each item<\/a>:<\/p>\n