Notification通知功能实现与优化的那些事儿

先看效果，再看代码

最近在项目里用到了 Notification 通知组件，效果很不错。简单来说，它就是那种右上角弹出来的消息提示，比如“保存成功”或者“网络错误”。我直接给个例子：

const notification = new Notification("操作成功", {
  body: "您的数据已成功保存",
  icon: "https://jztheme.com/assets/icon.png"
});

上面这段代码运行后，会在右上角弹出一个带标题和内容的通知框。亲测有效，浏览器支持度也挺高的。

这个场景最好用

Notification 最适合用在那些用户需要即时反馈的场景。比如说：

• 后台任务完成提醒：文件上传、数据导出这种耗时操作
• 系统级通知：新消息提醒、版本更新提示
• 错误警告：网络断开、权限不足等异常情况

这里有个小技巧，结合 setTimeout 可以控制显示时长：

function showNotification(title, body, duration = 3000) {
  const notif = new Notification(title, { body });
  setTimeout(() => notif.close(), duration);
}

showNotification("提醒", "您有新的消息", 5000);

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

用了这么久，我总结了几个常见的坑点：

1. 权限问题：不是所有浏览器都默认允许通知，必须先请求权限。建议这样写：

if (Notification.permission === "granted") {
  // 直接显示通知
} else if (Notification.permission !== "denied") {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      new Notification("权限已开启");
    }
  });
}

2. HTTPS限制：本地开发可以用 http://localhost，但线上环境必须是 HTTPS，否则会报错。
3. 关闭处理：有时候通知关不掉很烦人，记得加上 close() 方法。

进阶玩法：自定义样式和行为

原生 Notification 其实挺简陋的，只能改标题、内容和图标。如果想要更复杂的效果，比如按钮交互或者动画效果，就得自己封装了。这里分享一个我常用的封装方法：

class CustomNotification {
  constructor(title, options = {}) {
    this.title = title;
    this.options = options;
    this.duration = options.duration || 3000;
  }

  show() {
    const notification = new Notification(this.title, {
      body: this.options.body,
      icon: this.options.icon
    });

    notification.onclick = () => {
      if (this.options.onClick) this.options.onClick();
    };

    setTimeout(() => notification.close(), this.duration);
  }
}

// 使用示例
new CustomNotification("自定义通知", {
  body: "点击可以跳转页面",
  icon: "https://jztheme.com/assets/icon.png",
  onClick: () => window.open("https://jztheme.com")
}).show();

这样封装后不仅支持点击事件，还可以灵活控制显示时长。

浏览器兼容性那些事儿

虽然现在主流浏览器都支持 Notification API，但还是有些细节要注意：

• Safari 对通知的样式限制比较多，建议测试一下显示效果
• 移动端支持较差，特别是安卓自带浏览器基本没法用
• IE 完全不支持，Edge 没问题

我的解决方案是做个降级处理：

function notify(title, body) {
  if (!("Notification" in window)) {
    alert(${title}n${body}); // 降级到普通 alert
  } else if (Notification.permission === "granted") {
    new Notification(title, { body });
  }
}

拓展思路：还能怎么玩？

除了基本用法，我还尝试过这些高级玩法：

• 结合 Service Worker 实现离线通知
• 做消息队列，防止多个通知同时弹出
• 添加音效提示，提升用户体验

这个技术的拓展用法还有很多，后续会继续分享这类博客。以上是我踩坑后的总结，希望对你有帮助。