Skip to content

App shortcuts after install

Published

In one line: Shortcuts declared in the manifest’s shortcuts member are only displayed by right-clicking or long-pressing the app icon, meaning they’re only available once the PWA is installed on the user’s device.

Installation is a prerequisite, not just a convenience

Section titled “Installation is a prerequisite, not just a convenience”

The shortcut menu is attached to the installed app’s icon, so a user cannot reach it before installing: “Shortcuts are only displayed by right-clicking or long-pressing the app icon, meaning they’re only available once the PWA is installed on the user’s device.” Any UX that promotes shortcuts as a reason to use the app needs the install step to happen first — see the install prompt for how to trigger that.

Two platforms are documented with concrete gestures:

  • Windows — right-clicking a pinned taskbar icon shows a list of program-specific actions and recently opened files, the same jump-list surface used for native apps.
  • Android — long-pressing an app icon on the home screen shows a list of the app’s common actions.

Each shortcut’s URL must be within scope, and relative values resolve against the manifest’s own URL

Section titled “Each shortcut’s URL must be within scope, and relative values resolve against the manifest’s own URL”

A shortcut’s url must be within the manifest’s scope. Per the manifest shortcuts reference, if the value is absolute it should be same-origin with the page that links to the manifest file, and if the value is relative it is resolved against the manifest file’s own URL — for example, a ../projects shortcut declared in a manifest at /dashboard/manifest.json navigates to /projects. (A separate MDN how-to guide describes relative shortcut URLs resolving against the PWA’s start URL instead; the manifest shortcuts reference page is the more specific source for this behavior.) Give each shortcut its own url so your app code can tell which shortcut the user picked once it launches.

{
"name": "Calendar",
"start_url": "/",
"display": "standalone",
"icons": [
{
"src": "images/icon-256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"shortcuts": [
{
"name": "New event",
"url": "/new-event"
},
{
"name": "View today's events",
"url": "/today"
}
]
}

For the full set of shortcut object properties (name, short_name, description, url, icons), see Manifest shortcuts.

  • Don’t advertise shortcut-menu actions to users who haven’t installed the app yet — the menu doesn’t exist until then.
  • Each shortcut’s url is within scope; if given as a relative value, confirm it resolves against the manifest file’s own URL, not the page or start_url.
  • Verify the shortcut menu on Windows (right-click a pinned taskbar icon) and Android (long-press the home-screen icon) after installing.
  • Route each shortcut to a distinct in-app URL so your code can distinguish which shortcut launched it.