Web App Manifest 怎么配置 shortcuts 实现桌面长按快捷菜单-H5教程-PHP中文网

shortcuts字段用于pwa配置桌面长按图标弹出的快捷菜单，必须为数组，每项含必填name和url，路径需同源且匹配start_url与scope，图标需多尺寸、src可访问。

web app manifest 怎么配置 shortcuts 实现桌面长按快捷菜单

Web App Manifest 中的 shortcuts 字段，是用来为 PWA（渐进式 Web 应用）配置桌面长按图标后弹出的快捷菜单项的。它只在支持该特性的浏览器和系统中生效（如 Chrome、Edge 在 Android 和 Windows 上，部分桌面版也支持右键菜单）。配置本身不复杂，但需注意格式细节和运行环境限制。

shortcuts 基本结构与字段说明

在 manifest.webmanifest 文件的根对象中添加 shortcuts 数组，每个对象代表一个快捷入口：

name：必填，用户可见的主名称，显示在菜单中（空间充足时优先使用）
url：必填，点击后跳转的相对路径（相对于 manifest 所在域名），如 "/orders" 或 "/search?q=new"
short_name：可选，当空间受限（如小屏或图标下方标签）时的备用名称
description：可选，辅助技术可读的描述，提升无障碍体验
icons：可选，为该快捷方式单独指定图标（非必须，会回退到 manifest 根级 icons）；每个 icon 对象需含 src、sizes（格式为 "192x192"，不能有空格）、type

一个可用的 shortcuts 配置示例

以下代码可直接放入你的 manifest.webmanifest 中：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

"shortcuts": [
  {
    "name": "我的订单",
    "short_name": "订单",
    "description": "查看和管理所有订单",
    "url": "/orders",
    "icons": [
      {
        "src": "/icons/shortcut-orders-192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/icons/shortcut-orders-512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
  },
  {
    "name": "立即搜索",
    "url": "/search",
    "icons": [
      {
        "src": "/icons/shortcut-search-192.png",
        "sizes": "192x192",
        "type": "image/png"
      }
    ]
  }
]

注意：sizes 字符串里不能出现空格（如 "192 x 192" 会导致整个 shortcut 失效）；url 必须是同源路径，不可跨域。

生效前提与常见问题

这个功能不是写完就立刻可见的，需满足几个条件：

网站已通过 <link rel="manifest" href="/manifest.webmanifest"> 正确引入 manifest
应用已以 PWA 形式被“添加到主屏幕”或“安装”（仅书签或地址栏打开无效）
浏览器支持：Chrome 89+、Edge 91+、Samsung Internet 17+ 等；Android 和 Windows 平台较稳定，macOS Safari 目前不支持
manifest 文件响应头需包含 Content-Type: application/manifest+json（多数静态服务器默认支持）
修改 shortcuts 后，需用户重新“添加到主屏幕”或等待浏览器自动更新（通常需刷新页面并重启 PWA）