App shortcuts: a faster path to frequent tasks

App shortcuts let users jump directly into common tasks inside an installed Progressive Web App (PWA) from its launcher or taskbar icon. They offer a way to boost productivity and encourage users to return to key workflows. Developers define shortcuts in the web app manifest so that when a user right-clicks the app icon on Windows or macOS, or touch-and-holds it on Android, a menu of quick actions appears.

Shortcuts only show for installed PWAs. Each one represents a user intent tied to a URL inside the app's manifest scope, which opens when the shortcut is activated. Examples include top-level navigation, search, data entry, or starting a chat with frequent contacts.

Declaring shortcuts in the manifest

Shortcuts are declared in the shortcuts array of the web app manifest file. Every entry needs at least a name and a url. The remaining properties are optional but recommended where noted:

  • name — the label users see on the shortcut menu.
  • short_name — a shorter label used where space is tight; supplying it is recommended.
  • description — a human-readable purpose; not currently used but may be exposed to assistive technology later.
  • url — the target URL that opens on activation. Must fall within the manifest's scope; if relative, the manifest URL is the base.
  • icons — an array of image resources with src and sizes required; type is optional. SVG files aren't supported; use PNG. For pixel-perfect rendering, provide icons in 48dp increments (e.g., 36x36, 48x48, 72x72, 96x96, 144x144, 192x192). A single 192x192 icon is acceptable otherwise. On Android, icons must be at least half the device's ideal size (48dp); an xxhdpi screen, for instance, requires at least 72x72 pixels.

A minimal manifest entry looks like this:

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

Verifying your shortcuts

To confirm shortcuts are configured correctly, open the Application panel in DevTools and inspect the Manifest pane. It shows a readable breakdown of manifest properties, including shortcuts, and makes it easy to spot missing or broken shortcut icons.

Note that manifest updates such as new or changed shortcuts reach users only when the PWA updates, and Chrome applies those updates at most once per day.

Practices worth following

Rank shortcuts by importance

Menus display shortcuts in the order written in the manifest. Prioritize accordingly because the number of visible shortcuts varies by platform: Chrome and Edge on Windows show up to 10; Chrome for Android shows 3 since Chrome 92, when a site settings entry began taking one slot on Android. Earlier Android versions allowed 4.

Choose distinct names

Don't rely on icons alone to tell shortcuts apart. macOS, for example, does not render icons in the dock shortcut menu, so each shortcut needs a distinguishable label.

Tag shortcut URLs for analytics

Annotate shortcut url values with campaign parameters to measure usage, just as you would with start_url, for example url: "/my-shortcut?utm_source=homescreen".

Platform support and TWA integration

Support for app shortcuts depends on the browser and OS version. The reference table below summarizes current availability.


Screenshot of an app shortcuts menu opened on ChromeOS

App shortcuts menu opened on ChromeOS

For Android apps built with Trusted Web Activity (TWA), Bubblewrap reads shortcut definitions from the manifest and creates the matching Android configuration. Bubblewrap requires shortcut icons of at least 96x96 pixels. PWABuilder also supports shortcuts, with some limitations. Developers integrating TWA directly can use Android app shortcuts to mirror the behavior.

A live demonstration is available in the app shortcuts sample, with further details in the MDN documentation and the W3C spec.