Quick App Shortcut: Angular PWA

Life is easy when you got shortcuts. Similarly you expect your application should have shortcut that land you directly on the page. This article explain you how to set shortcut in your application for Quick Navigation.

App shortcuts helps user to open most common page which is in demand. For example shopping application user often visit to trending deals, my order, contact us etc. So instead of going by the flow app gives a choice to open those page directly.

app-shortcut
App Shortcut on Mobile

pwa-desktop
App Shortcut on Desktop

Shortcuts menu can be open by right click the app icon in the taskbar on Windows, dock on macOS and long press the launcher icon on Android.

1. Installing PWA to Application

App shortcut require to have PWA. To install PWA its very easy in Angular. Follow steps of official documentation https://angular.io/guide/service-worker-getting-started

Once you complete with installation you will observe that few extra files are added into the project. Out of which there is one file which is added under src folder is manifest.webmanifest. If you are completely new to webmanifest then you can read it over here.

Run PWA application using below command and it will prompt to install PWA in your phone/desktop.

Read also Tips and Tricks for Visual Studio Code for Boost your Development Speed

2. Modify web manifest

Now lets start main work what you have come here for. You can see there is already some content available in the manifest file like name, icons, theme_color, background_color etc. Along with all these we need to add our quick shortcut code.

Shortcuts will be part of manifest json. Its array with having objects which is having some predefined keys.

name
Represent name of shortcut. It will be display when user open shortcut context menu.

short_name
Its optional and used when space is less to display name.

description
Again its option. Its description that allows the developer to describe the purpose of the shortcut. User agents MAY expose this information to assistive technology.

url
URL of page when user click on the shortcut. Advice you to add utm parameters to track how many peoples actually using your shortcuts.

icons
List of icons in different sizes that will display with name.

Now you all set to add shortcut in the manifest file.

3. Testing App Shorcuts

Note that this is experimental feature is available in Chrome 84 onward Android, Chrome Beta 84 onward and Edge 84 onward by enabling flag about://flags/#enable-desktop-pwas-app-icon-shortcuts-menu

Chrome Beta Download: https://www.google.com/intl/en_in/chrome/beta/
Chrome Beta Android: https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en_IN

To test your shortcut is added or not, open dev tools > Application and select Manifest. Go in bottom where you can see shortcuts with icon and link.

Shortcut test
Dev Tools > Application > Manifest

Sample

Time for Sample. Code with PWA + Shortcut is on Github https://github.com/shabbir-dhangot/pwa-shortcut-example

Demo is available on https://pwa-shortcut-example.000webhostapp.com/#/home

Conclusion

App Shortcut should be useful for user. Out of all pages you need to set priority of pages which will going to part of shortcuts. As this is on experimental phase you should have made it ready when it launch to end user.

Happy Coding…  🙂🙂🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *