使用應用程式捷徑快速完成工作

應用程式捷徑可讓你快速存取一些使用者經常需要的操作。

François Beaufort
François Beaufort
Jungkee Song
Jungkee Song

為提升使用者的工作效率,並促進使用者再次與主要工作的互動,網站平台現已支援應用程式捷徑。可讓網頁程式開發人員快速存取一些使用者經常需要的操作。

本文將說明如何定義應用程式捷徑。此外,您也將學到一些相關最佳做法。

關於應用程式捷徑

應用程式捷徑可協助使用者在網頁應用程式中快速啟動常見或建議工作。應用程式圖示會顯示的位置,因此使用者可以隨時隨地輕鬆存取這些工作,除了有助提升工作效率,還能增進使用者與網頁應用程式的互動。

在使用者桌面中的工作列 (Windows) 或 macOS (macOS) 中,或在應用程式圖示上按一下滑鼠右鍵,或是在 Android 上按住應用程式的啟動器圖示,即可叫用應用程式捷徑選單。

螢幕截圖:在 Android 中開啟應用程式捷徑選單
Android 已開啟應用程式捷徑選單
Windows 上開啟的應用程式捷徑選單螢幕截圖
應用程式捷徑選單已在 Windows 中開啟

只有安裝在電腦或行動裝置上的漸進式網頁應用程式,才會顯示應用程式捷徑選單。請參閱「學習 PWA」模組中的「安裝」,瞭解安裝規定。

每個應用程式捷徑都會表示使用者意圖,每個意圖都與網頁應用程式範圍內的網址相關聯。系統會在使用者啟用應用程式捷徑時開啟網址。應用程式捷徑範例如下:

  • 頂層導覽項目 (例如首頁、時間軸、最近的訂單)
  • 搜尋
  • 資料輸入工作 (例如撰寫電子郵件或推文、新增收據)
  • 活動 (例如與最常聯絡的聯絡人進行即時通訊)

在網頁應用程式資訊清單中定義應用程式捷徑

您可以選擇在網頁應用程式資訊清單中定義應用程式捷徑,這是一個 JSON 檔案,用於向瀏覽器說明網頁應用程式,以及應用程式安裝在使用者的電腦或行動裝置上應如何行為。更具體來說,這些變數會在 shortcuts 陣列成員中宣告。以下是可能的網頁應用程式資訊清單範例。

{
  "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 陣列的每個成員都是一個字典,其中包含至少 nameurl。其他成員為選用成員。

name
向使用者顯示時,應用程式捷徑的人類可讀標籤。
short_name (非必要)
在空間有限的情況下,使用清楚易懂的標籤。雖然可以,但建議您還是提供。
description (非必要)
使用者容易理解的應用程式捷徑用途。請勿在撰寫時使用,但日後可能會接觸到輔助技術。
url
使用者啟動應用程式捷徑時開啟的網址。這個網址必須存在於網頁應用程式資訊清單的範圍內。如果是相對網址,基準網址會是網頁應用程式資訊清單的網址。
icons (非必要)

圖片資源物件的陣列。每個物件都必須包含 srcsizes 屬性。與網頁應用程式資訊清單圖示不同,圖片的 type 為選用項目。撰寫檔案時,系統不支援 SVG 檔案。請改用 PNG 格式。

如要提供完美像素的圖示,請以 48 dp 為單位 (例如 36x36、48x48、72x72、96x96、144x144、192x192 像素圖示)。否則,建議您使用一個 192 x 192 像素圖示。

為評估品質,圖示在 Android 裝置上至少必須為裝置所需大小的一半,也就是 48dp。舉例來說,如要在 xxhdpi 螢幕上顯示,圖示的大小至少必須為 72 x 72 像素。(衍生自像素單位的轉換公式 dp 單位)。

測試應用程式捷徑

如要檢查應用程式捷徑是否設定正確,請使用開發人員工具「Application」面板中的「Manifest」窗格。

開發人員工具中的應用程式捷徑螢幕截圖
開發人員工具中顯示的應用程式捷徑

此窗格提供容易理解的許多資訊清單屬性版本,包括應用程式捷徑。可讓您輕鬆驗證所有捷徑圖示 (如有提供) 是否正確載入。

由於漸進式網頁應用程式更新每天只能更新一次,因此部分使用者可能無法立即使用應用程式捷徑。進一步瞭解 Chrome 如何處理網頁應用程式資訊清單的更新

最佳做法

依優先順序排列應用程式捷徑

系統會按照你在資訊清單中定義捷徑的順序顯示捷徑。建議您依優先順序將應用程式捷徑排序,因為系統顯示的應用程式捷徑數量限制會因平台而異。舉例來說,在 Windows 上使用 Chrome 和 Edge 時,應用程式捷徑的數量限制為 10 個,Android 版 Chrome 則只會顯示 3。在 Android 7 版 Chrome 92 以下版本中,則允許使用 4。Chrome 92 新增了網站設定的捷徑,並擷取其中一個應用程式可用的快速指令運算單元。

使用獨特的應用程式捷徑名稱

您不應依賴圖示來區分應用程式捷徑,因為應用程式捷徑不一定每次都會顯示。舉例來說,macOS 不支援固定捷徑選單中的圖示。為每個應用程式捷徑使用不同的名稱。

評估應用程式捷徑用量

建議您為應用程式捷徑 url 項目加上註解,方法與為了分析目的 (例如 url: "/my-shortcut?utm_source=homescreen") 使用 start_url 時相同。

瀏覽器支援

應用程式捷徑支援下列平台和版本。

瀏覽器支援

  • 96
  • 96
  • x
  • 17.4 分

來源

螢幕截圖:在 ChromeOS 中開啟應用程式捷徑選單
應用程式捷徑選單已在 ChromeOS 中開啟

支援信任的網路活動

我們推薦使用 Trusted Web Activity 的 Android 應用程式 Bubblewrap,從網頁應用程式資訊清單中讀取應用程式捷徑,並自動產生 Android 應用程式的相應設定。請注意,應用程式捷徑的圖示「必要」項目,而且在 Bubblewrap 中不得小於 96 x 96 像素。

PWABuilder 是一款實用工具,可輕鬆將漸進式網頁應用程式轉換為受信任的網路活動,可支援應用程式捷徑,並搭配一些注意事項

開發人員可以手動將信任的網路活動整合至 Android 應用程式,可以使用 Android 應用程式捷徑來實作相同的行為。

範例

查看應用程式捷徑範例來源