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

应用快捷方式可让用户快速执行用户需要的一些常用操作。

François Beaufort
François Beaufort
GitHub
Jungkee Song
Jungkee Song
X GitHub

为了提高用户的工作效率并促进用户重新与关键任务进行互动，Web 平台现在支持应用快捷方式。借助它们，Web 开发者可以让用户快速执行用户需要的一些常用操作。

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

应用快捷方式简介

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

如需调用应用快捷方式菜单，请右键点击用户桌面上的任务栏 (Windows) 或基座 (macOS) 中的应用图标，或在 Android 设备上轻触并按住应用的启动器图标。

在 Android 设备上打开的应用快捷方式菜单的屏幕截图
在 Android 设备上打开的应用快捷方式菜单
在 Windows 中打开的应用快捷方式菜单的屏幕截图
在 Windows 上打开的应用快捷方式菜单

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

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

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

在 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 像素。（此公式衍生自像素单位的 dp 单位转换公式）。

测试应用快捷方式

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

开发者工具中应用快捷方式的屏幕截图
开发者工具中显示的应用快捷方式

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

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

最佳实践

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

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

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

您不应依赖图标来区分应用快捷方式，因为它们可能并不总是可见。例如，macOS 不支持 Dock 快捷方式菜单中的图标。为每个应用快捷方式使用不同的名称。

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

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

浏览器支持

下列平台和版本支持应用快捷方式。

浏览器支持

  • 96
  • 96
  • x
  • 17.4

来源

在 ChromeOS 中打开的应用快捷方式菜单的屏幕截图
在 ChromeOS 中打开的应用快捷方式菜单

Trusted Web Activity 支持

Bubblewrap 是推荐用于构建使用 Trusted Web Activity 的 Android 应用的工具，它可从 Web 应用清单中读取应用快捷方式，并自动生成 Android 应用的相应配置。请注意，应用快捷方式的图标是必需的，在 Bubblewrap 中必须至少为 96 x 96 像素。

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

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

示例

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