Adding Shortcuts to Progressive Web Apps

TL;DR: PWAs installed from Chrome can now have shortcuts like native apps

A progressive web app (PWA for short) is a web application that uses modern browser APIs and progressive enhancement techniques to provide a native app-like experience. They support offline interactions, can send users push notifications, and are installable like an app. Now, they also support shortcuts when installed through Chrome.

Before I dive into shortcuts specifically, let’s talk about PWAs a little. While it’s currently possible to install progressive web apps from select app stores (like the Google Play Store), the most common way to install them is by visiting a website that provides a PWA version of itself. Web applications get their PWA super powers (in part) from something called a manifest file. To make a website available as a PWA, you create a manifest.webmanifest file* in the root of your website that tells the browser and operating system how to install it. Then, when a user visits the website, they can be prompted to install the PWA.

Installing the YouTube TV PWA on a laptop

Installing the Trivago PWA on an Android phone

The manifest file is a fairly simple JSON file. The most widely supported properties included in the file are name, short_name, icons, start_url, display, theme_color, and background_color. Here’s a sample manifest.webmanifest file.

{
   "short_name": "App name",
   "name": "App name",
   "icons": [
      {
         "src": "favicon.ico",
         "sizes": "32x32 24x24 16x16",
         "type": "image/x-icon"
      },
      {
         "src": "android-chrome-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
      },
      {
         "src": "android-chrome-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
      }
   ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#15403B",
   "background_color": "#15403B"
}

Shortcuts Are Now Available!

Chrome recently added support for another property in the manifest file called shortcuts, helping us continue to move closer to providing an app-like experience for our web apps!

Shortcuts allow you to provide quick links for a user to jump directly into an action in your app without having to open the app first and navigate to the action.

They work for PWAs similarly to how they currently work for Android native apps where a long press on an app icon will show the shortcuts menu. The feature is available for PWAs now in Chrome (as of version 84.0.4147.111).

Shortcuts for an Android camera app

There’s also rumor that Microsoft is planning to add support for this to PWAs installed on Windows 10. This is possible for PWAs installed from the Microsoft Store now, but not for PWAs installed from the browser.

Adding Shortcuts to a PWA

To add shortcuts to your PWA, add the following to your manifest.webmanifest file:

"shortcuts": [
   {
      "name": "Shortcut name to show in the menu",
      "description": "A description of what the shortcut does",
      "url": "Link to shortcut",
      "icons": [
         {
            "src": "/icons/play-later.png",
            "sizes": "96x96",
            "type": "image/png",
            "purpose": "any"
         }
      ]
   }
]

You can add multiple shortcuts to your PWA by adding an object with a name, description, and url for each one.

You can optionally show an icon for each shortcut as well. If the operating system supports icons in the shortcut menu and supports icons of the type you specify for your shortcut, it will be displayed in the menu. Chrome recommends using icons that are 192 x 192 pixels or providing icons that increment in size by 48dp (i.e., 48x48, 72x72, 96x96, 144x144, 192x192). It also currently only supports PNG files. You can see more on Chrome’s implementation details on Google’s Web.dev site.

It’s recommended that you put the most important shortcuts first since different browsers and operating systems may have limitations on how many shortcuts will be displayed. The latest W3C working draft of the specifications for Web Manifests outlines the expected behavior of the shortcuts property.

You can use this now in your PWAs in Chrome.

*Side Note: manifest.json vs. manifest.webmanifest

Depending on where you look, there’s conflicting advice on whether the manifest file should be called manifest.json or manifest.webmanifest. According to the W3C Manifest Editor’s Draft, the official extension is .webmanifest. The draft also indicates that it’s ok to use a .json file though. The key requirement is to make sure that the file is transferred using the application/manifest+json mime type. I’ve used both file extensions for my projects and they seem to work equally well, but your mileage may vary.