JavaScript：如何避免多标签页接收WebSocket消息时重复推送通知

这问题我之前做项目时也踩过坑！多标签页同时弹通知确实烦得要死，给你几个经过实践验证的解决思路：

Broadcast Channel是浏览器专门提供的同域标签页通信API，能让我们轻松同步各标签页的通知状态，避免重复推送。

核心思路：当某个标签页准备发送通知时，先通过广播频道告知其他标签页“我要发通知了”，其他标签页收到消息后就跳过自己的通知逻辑；同时自身发送通知后，用sessionStorage记录最近通知时间，做双重校验。

代码示例：

// 创建专属的通知广播频道
const notificationChannel = new BroadcastChannel('app_notification_channel');

// 监听其他标签页的通知广播
notificationChannel.addEventListener('message', (e) => {
  if (e.data.type === 'notification_triggered') {
    // 标记已有标签页发送过通知，有效期3秒
    sessionStorage.setItem('last_notify_time', Date.now().toString());
  }
});

// 处理WebSocket消息的核心函数
function handleWebSocketMsg(parsedData) {
  const now = Date.now();
  const lastNotifyTime = parseInt(sessionStorage.getItem('last_notify_time') || 0);

  // 校验：3秒内未发送过通知才继续
  if (now - lastNotifyTime > 3000) {
    // 推送通知
    new Notification(parsedData.title, { body: parsedData.content });

    // 通知其他标签页：我已经发过通知了
    notificationChannel.postMessage({ type: 'notification_triggered' });

    // 更新本地记录
    sessionStorage.setItem('last_notify_time', now.toString());
  }
}

Service Worker是运行在浏览器后台的独立进程，天生就是单例模式，完全不受多标签页的影响。把通知逻辑放到Service Worker里，不管多少标签页收到WebSocket消息，最终只会由Service Worker统一判断是否推送通知。

步骤如下：

1. 主页面注册Service Worker，并将WebSocket消息转发给它
2. Service Worker内部处理通知逻辑，用时间戳避免重复推送

主页面代码：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker 注册成功');

      // 监听WebSocket消息，转发给Service Worker
      yourWebSocketInstance.addEventListener('message', (event) => {
        const data = JSON.parse(event.data);
        // 确保Service Worker激活后再发消息
        if (registration.active) {
          registration.active.postMessage({ 
            type: 'show_notification', 
            payload: { title: data.title, content: data.body } 
          });
        }
      });
    })
    .catch(err => console.error('Service Worker 注册失败:', err));
}

Service Worker文件（sw.js）：

// 记录最近一次通知时间，Service Worker内部变量，全局唯一
let lastNotificationTimestamp = 0;

self.addEventListener('message', (e) => {
  if (e.data.type === 'show_notification') {
    const now = Date.now();
    // 5秒内不重复推送（可根据需求调整）
    if (now - lastNotificationTimestamp > 5000) {
      self.registration.showNotification(e.data.payload.title, {
        body: e.data.payload.content,
        // 可选：添加图标等参数
        icon: '/path/to/notification-icon.png'
      });
      lastNotificationTimestamp = now;
    }
  }
});

这个方案是最可靠的，不仅能解决多标签页重复问题，还支持后台推送（即使所有标签页关闭，只要Service Worker在运行，就能接收消息并推送通知）。

如果暂时没法用上面两种方案，可以用LocalStorage做一个简易的“互斥锁”，通过时间戳判断是否需要推送通知。不过要注意，极端情况下可能存在竞态条件（两个标签页同时检查时间戳，都认为可以推送），但配合短时间的锁有效期，实际发生概率很低。

代码示例：

function handleWebSocketMsg(parsedData) {
  const now = Date.now();
  const lockKey = 'notification_lock';
  const lockExpiry = parseInt(localStorage.getItem(lockKey) || 0);

  // 当前时间超过锁的过期时间，才允许推送
  if (now > lockExpiry) {
    // 设置锁，有效期5秒
    localStorage.setItem(lockKey, (now + 5000).toString());

    // 推送通知
    new Notification(parsedData.title, { body: parsedData.content });

    // 可选：过期后自动清除锁
    setTimeout(() => {
      const currentLock = localStorage.getItem(lockKey);
      if (currentLock === (now + 5000).toString()) {
        localStorage.removeItem(lockKey);
      }
    }, 5000);
  }
}

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