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

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

François Beaufort
François Beaufort
GitHub
Jungkee Song
Jungkee Song
X GitHub

為了改善促進工作效率，並促進讀者再次參與重要工作。 網路平台現在支援應用程式捷徑。因此網頁程式開發人員 快速存取一些使用者經常需要執行的操作。

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

關於應用程式捷徑

應用程式捷徑可讓使用者在 網頁應用程式。只要開啟應用程式圖示，就能隨時隨地存取這些工作 提升使用者參與度工作效率，以及提高他們網路參與度 應用程式。

如要叫用應用程式捷徑選單，請在工作列中的應用程式圖示上按一下滑鼠右鍵 (Windows) 或 macOS (macOS)，或是輕觸會按住應用程式的 Android 上的啟動器圖示。

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

應用程式捷徑選單只會出現在符合下列條件的漸進式網頁應用程式中： 安裝於使用者的電腦或行動裝置上查看安裝 。單元，瞭解安裝性需求。

每個應用程式捷徑都會表示使用者意圖，每個意圖都與 網頁應用程式範圍內的網址。使用者啟動後即可開啟網址 應用程式捷徑應用程式捷徑範例如下：

  • 頂層導覽項目 (例如首頁、時間軸、最近的訂單)
  • 搜尋
  • 資料輸入工作 (例如撰寫電子郵件或推文、新增收據)
  • 活動 (例如與最常聯絡的聯絡人進行即時通訊)
，瞭解如何調查及移除這項存取權。

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

您可以選擇在網頁應用程式資訊清單中定義應用程式捷徑，這個 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 陣列的每個成員都是一個字典，當中至少包含 name 和 url。其他成員為選用成員。

name
應用程式捷徑的人類可讀標籤 向使用者顯示的結果
short_name (非必要)
在空間有限的情況下，使用清楚易懂的標籤。建議 即便是很正常的 選用。
description (非必要)
使用者容易理解的應用程式捷徑用途。 文本撰寫期間不會用到，但可能會接觸到輔助技術 。
url
使用者啟動應用程式時開啟的網址 快速鍵。這個網址必須存在於網頁應用程式資訊清單的範圍內。如果是 相對網址，基準網址將是網頁應用程式資訊清單的網址。
icons (非必要)

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

如要取得完美像素的圖示，請以 48 dp 為單位 (例如 36x36、 48x48、72x72、96x96、144x144、192x192 像素圖示)。如果沒有，則建議使用 一個 192x192 像素的圖示

為評估品質，圖示必須至少為裝置支援的螢幕尺寸一半 Android，48dp。舉例來說，如要在 xxhdpi 螢幕上顯示， 不得小於 72 x 72 像素。(衍生自 像素單位的轉換公式 dp 單位)。

測試應用程式捷徑

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

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

這個窗格提供清楚易懂的許多資訊清單版本 ，包括應用程式捷徑。讓您輕鬆驗證 捷徑圖示 (如有提供) 可正確載入。

由於漸進式階段，並非所有使用者都能立即使用應用程式捷徑 「網頁應用程式」更新上限為每天一次，進一步瞭解 Chrome 如何處理網頁應用程式資訊清單的更新。

最佳做法

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

捷徑會按照您在資訊清單中定義的順序顯示。 建議您依照優先順序將應用程式捷徑排序，因為對 應用程式捷徑顯示的數量會因平台而異。已開啟 Chrome 和 Edge 舉例來說，在 Windows 中，應用程式捷徑數量上限為 10 個， Android 螢幕僅限螢幕 3。在 Android 7 版 Chrome 92 以下版本中，則允許使用 4。Chrome 92 使用其中一個可用的捷徑，新增網站設定的捷徑 應用程式的版位

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

您不應仰賴圖示來區分應用程式捷徑，因為可能不然 並一律顯示在畫面上舉例來說，macOS 不支援位於 Dock 中的圖示 。為每個應用程式捷徑使用不同的名稱。

評估應用程式捷徑用量

建議您為應用程式捷徑 url 項目加上註解，方法與使用 start_url 用於數據分析 (例如 url: "/my-shortcut?utm_source=homescreen")。

瀏覽器支援

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

瀏覽器支援

  • Chrome：96.
  • Edge：96，
  • Firefox：不支援。
  • Safari：17.4。

資料來源

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

支援信任的網路活動

推薦使用 Bubblewrap 的工具建構採用「可信任網頁」技術的 Android 應用程式 活動：從網頁應用程式資訊清單中讀取應用程式捷徑，並自動 為 Android 應用程式產生對應的設定。請注意， 應用程式捷徑是必要項目，且至少必須為 96 x 96 像素 泡泡紙。

PWABuilder 是很好的工具，可協助您輕鬆將漸進式網頁應用程式轉換為可信任的應用程式 「網路和應用程式活動」支援應用程式捷徑，並附帶一些注意事項。

開發人員可手動將「信任的網路活動」整合至 Android 裝置 應用程式，也可以使用 Android 應用程式捷徑實作相同的程式碼。 行為

範例

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