# 安装后的应用快捷方式

> 清单中声明的快捷方式只能通过右键单击或长按应用图标显示，这意味着它们只有在 PWA 安装之后才可用。

**一句话：** 清单 `shortcuts` 字段声明的快捷方式，只能通过右键单击或长按应用图标显示，这意味着它们只有在 PWA 已安装到用户设备上之后才可用。

## 安装是前提条件，而不仅仅是锦上添花

快捷方式菜单依附于已安装应用的图标，因此用户在安装前无法访问它："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."（快捷方式只能通过右键单击或长按应用图标显示，这意味着它们只有在 PWA 已安装到用户设备上之后才可用。）任何把快捷方式作为使用理由来推广的用户体验设计，都需要先完成安装这一步——触发安装的方法见[安装提示](/zh/reference/installation/install-prompt/)。

## 安装后菜单的表现形式

文档中给出了两个平台的具体手势：

- **Windows** —— 右键单击固定在任务栏上的图标，会显示一份程序特定操作与近期打开文件的列表，与原生应用使用的跳转列表（jump list）界面相同。
- **Android** —— 长按主屏幕上的应用图标，会显示该应用常用操作的列表。

## 每个快捷方式的 URL 必须位于 scope 之内，相对路径相对于清单自身 URL 解析

快捷方式的 `url` 必须位于清单 `scope` 之内。根据 Manifest `shortcuts` 参考文档，若该值为绝对路径，应与链接到该清单文件的页面同源；若为相对路径，则相对于清单文件自身的 URL 解析——例如，若清单文件位于 `/dashboard/manifest.json`，其中声明的 `../projects` 快捷方式会导航到 `/projects`。（另有一篇 MDN 操作指南将相对快捷方式 URL 描述为相对于 PWA 的起始 URL 解析；Manifest `shortcuts` 参考文档对此行为的描述更为具体。）为每个快捷方式设置各自的 `url`，以便应用代码能判断启动后用户选择了哪个快捷方式。

## 清单示例

```json
{
  "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"
    }
  ]
}
```

关于快捷方式对象的完整属性集合（`name`、`short_name`、`description`、`url`、`icons`），参见 [Manifest 快捷方式（shortcuts）](/zh/reference/manifest/shortcuts/)。

## 实践清单

- [ ] 不要向尚未安装应用的用户宣传快捷方式菜单相关操作——安装前该菜单并不存在。
- [ ] 每个快捷方式的 `url` 都位于 `scope` 之内；若使用相对路径，确认其相对于清单文件自身的 URL 解析，而非相对于页面或 `start_url`。
- [ ] 安装后在 Windows（右键单击固定在任务栏的图标）与 Android（长按主屏幕图标）上验证快捷方式菜单。
- [ ] 让每个快捷方式指向应用内不同的 URL，以便代码能区分是哪个快捷方式启动了应用。

## 相关链接

- [安装提示](/zh/reference/installation/install-prompt/) —— 用户如何进入快捷方式所依赖的已安装状态
- [Manifest 快捷方式（shortcuts）](/zh/reference/manifest/shortcuts/) —— 完整语法与必填/可选属性