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.