被埋没的桌面通知 Notification 技术

昨天在阿里云上申请 SSL 证书，突然听到“叮”的声音，电脑右侧滑出证书审核通过的通知。这个通知效果，瞬间将我的记忆拉回到多年前，初学前端技术时的场景，我记得没错的话，当时是跟着这本《HTML5基础知识核心案例》敲出来的效果，没想到多年后还能再次看到这个通知，那么今天就来重新玩一下这个有趣的功能。

最终效果

定义

根据 MDN 官方文档定义：

Notification 接口用于向用户配置和显示桌面通知。这些通知的外观和功能因平台而异，通常提供异步信息传递能力。

前置条件

1. 用户必须开启通知权限（不同系统授权方式不同）
2. Windows 系统需关闭系统通知中心的免打扰模式（注意：我在windows系统测试的时候，发现系统可能会自动重新开启该免打扰，我觉得很离谱，明明关掉了，过了一会儿，自己又打开了）
3. chrome浏览器左上角感叹号可以开启通知（视频里也有操作）

权限验证机制

通过调用 Notification.permission 获取三种状态：

• denied: 用户明确拒绝
• granted: 用户明确授权
• default: 未明确选择（按拒绝处理）

完整实现示例

const sendNotification = () => {
  const status = window.Notification?.permission;
  
  if (status === "granted") {
    const notification = new Notification("关注微信公众号：梨的前端小屋", {
      icon: '/public/pear.ico',
      body: '带你走进前端的世界',
      requireInteraction: true, // 用户不点击的话，通知会一直存在
      image: '/public/bg.png',
    });

    notification.onclick = () => {
      window.open("https://www.pear-space.com/");
    };
  } else {
    alert("请先授权通知权限");
  }
}

天马行空

他的技术场景是否可以用于，报警通知、工单状态跟踪、审批通知？还可以自定义铃声，当通知发出去后，播放自定义的video标签，甚至还可以写个小应用，每小时提醒喝水，哈哈哈。为什么在web网页却很少使用这个api呢，估计是用户授权繁琐，浏览器厂商担心广告推送泛滥，所以导致这个api被埋没了？

ok行吧，这样我们就实现了一个有趣的通知功能，是不是很炫酷，是不是很好玩？这不就是当年想做前端的初衷吗？。而且它还可以控制移动端震动，通知创建时间等等，更多有趣的玩法可以去查阅下官方的文档。

我的微信公众号： 梨的前端小屋