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.
What the menu looks like once installed
Section titled “What the menu looks like once installed”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.
Example manifest
Section titled “Example manifest”{ "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.
Practical checklist
Section titled “Practical checklist”- 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
urlis withinscope; if given as a relative value, confirm it resolves against the manifest file’s own URL, not the page orstart_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.
Cross-references
Section titled “Cross-references”- The install prompt — how a user gets to the installed state that shortcuts depend on
- Manifest shortcuts — full syntax and required/optional properties