基于FCM的离线可安装PWA能否生成带双按钮的Android推送通知？

当然可以！完全没问题——你完全能给已安装的这款PWA发送带两个操作按钮的Android推送通知，这是FCM结合PWA推送API支持的标准功能，实现起来也不算复杂。下面是具体的实现步骤和注意事项：

1. 后端构造带操作按钮的FCM消息 #

在你发送FCM推送请求时，只需要在notification字段中添加actions数组，每个数组元素对应一个按钮的配置。这里给你一个示例的JSON payload：

{
  "to": "用户的FCM订阅令牌",
  "notification": {
    "title": "新订单提醒",
    "body": "你有一笔待处理的订单",
    "actions": [
      {
        "action": "ACCEPT_ORDER",
        "title": "接受订单",
        "icon": "/icons/accept-icon.png"
      },
      {
        "action": "REJECT_ORDER",
        "title": "拒绝订单",
        "icon": "/icons/reject-icon.png"
      }
    ]
  },
  "data": {
    "orderId": "ORD-12345"
  }
}

这里的关键参数说明：

• action：每个按钮的唯一标识，前端会通过这个值区分不同的按钮点击
• title：按钮上显示的文字
• icon：可选，按钮左侧显示的图标（建议用符合Android规范的尺寸，比如24x24dp）

2. 前端Service Worker处理按钮点击事件 #

接下来需要在你的PWA的Service Worker中监听notificationclick事件，根据用户点击的按钮action执行对应的逻辑。示例代码如下：

self.addEventListener('notificationclick', (event) => {
  // 先关闭弹出的通知
  event.notification.close();

  // 根据按钮的action值执行不同操作
  switch (event.action) {
    case 'ACCEPT_ORDER':
      // 处理"接受订单"的逻辑，比如调用后端API更新订单状态
      event.waitUntil(
        fetch(`/api/orders/${event.notification.data.orderId}/accept`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          }
        })
      );
      break;
    case 'REJECT_ORDER':
      // 处理"拒绝订单"的逻辑，比如打开订单详情页让用户填写拒绝理由
      event.waitUntil(
        clients.openWindow(`/orders/${event.notification.data.orderId}?action=reject`)
      );
      break;
    default:
      // 用户点击了通知主体而非按钮，默认打开PWA主页
      event.waitUntil(
        clients.openWindow('/')
      );
  }
});

3. 重要注意事项 #

• 确保你的PWA已经正确安装到Android设备：只有安装后的PWA（而非在浏览器中打开的网页）才能像原生应用一样接收带操作按钮的通知，浏览器内的推送通常不支持操作按钮。
• 权限检查：确保用户已经授权了通知权限，否则无法接收推送。
• 图标适配：按钮图标要符合Android的设计规范，避免显示模糊或拉伸。
• 兼容性：目前Android上的Chrome、Edge等主流浏览器都支持这个功能，不过建议测试不同设备和浏览器版本的表现。

内容的提问来源于stack exchange，提问作者Tom