1. Web
  2. 渐进式 Web 应用
  3. Web 应用清单
  4. 参考
  5. shortcuts

shortcuts

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

shortcuts manifest 成员用于指定指向您 Web 应用程序中关键任务或页面的链接。浏览器可以使用此信息创建一个上下文菜单，该菜单通常在用户与 Web 应用图标交互时显示。

语法

json
/* Single shortcut with all properties */
"shortcuts": [
  {
    "name": "Today's agenda",
    "short_name": "Agenda",
    "description": "View your agenda for today",
    "url": "/today",
    "icons": [
      {
        "src": "today.png",
        "sizes": "192x192"
        }
    ]
  }
]

/* Two shortcuts with the required properties */
"shortcuts": [
  {
    "name": "Today's agenda",
    "url": "/today"
  },
  {
    "name": "Tomorrow's agenda",
    "url": "/tomorrow"
  }
]

/* Shortcut with a relative URL */
"shortcuts": [
  {
    "name": "This week's agenda",
    "url": "../agenda"
  }
]

值

shortcuts

一个对象数组。每个对象代表 Web 应用中的一个关键任务或页面。

每个对象可以有一个或多个属性。其中，只有 name 和 url 是必需的。可能的属性包括

name

一个字符串，表示快捷方式的名称，该名称将显示给用户在上下文菜单中。

short_name 可选

一个字符串，表示快捷方式名称的简短版本。当没有足够的空间显示完整名称时，浏览器可能会使用此名称。

description 可选

一个字符串，描述快捷方式的用途。浏览器可能会将此信息暴露给辅助技术，例如屏幕阅读器，这有助于用户理解快捷方式的用途。

url

激活关联快捷方式时打开的应用 URL。该 URL 必须在 Web 应用 manifest 的 scope 范围内。如果值为绝对值，则应与链接到 manifest 文件的页面同源。如果值为相对值，则相对于 manifest 文件的 URL 解析。

icons 可选

一个图标对象数组，代表快捷方式在各种上下文中的图标。其格式与 icons manifest 成员相同。

描述

shortcuts 成员允许您为用户提供对 Web 应用提供的关键功能的直接访问。快捷方式通常在用户与 Web 应用图标交互时（例如右键单击或长按）呈现在上下文菜单中。当用户从该菜单激活快捷方式时，浏览器会将他们导航到快捷方式的 url 指定的地址。

浏览器通常按照应用 manifest 文件中提供的顺序呈现快捷方式。

注意： 快捷方式的呈现方式和数量由浏览器和/或操作系统自行决定。例如，浏览器可能会截断声明的快捷方式列表，以保持与主操作系统约定或限制的一致性。

添加快捷方式的好处

快捷方式可以通过以下方式增强用户体验：

  • 提供对 Web 应用中常用功能或页面的直接导航。
  • 使您的 Web 应用在用户看来更具平台原生感和熟悉感。

例如，快捷方式可用于直接链接到社交媒体应用中的用户时间线，或在电子商务场景中提供对用户近期订单的快速访问。

添加快捷方式的最佳实践

在为 Web 应用创建快捷方式时，请牢记以下指南：

  • 保持快捷方式名称简短但具有描述性，足以清楚地向用户传达其目的。
  • 确保快捷方式 URL 在 Web 应用的范围内。
  • 为快捷方式添加图标以提高视觉识别度。提供多种尺寸的图标，以确保在不同设备和上下文中的显示质量。
  • 根据快捷方式链接到的功能的相对重要性和使用频率，从最重要到最不重要排序。
  • 优先添加少数重要的快捷方式。过长的列表不仅会让用户不知所措，还可能被某些平台或浏览器截断。

示例

为任务管理 Web 应用定义快捷方式

考虑一个任务管理应用。此示例显示了如何添加两个快捷方式。“新建任务”快捷方式将直接将用户引导至任务创建页面，而“今日任务”快捷方式将提供对当前日期的任务列表的快速访问。

json
{
  "name": "TaskPro",
  "short_name": "Tasks",
  "start_url": "/dashboard",
  "display": "standalone",
  "shortcuts": [
    {
      "name": "New Task",
      "short_name": "Add",
      "description": "Quickly add a new task",
      "url": "/tasks/new"
    },
    {
      "name": "Today's Tasks",
      "short_name": "Today",
      "description": "View your tasks for today",
      "url": "/tasks/today"
    }
  ]
}

添加快捷方式图标和使用相对 URL

在前面的示例基础上，下面的代码为两个快捷方式添加了图标，并演示了在附加的第三个快捷方式中使用相对 URL。../projects URL 将相对于应用 manifest 的 URL 进行解析。例如，如果应用 manifest 文件位于 /dashboard/manifest.json，则此快捷方式将导航到 /projects。

json
{
  "name": "TaskPro",
  "short_name": "Tasks",
  "start_url": "/dashboard",
  "display": "standalone",
  "shortcuts": [
    {
      "name": "New Task",
      "short_name": "Add",
      "description": "Quickly add a new task",
      "url": "/tasks/new",
      "icons": [
        {
          "src": "/images/add.png",
          "sizes": "192x192"
        }
      ]
    },
    {
      "name": "Today's Tasks",
      "short_name": "Today",
      "description": "View your tasks for today",
      "url": "/tasks/today",
      "icons": [
        {
          "src": "/images/calendar.png",
          "sizes": "192x192"
        }
      ]
    },
    {
      "name": "All Projects",
      "short_name": "Projects",
      "description": "View all your projects",
      "url": "../projects"
    }
  ]
}

规范

规范
Web 应用清单
# shortcuts-member

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 贡献。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.