Web推送通知点击跳转：选择Service Worker还是click_action？

嘿，我来给你好好捋捋FCM web推送点击跳转的两种实现思路，帮你搞清楚该选哪个，还有怎么搞定点击统计的问题～

两种实现方式的对比 #

1. 直接用click_action字段 #

这是最省心的方案，后端在发送推送请求的时候，直接在webpush的notification payload里加上click_action，指定好要跳转的URL就行。举个HTTP v1 API的payload例子：

{
  "message": {
    "webpush": {
      "notification": {
        "title": "你有新消息啦",
        "body": "点击查看详情",
        "click_action": "/order-detail?orderId=456"
      }
    },
    "token": "用户的推送令牌"
  }
}

• 优势：零前端额外代码，后端配置好就能用，适合需求简单的场景。
• 劣势：灵活性极差，只能跳固定地址，没法根据通知内容动态调整跳转路径；而且统计点击行为很受限，只能靠跳转后的页面埋点，还得在URL里加标记区分来源，数据准确性也一般。

2. Service Worker监听notificationclick事件 #

这种是更现代、更灵活的方案，需要你在Service Worker文件里写一段事件监听代码，自己完全掌控点击后的逻辑。比如：

self.addEventListener('notificationclick', (event) => {
  // 先把通知关掉
  event.notification.close();
  
  // 这里可以放飞自我做任何操作
  event.waitUntil(
    // 动态跳转，用通知里带的自定义数据拼地址
    clients.openWindow('/order-detail?orderId=' + event.notification.data.orderId)
    .then(() => {
      // 点击瞬间直接上报统计数据
      fetch('/analytics/push-click', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          notificationId: event.notification.data.notifId,
          userId: '当前用户ID',
          clickTime: Date.now()
        })
      });
    })
  );
});

• 优势：简直是全能选手！你可以拿到通知里的所有自定义数据（只要后端在payload的data字段里传了），动态生成跳转地址；还能在点击的第一时间上报统计，数据更准确；甚至可以判断当前浏览器有没有打开目标页面，直接激活而不是新开窗口，体验更好。
• 劣势：需要你对Service Worker有基础了解，得自己写代码，比click_action多花点功夫，但这点投入绝对值得。

怎么选？ #

• 需求简单（固定跳转地址，不需要统计）：选click_action，省事儿。
• 要动态跳转、要精准统计、要自定义逻辑：选Service Worker的notificationclick监听，这才是长期的最优解。

关于点击统计的补充 #

• 用click_action的话，得在URL里加个标记参数，比如/order-detail?orderId=456&from=push，然后在页面加载时读取这个参数，上报“用户通过推送点击进入”的事件。但这种方式没法区分用户是真的点击了通知，还是手动输了带参数的URL，数据有误差。
• 用Service Worker的话，点击事件触发的瞬间就能直接调用统计接口，还能带上通知ID、用户信息等关键数据，统计结果精准得多，也能做更细致的分析。

备注：内容来源于stack exchange，提问作者NoobCoder