將常用應用操作作為快捷方式公開

許多作業系統支援在使用者右鍵單擊或長按應用圖示時顯示快捷選單,或稱為“跳轉列表”。例如,在 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 定義快捷方式,請使用 Web 應用清單中的 shortcuts 成員。此成員是一個物件陣列,用於定義每個快捷方式的名稱和 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 可以是絕對 URL,在這種情況下,它應該存在於 Web 應用清單的範圍內。URL 也可以是相對 URL,在這種情況下,它會相對於 PWA 的 啟動 URL 解析。

所有其他快捷方式物件的屬性都是可選的,但您應該考慮提供它們,以使快捷方式對使用者更有用。

short_name

快捷方式的短名稱,當沒有足夠的空間顯示全名時會顯示此名稱。

description

快捷方式的描述。輔助技術,例如螢幕閱讀器,可以訪問此字串,以幫助使用者理解快捷方式的作用。

icons

要顯示在快捷選單中的影像物件陣列。每個影像物件都像 Web 應用清單的 icons 成員一樣進行處理,並可用於為不同的裝置要求提供不同大小的圖示。

另見