# Add app shortcuts

> Add shortcuts entries to a PWA manifest so the installed app's icon offers quick actions, keep every URL in scope, and mirror the menu inside the app.

import CompatTable from '@components/CompatTable.astro';

At the end of this guide a right-click on your installed app's taskbar icon on Windows, or
a touch and hold on its launcher icon on Android, opens a menu of quick actions that jump
straight to a screen inside the app. The manifest `shortcuts` member declares those
actions; the operating system draws the menu.

You need an installable PWA (see [Make it installable](/guides/installable/)) because the
menu is shown only for installed apps, and a list of two to four destinations users reach
often. Support is a Chromium feature (Chrome and Edge on Windows, macOS, ChromeOS, and
Android); the table in step 4 has the versions.

## 1. Declare shortcuts in the manifest

Each entry needs `name` and `url`; `short_name`, `description`, and `icons` are optional.
Order the array by importance, because browsers show entries in manifest order and
truncate the list to the host operating system's limit.

```json
{
  "name": "Ledger",
  "start_url": "/app/",
  "scope": "/app/",
  "display": "standalone",
  "icons": [{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }],
  "shortcuts": [
    {
      "name": "New invoice",
      "short_name": "New",
      "description": "Create a new invoice",
      "url": "/app/invoice/new?source=shortcut",
      "icons": [{ "src": "/icons/shortcut-new-192.png", "sizes": "192x192", "type": "image/png" }]
    },
    {
      "name": "Dashboard",
      "url": "/app/dashboard?source=shortcut",
      "icons": [{ "src": "/icons/shortcut-dashboard-192.png", "sizes": "192x192", "type": "image/png" }]
    }
  ]
}
```

Use a single 192×192 PNG per shortcut, or the 48 dp series (36, 48, 72, 96, 144, 192) for
pixel-exact rendering; SVG shortcut icons are not supported by Chromium, and macOS shows
no icons in the Dock menu at all, so names must stand on their own. A `?source=shortcut`
parameter lets analytics count launches from the menu.

## 2. Keep every shortcut URL in scope

A shortcut `url` must sit inside the manifest `scope`; an out-of-scope URL is dropped.
Relative URLs resolve against the manifest file's location, not the page, so a manifest at
`/app/manifest.webmanifest` with `"url": "../projects"` opens `/projects`, which is outside
`/app/` and will be ignored. The destination does not have to be reachable from in-app
navigation; a shortcut-only entry point is fine as long as it stays in scope.

## 3. Mirror the menu inside the app

No JavaScript API reports whether the current browser and operating system will draw a
shortcuts menu, and the W3C specification leaves presentation and count to the user agent.
The only reliable fallback is unconditional: render the same actions as an in-app menu as
well, so a user on a browser without shortcuts has an equivalent path. What a page can
check is its own manifest, which is useful to keep the two menus in sync.

```js
async function shortcutsFromManifest() {
  const link = document.querySelector('link[rel="manifest"]');
  if (!link) return [];
  try {
    const manifest = await fetch(link.href).then((response) => response.json());
    return Array.isArray(manifest.shortcuts) ? manifest.shortcuts : [];
  } catch {
    return [];
  }
}

shortcutsFromManifest().then((shortcuts) => {
  const menu = document.querySelector('#quick-actions');
  menu.replaceChildren(
    ...shortcuts.map((shortcut) => {
      const link = document.createElement('a');
      link.href = shortcut.url;
      link.textContent = shortcut.name;
      return link;
    }),
  );
});
```

## 4. Install and open the shortcut menu

Install the app, then on Windows right-click its taskbar icon, on macOS right-click the
Dock icon, and on Android touch and hold the launcher icon. The entries from step 1 appear
in order; choosing one opens the app at that URL. Chrome DevTools shows the parsed entries
as **Shortcut #1**, **Shortcut #2**, and so on under **Application** > **Manifest**, which
is the quickest check that icons resolve. Changes reach existing installs on the browser's
manifest update check, which Chrome caps at once a day.

:::observed
Chrome and Edge on Windows show up to 10 shortcuts; Chrome for Android shows 3, because
Chrome 92 added its own **Site settings** entry to the launcher menu and took one of the
four slots Android offered before. Declaring a fifth shortcut in the manifest changes
nothing on either platform: the extra entries are silently truncated, which is why order
matters.
:::

<CompatTable feature="manifest-shortcuts" />

## See also

- [Manifest shortcuts](/reference/manifest/shortcuts/)
- [App shortcuts after install](/reference/installation/install-shortcuts/)
- [manifest: shortcuts support](/compatibility/manifest-shortcuts/)
- [Get things done quickly with app shortcuts](https://web.dev/articles/app-shortcuts) (web.dev)
- [Web Application Manifest: shortcuts member](https://www.w3.org/TR/appmanifest/#shortcuts-member) (w3.org)

← Back to the [Guides](/guides/) overview.