Question

网页也可以以桌面弹框的形式进行通知，先看个效果图： 有头像，有标题，有文本， 点击消息通知还能让窗体聚焦 ，真帅。

代码

function doNotify(title, options = {}, events = {}) {
  const notification = new Notification(title, options);
  for (let event in events) {
    notification[event] = events[event];
  }
}

function notify(title, options = {}, events = {}) {
  if (!("Notification" in window)) {
    return console.error("This browser does not support desktop notification");
  }
  else if (Notification.permission === "granted") {
    doNotify(title, options, events);
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {       
      if (permission === "granted") {
        doNotify(title, options, events);
      }
    });
  }
}
复制代码

示例 tag 还可以用去重消息。

   notify("中奖提示", {
      icon: "https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image",
      body: "恭喜你，掘金签到一等奖",
      tag: "prize"
    }, {
      onclick(ev) {
        console.log(ev);
        ev.target.close();
        window.focus();
      }
    })

参考引用 notification 使用 Web Notifications