利用应用快捷方式快速完成工作

应用快捷方式可让用户快速访问一些用户经常需要的常用操作。

François Beaufort

Jungkee Song

为了提高用户的工作效率并促进用户重新与关键任务互动，Web 平台现在支持应用快捷方式。借助它们，Web 开发者能够快速访问用户经常需要的少数常见操作。

本文介绍了如何定义应用快捷方式。此外，您还将了解一些相关的最佳做法。

应用快捷方式简介

应用快捷方式可帮助用户在您的 Web 应用中快速启动常见或推荐的任务。从显示应用图标的任何位置轻松访问这些任务可提高用户的工作效率以及用户与 Web 应用的互动度。

通过以下方式调用应用快捷方式菜单：右键点击用户桌面上的任务栏 (Windows) 或 Dock (macOS) 中的应用图标，或在 Android 设备上轻触并按住应用的启动器图标。

系统仅针对安装在用户的桌面设备或移动设备上的渐进式 Web 应用显示应用快捷方式菜单。如需了解可安装性要求，请参阅“了解 PWA”模块中的安装。

每个应用快捷方式都表示一个用户 intent，每个 intent 都与您的 Web 应用范围内的一个网址相关联。当用户激活应用快捷方式时，即会打开该网址。应用快捷方式的示例包括：

• 顶级导航项（例如首页、时间轴、近期订单）
• 搜索
• 数据输入任务（例如，撰写电子邮件或发推文、添加收据）
• 活动（例如与常用联系人发起聊天）

在 Web 应用清单中定义应用快捷方式

您可以视需要在 Web 应用清单中定义应用快捷方式，该清单是一个 JSON 文件，用于告知浏览器您的 Web 应用及其安装到用户的桌面设备或移动设备后应表现出怎样的行为。更具体地说，它们在 shortcuts 数组成员中声明。下面是一个可能的 Web 应用清单示例。

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

shortcuts 数组的每个成员都是一个字典，该字典至少包含一个 name 和一个 url。其他成员可选填。

name

向用户显示的应用快捷方式的人类可读标签。

short_name（可选）

在空间有限的情况下使用的人类可读标签。虽然这是选填字段，但建议您提供该信息。

description（可选）

应用快捷方式的直观易懂的用途。 它在撰写时并不使用，但将来可能会接触到辅助技术。

url

用户激活应用快捷方式时打开的网址。此网址必须位于 Web 应用清单的范围内。如果是相对网址，则基准网址将是 Web 应用清单的网址。

icons（可选）

图片资源对象的数组。每个对象都必须包含 src 和 sizes 属性。与Web 应用清单图标不同，图片的 type 是可选的。写入时不支持 SVG 文件。请改用 PNG。

如果您希望提供像素完美的图标，请以 48dp 为增量提供这些图标（即 36x36、48x48、72x72、96x96、144x144、192x192 像素图标）。否则，我们建议您使用单个 192x192 像素的图标。

作为一项质量衡量标准，图标必须至少为设备在 Android 上理想尺寸的一半，即 48dp。例如，如需显示在 xxhdpi 屏幕上，该图标必须至少为 72 x 72 像素。（派生自像素单位的转换公式）。

测试应用快捷方式

如需验证您的应用快捷方式是否设置正确，请使用开发者工具 Application 面板中的 Manifest 窗格。

此窗格提供人类可读版本的许多清单属性，包括应用快捷方式。这样可以轻松验证所有快捷方式图标（如果提供）是否都能正确加载。

应用快捷方式可能无法立即提供给所有用户，因为渐进式 Web 应用更新频率上限为每天一次。详细了解 Chrome 如何处理 Web 应用清单的更新。

最佳实践

按优先级对应用快捷方式进行排序

快捷方式按您在清单中定义的顺序显示。建议您按优先级对应用快捷方式进行排序，因为显示的应用快捷方式数量的限制因平台而异。例如，Windows 上的 Chrome 和 Edge 将应用快捷方式的数量限制为 10 个，而 Android 版 Chrome 仅显示 3 个。在适用于 Android 7 的 Chrome 92 之前，支持 4。Chrome 92 向网站设置添加了一个快捷方式，它占用应用的一个可用快捷方式槽位。

使用不同的应用快捷方式名称

您不应依赖图标来区分应用快捷方式，因为它们不一定始终可见。例如，macOS 不支持在基座快捷方式菜单中显示图标。为每个应用快捷方式使用不同的名称。

衡量应用快捷方式的使用情况

您应该像为 start_url 添加注解一样为应用快捷方式 url 条目添加注解（例如，为 url: "/my-shortcut?utm_source=homescreen" 添加注解）。

浏览器支持

应用快捷方式适用于下列平台和版本。

可信网络活动支持

Bubblewrap 是推荐用于构建使用可信网络 activity 的 Android 应用的工具，该工具会从 Web 应用清单中读取应用快捷方式，并自动生成 Android 应用的相应配置。请注意，应用快捷方式的图标是必需的，并且气泡外框大小必须至少为 96x96 像素。

PWABuilder 是一款出色的工具，可轻松将渐进式 Web 应用转换为可信 Web activity，支持应用快捷方式，但有一些注意事项。

如果开发者手动将 Trusted Web Activity 集成到其 Android 应用中，可以使用 Android 应用快捷方式来实现相同的行为。

示例

查看应用快捷方式示例及其来源。

实用链接

• MDN
• 规范
• 应用快捷方式示例 | 应用快捷方式示例来源
• Blink 组件：UI>Browser>WebAppInstalls