前端Notification通知的实战踩坑与最佳实践

核心代码就这几行，但坑不少

最近在做一个后台管理系统，客户要求用户操作成功后要有桌面通知提醒。我一开始以为很简单，不就是 new Notification() 吗？结果一上手才发现，这玩意儿的坑比想象中多得多。今天就把实战中踩过的雷、亲测有效的写法都整理出来，省得你再折腾半天。

先说最基础的用法：弹一个通知。代码确实很短：

if (Notification.permission === 'granted') {
  new Notification('操作成功', {
    body: '您的数据已保存',
    icon: '/favicon.ico'
  });
} else if (Notification.permission === 'default') {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      new Notification('操作成功', { body: '您的数据已保存' });
    }
  });
}

但别急着复制粘贴，这里注意下，我踩过好几次坑：浏览器不会自动帮你申请权限，必须由用户主动触发（比如点击按钮），否则 requestPermission() 在某些浏览器里会直接静默失败，连个错误都不报。所以千万别在页面加载时就调用，一定要绑定在用户交互事件里，比如：

document.getElementById('saveBtn').addEventListener('click', () => {
  // 这里再调用通知逻辑
});

这个场景最好用：带点击跳转的通知

很多项目里，通知不只是提示，还要能点进去查看详情。比如订单状态变更，点通知直接跳到订单页。这个需求很常见，实现起来也不难，关键是要监听 click 事件：

const notify = new Notification('新订单', {
  body: '订单 #12345 已创建',
  icon: '/icons/order.png'
});

notify.onclick = () => {
  window.focus(); // 让页面获得焦点
  window.open('https://jztheme.com/orders/12345', '_blank');
  notify.close(); // 手动关闭通知
};

注意两点：一是 window.focus() 很重要，不然用户切回页面时可能还在后台；二是一定要调用 notify.close()，否则通知会一直挂在系统托盘里，特别烦人。我之前漏了这行，被产品经理骂了三次。

踩坑提醒：这三点一定注意

1. **Safari 的兼容性问题**：Safari 要求通知必须在 HTTPS 环境下才能使用，本地开发用 http://localhost 是可以的，但一旦部署到 HTTP 服务器上就直接失效。我有一次上线后发现 Safari 用户收不到通知，折腾了半天才意识到是协议问题。建议直接上 HTTPS，现在 Let’s Encrypt 免费证书这么方便，别省这点事。

2. **移动端基本没戏**：iOS 的 Safari 和 Android 的 Chrome 对桌面通知支持非常有限，尤其是 iOS，基本等于不支持。如果你的项目要适配移动端，别指望靠这个做消息提醒，还是老老实实用 App 内 Toast 或者推送服务吧。

3. **权限状态有三种，别只判断 granted**：Notification.permission 可能是 'granted'、'denied' 或 'default'。很多人只处理前两种，结果用户第一次访问时啥也不弹。正确的做法是：如果是 'default'，就主动申请权限；如果是 'denied'，那就别再骚扰用户了，可以引导他们去浏览器设置里手动开启。

高级技巧：批量通知别刷屏

遇到高频操作时（比如聊天消息），如果每条都弹通知，用户电脑右下角会疯狂刷屏，体验极差。我的解决方案是：**合并通知 + 防抖**。

具体做法是：维护一个待发送的通知队列，用 setTimeout 延迟 2 秒发送。如果 2 秒内又有新消息，就清掉之前的定时器，重新计时。最后把多条消息合并成一条通知展示，比如「您有 3 条新消息」。

let notifyTimer = null;
let messageCount = 0;

function enqueueMessage() {
  messageCount++;
  if (notifyTimer) clearTimeout(notifyTimer);
  
  notifyTimer = setTimeout(() => {
    if (Notification.permission === 'granted') {
      new Notification(`您有 ${messageCount} 条新消息`, {
        body: '点击查看最新消息',
        icon: '/icons/chat.png'
      });
    }
    messageCount = 0;
  }, 2000);
}

这个方案不是最优的（比如无法显示具体消息内容），但最简单且有效。如果你需要更精细的控制，可以考虑用 Service Worker 接管通知，不过那又是另一个复杂度了，普通项目真没必要。

别忘了处理错误和边界情况

虽然 Notification API 看似简单，但实际运行中可能出各种意外。比如用户突然禁用通知权限，或者浏览器不支持（老旧 IE 就别想了）。所以加个 try-catch 是基本操作：

function showNotification(title, options = {}) {
  if (!('Notification' in window)) {
    console.warn('当前浏览器不支持通知');
    return;
  }

  try {
    if (Notification.permission === 'granted') {
      new Notification(title, options);
    } else if (Notification.permission === 'default') {
      Notification.requestPermission().then(perm => {
        if (perm === 'granted') {
          new Notification(title, options);
        }
      });
    }
  } catch (error) {
    console.error('通知发送失败:', error);
  }
}

另外，有些浏览器（比如 Firefox）在无痕模式下会自动拒绝通知权限，而且不会弹出授权弹窗。这种情况下，你的代码不会报错，但用户就是收不到通知。目前没有完美解法，只能在 UI 上加个提示：「如未收到通知，请检查浏览器设置」。

结尾碎碎念

总的来说，Web Notification 是个「看起来简单，用起来麻烦」的功能。它适合用在桌面端的管理后台、邮件系统这类场景，但千万别对移动端抱有幻想。我的建议是：先确认产品需求是否真的需要桌面通知，如果只是普通提示，用 Ant Design 或 Element UI 自带的 Message 组件更省心。

以上是我踩坑后的总结，希望对你有帮助。这个技术的拓展用法还有很多（比如结合 Service Worker 做离线通知），后续会继续分享这类博客。有更优的实现方式欢迎评论区交流，特别是 Safari 兼容性这块，如果你有更好的方案，求分享！