應用程式捷徑可讓您快速存取使用者經常需要的常用動作。
為提升使用者的工作效率，並促進使用者再次參與重要任務，網路平台現已支援應用程式捷徑。可讓網頁程式開發人員能夠快速存取使用者經常需要執行的幾項常見操作。
本文將說明如何定義應用程式捷徑。此外，您也會學到一些相關的最佳做法。
關於應用程式捷徑
應用程式捷徑可協助使用者在您的網頁應用程式中快速啟動常見或推薦工作。從應用程式圖示顯示的任何位置都能輕鬆存取這些工作，不僅有助於提升使用者的工作效率，也增進使用者對網頁應用程式的參與度。
在使用者桌面的工作列 (Windows) 或固定 (macOS) 中的應用程式圖示上按一下滑鼠右鍵，或在 Android 上按住應用程式的啟動器圖示，即可叫用應用程式捷徑選單。
只有安裝在使用者電腦或行動裝置上的漸進式網頁應用程式，才會顯示應用程式捷徑選單。如要瞭解可安裝性規定，請參閱「瞭解 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 陣列的每個成員都是一份字典，且至少包含 name 和 url。其他成員則為選用。
name- 向使用者顯示的應用程式捷徑標籤 (使用者可理解)。
short_name(非必要)- 空間有限的人類可讀標籤。雖然這是選填欄位，但建議您仍然提供這項資訊。
description(非必要)- 使用者可理解的應用程式捷徑用途。於撰寫本文時不使用，但日後可能會暴露於輔助技術。
url- 使用者啟用應用程式捷徑時開啟的網址。這個網址必須存在於網頁應用程式資訊清單的範圍內。如果是相對網址，基準網址會是網頁應用程式資訊清單的網址。
icons(非必要)圖片資源物件的陣列。每個物件都必須包含
src和sizes屬性。與網頁應用程式資訊清單圖示不同，圖片的type為選用項目。撰寫時不支援 SVG 檔案。請改用 PNG。如果你想取得完美像素的圖示，請以 48dp 為單位來提供這些圖示 (例如 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 個。在 Chrome 92 for Android 7 之前，第 4 版已允許。Chrome 92 新增了網站設定捷徑，採用其中一個可用的應用程式捷徑位置。
使用不同的應用程式捷徑名稱
請勿依賴圖示區分應用程式捷徑，因為系統不一定每次都能顯示這些捷徑。舉例來說，macOS 不支援 Dock 捷徑選單中的圖示。為每個應用程式捷徑使用不同名稱。
評估應用程式捷徑使用情形
建議您像使用 start_url 一樣，為應用程式捷徑 url 項目加上註解，以便進行分析 (例如 url:
"/my-shortcut?utm_source=homescreen")。
瀏覽器支援
應用程式捷徑適用於下列平台和版本。
支援信任的網路活動
Bubblewrap 是推薦的工具，可用來建構使用可信任網路活動的 Android 應用程式，可從網頁應用程式資訊清單中讀取應用程式捷徑，並自動產生 Android 應用程式對應的設定。請注意，應用程式捷徑的圖示必須在 Bubblewrap 中至少 96 x 96 像素。
PWABuilder 是實用工具，可輕鬆將漸進式網頁應用程式變成可信任的網路活動，並支援某些注意事項的應用程式捷徑。
如果開發人員要手動將受信任的網路活動整合到 Android 應用程式中，可以使用 Android 應用程式捷徑實作相同的行為。