[Update: Tutorial] Progressive Web Apps will support Android’s homescreen app shortcuts

Ben Schoon | May 20 2020 - 9:07 am PT

android app shortcuts progressive web app support

Progressive Web Apps are the future as they bring the best parts of the web to a more native experience. Now, for Android users, Progressive Web Apps are picking up the ability to take advantage of app shortcuts on the homescreen.

App shortcuts were introduced back in Android Nougat as a new long-press method that could access portions of an app a bit faster. When used properly, they can be a really handy tool for Android users.

Now, that functionality is being expanded to Progressive Web Apps on Android. Pointed out by Googler Thomas Steiner on Twitter, the latest Chrome Canary release for Android enables app shortcuts for PWAs. This is accomplished using the Web App Manifest’s “shortcuts” member which accomplishes the same goal as Android app shortcuts — directly linking to a specific part of an app or experience.

In a demo available at sadchonks.com, Android users can add the PWA to their homescreen and then long press to access “Saved Chonks” or “New Chonks” using Android app shortcuts. It should be fun to see this functionality evolve over time and be taken advantage of from other PWA developers!

📢 App icon shortcuts are coming to Progressive Web Apps near you! Try @rynkns's demo https://t.co/bGvQ6aCfiw and install it using Chrome Canary on Android.

How does this even work? Glad you ask, it's through the Web App Manifest's `shortcuts` member: https://t.co/E4UR5LiUdm. pic.twitter.com/sf1446pOSB

— Thomas Steiner (@tomayac) May 12, 2020

Update 5/20: Google has today released a new tutorial post for this functionality. François Beaufort and Jungkee Song explain in the brief post how developers can get started with app shortcuts on Progressive Web Apps as well as some tips and best practices. If you’re a web developer, it’s definitely worth a look.

App shortcuts are optionally defined in the web app manifest, a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user’s desktop or mobile device. More specifically, they are declared in the shortcuts array member. Below is an example of a potential web app manifest.