安装后的应用快捷方式

发布于 2026-07-242026-07-24作者 Carey Gill · 编辑流程

一句话： 清单 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 已安装到用户设备上之后才可用。）任何把快捷方式作为使用理由来推广的用户体验设计，都需要先完成安装这一步——触发安装的方法见安装提示。

安装后菜单的表现形式

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

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

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

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

清单示例

{
  "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）。

实践清单

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