将常用应用操作作为快捷方式

许多操作系统都支持在用户右键单击或长按应用图标时显示快捷菜单或跳转列表。例如，在 Windows 上，右键单击任务栏中任何固定程序都会显示程序特定操作和最近打开文件的列表。

The task bar in Windows, showing several pinned apps. The Firefox app icon was right-clicked, and the jump list is displayed, showing frequent tabs and common tasks

在 Android 上，长按应用图标也会显示常用应用操作的列表。

The Android app launcher, showing an app icon that's been long-pressed. The shortcut menu is displayed, showing common actions

渐进式 Web 应用 (PWA) 可以像平台原生应用一样安装在设备上，并且像其原生对应物一样，它们还可以定义应用快捷菜单以允许用户访问常用操作。

快捷方式仅通过右键单击或长按应用图标显示，这意味着它们仅在 PWA 安装到用户设备上后才可用。要了解如何使您的 PWA 可安装，请参阅使 PWA 可安装。

为什么要使用快捷方式？

为您的 PWA 定义快捷方式可以通过让用户直接从主屏幕访问应用的主要操作来提高用户的生产力。此外，定义快捷方式可以帮助使您的 PWA 感觉更像平台原生应用，从而使用户更熟悉。

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

要为您的 PWA 定义快捷方式，请使用 shortcuts 成员 Web 应用清单。此成员是一个对象数组，用于定义每个快捷方式的名称和 URL，以及可选的短名称、描述和图标。例如，以下是一个日历应用的 Web 应用清单，它定义了两个快捷方式

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: 快捷方式的名称，显示在快捷菜单中。请确保使其简短，但也具有足够的描述性，以便用户了解快捷方式的作用。
url: 用户选择快捷方式时启动 PWA 的 URL。此 URL 可以是绝对的，在这种情况下，它应该存在于 Web 应用清单的作用域内。该 URL 也可以是相对的，在这种情况下，它相对于 PWA 的起始 URL 解析。

所有其他快捷方式对象属性都是可选的，但您应该考虑提供它们以使快捷方式对用户更有用

short_name: 快捷方式的短名称，当没有足够的空间显示完整名称时显示。
description: 快捷方式的描述。此字符串可供辅助技术（如屏幕阅读器）访问，以帮助用户了解快捷方式的作用。
icons: 要在快捷菜单中显示的图像对象数组。每个图像对象都像 icons 成员 Web 应用清单一样进行处理，并且可用于为不同的设备需求提供不同大小的图标。

另请参阅

shortcuts 清单成员
使用应用快捷方式快速完成任务在 web.dev 上 (2022)
定义应用快捷方式在 learn.microsoft.com 上 (2023)