Progressive Web App Shortcuts 程式快速啟動選單

什麼是 App Shortcuts

App Shortcuts 提供程式快速啟動選單，透過這個捷徑用戶能夠更快速的使用各式功能，讓常用且關鍵的功能更容易被快速重複使用。

目前 PWA 快速啟動選單僅限於安裝完成的 Progressive Web App 相關的支援度如下

• Android (Chrome 84): 透過長按桌面上的 Icon
• Windows、macOS (Chrome 85 and Edge 85): 開始捷徑列上的 Icon 按右鍵
• Chrome OS (Chrome 92)

快速啟動選單 (圖片來源: https://web-dev)

App Shortcuts Menu 應用場景

那 PWA 快速啟動選單 (App Shortcuts Menu) 解決了什麼問題?

選單中的每個列表其實都可以看成一項用戶意圖 (user intent)，這個部分在 Web App 設計架構時就要將相關的 URL 一起設計進去整個 App 的 Scope 中，舉幾個適合的例子來說:

• 第一層導航欄: 首頁、最近的訂單
• 搜尋功能: 列車時刻就可以搭配個人常用起終點
• 任務: 寫一封新信、發一篇文章
• 常用活動: 打開跟家人的聊天群組

App 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
12

├── 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

• ← 上一篇
• 下一篇 →