Web端FCM推送通知点击打开外部URL实现方法咨询

Web端完全可以实现点击FCM推送通知打开外部URL，以下是具体实现细节：

一、后端构造推送Payload #

发送FCM通知时，需要在payload中通过data字段自定义存储目标外部URL，同时保留notification字段的基础通知信息：

{
  "notification": {
    "title": "新通知",
    "body": "点击查看外部链接内容"
  },
  "data": {
    "externalUrl": "https://example.com"
  },
  "to": "<目标设备的FCM令牌>"
}

二、前端Service Worker处理点击事件 #

在你的FCM Service Worker文件（通常命名为firebase-messaging-sw.js）中，监听notificationclick事件，取出预存的URL并调用浏览器API打开：

self.addEventListener('notificationclick', (event) => {
  // 关闭当前通知
  event.notification.close();
  
  // 从通知数据中获取外部URL
  const targetUrl = event.notification.data?.externalUrl;
  
  if (targetUrl) {
    // 等待打开新窗口完成
    event.waitUntil(
      clients.openWindow(targetUrl)
    );
  }
});

注意事项 #

• 确保Service Worker已完成注册，且FCM前端初始化配置正确
• 外部URL必须使用HTTPS协议（本地开发环境可使用localhost）
• 若用户浏览器处于关闭状态，点击通知会先打开Web应用的注册作用域页面，再自动跳转至外部URL，这是浏览器的安全限制导致的默认行为

内容的提问来源于stack exchange，提问作者Ahammad Jaffer C A