Progressive Web App Shortcuts: 程序快速启动选单 (9)

什麽是 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 选填


{
  "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/

├── blue/             
│  └── index.html     # 蓝色功能页
├── green/            
│  └── index.html     # 绿色功能页
├── red/              
│  └── index.html     # 红色功能页
├── yellow/           
│  └── index.html     # 黄色功能页
├── index.html        # 彩色功能整合首页
├── manifest.json     # Web App 配置档
└── sw.js             # Service Worker