PWA App Shortcuts 捷徑實作 增加長按圖示之快速啟動選單提升導航效率

什麼是 App Shortcuts？

App Shortcuts (應用程式捷徑) 是 Progressive Web App (PWA) 的一項功能，允許開發者在 Web App 的圖示上提供一個「快速啟動選單」。當使用者在行動裝置主畫面上長按圖示，或在電腦工作列上按右鍵時，會彈出預先定義的功能捷徑。這項功能的技術核心在於 Web App Manifest 中的 shortcuts 屬性，它能讓使用者跳過首頁加載，直接進入特定的深層頁面（如：撰寫新郵件、最近訂單），顯著提升了 Web App 的「重複使用率」與「操作效率」。

什麼是 App Shortcuts？PWA 快速啟動選單解析

App Shortcuts（應用程式捷徑）提供了一種類似原生 App 的「快速啟動選單」。透過這項功能，用戶不需要先開啟 App，就能直接從裝置的主畫面或工作列，快速進入 Web App 的特定功能頁面。

小編覺得這項功能對於提升「重複使用率」非常有幫助，特別是對於那些常用且關鍵的核心功能。

App Shortcuts 實作應用場景：滿足用戶意圖

那麼，PWA 的 快速啟動選單 究竟解決了什麼問題？

選單中的每個項目其實都可以看成一項「用戶意圖 (User Intent)」。小編建議在進行 App Shortcuts 實作 時，應優先考慮將以下高頻功能納入配置：

• 深度連結導航：如「最近的訂單」、「我的購物車」。
• 即時搜尋：如交通 App 預設「從家到公司」的起終點查詢。
• 快速任務：如「撰寫新郵件」、「發布新貼文」。

PWA 快速啟動選單介面範例 (圖片來源: Google Web Fundamentals)

Manifest shortcuts 配置教學

shortcuts 在 web app 的 manifest 中是選填欄位，manifest 這個檔案是一個 JSON 配置檔，瀏覽器就是透過這個檔案將 Progressive Web App 安裝到裝置上。

shortcuts 會是一個陣列，陣列中會有每個啟動選單的相關配置包含

• name、short_name: 名稱必填
• url: 捷徑連結必填
• description: 描述選填
• icons: 不同於主程式的 icon 選填

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
  "name": "Player FM",
  "start_url": "/",
  // … 其它配置
  "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 配置驗證技巧

要看快速啟動選單 (App Shortcuts Menu) 有沒有配置正確，最快的方式就是透過開發者工具中 Application Panel 裡面的 Manifest 來查看，如下圖。

shortcuts 配置驗證 (圖片來源: https://web-dev)

shortcuts 範例實做

整個架構就蠻簡單的，稍微改寫官方範例，如下所示根目錄為彩色功能整合首頁然後其它顏色的路徑則為子功能。

• 原始檔: https://github.com/LinYenCheng/pwa-app-shortcuts
• Demo 站台: https://linyencheng.github.io/pwa-app-shortcuts/

1
2
3
4
5
6
7
8
9
10
11

├── blue/
│  └── index.html     # 藍色功能頁
├── green/
│  └── index.html     # 綠色功能頁
├── red/
│  └── index.html     # 紅色功能頁
├── yellow/
│  └── index.html     # 黃色功能頁
├── index.html        # 彩色功能整合首頁
├── manifest.json     # Web App 配置檔
└── sw.js             # Service Worker

App Shortcuts 順序安排

由於不同的平台目前針對啟動選單的數量有著不同的限制，所以會建議仔細思考並妥善安排捷徑在配置檔中陣列的順序。

• 10 筆: Windows 的 Chrome、Edge
• 4 筆: Android 的 Chrome
• 3 筆: Android 7 的 Chrome 92

FAQ：App Shortcuts 常見問題

Q1：修改了 manifest 中的 shortcuts 後，已安裝的 PWA 會立即更新嗎？

A：不會。瀏覽器通常會緩存 manifest 文件。更新通常會在 PWA 完全關閉並重新啟動後，或在 24 小時內的下一次背景更新中生效。如果是在測試階段，建議解除安裝後重新安裝以立即查看結果。

Q2：iOS 支援 App Shortcuts 嗎？

A：目前 iOS (Safari) 尚未支援 Web App Manifest 中的 shortcuts 屬性。長按 PWA 圖示僅會顯示 iOS 預設的系統選單（如分享、移除 App 等）。這項功能目前主要活躍於 Android 與桌面版 Chromium 瀏覽器。

Q3：捷徑的 icons 建議使用什麼尺寸？

A：建議提供 192x192 的尺寸。為了符合各平台的視覺風格，建議使用「可遮罩圖示 (Maskable Icons)」，確保捷徑圖示在圓形或異形切割下依然美觀。

透過實作 App Shortcuts，您能讓 PWA 在日常使用中更具「即時感」。精選高頻功能並優化入口路徑，將使您的 Web App 成為使用者裝置上不可或缺的效率工具！

• ← 上一篇
• 下一篇 →