HTML5 桌面通知

Notification

Properties

title:"标题:"body:"内容"icon:"图片地址"C/em%3>tag:"1"// 通知框ID，相同id可替换，而不是出现新的通知框lang:""// 语言dir:"auto"// 文字方向

new Notification('别动神仙说：', {
  body: '这里是body',
  icon: 'http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40',
  tag: 1
});

onshow: null // 显示通知框时调用onclick: null // 点击通知框时调用onclose: null // 点击通知框关闭按钮时调用onerror: null

例如实现通知弹出一段时间后自动关闭

var notification = new Notification('标题');
notification.onshow = function () {
  setTimeout(function () {
    notification.close();
  }, 3000);
}

Notification.permission 有三种状态

• default：未设置过为这个状态，通过Notification.requestPermission()可以询问用户是否允许通知
• granted：用户点击允许后的状态
• denied： 用户点击拒绝后的状态，通知框不可用

---

Methods

Notification.requestPermission() 一般在Notification.permission === 'default'时，用户通过点击等操作调用

document.onclick = function() {
  Notification.requestPermission()
}
使用回调
Notification.requestPermission(function (permission) {
  // 可在确认后直接弹出
  if (permission === 'granted') {
    var notification = new Notification('弹窗');
  }
});
Notification.close() 通知框关闭
function notify() {
  if (!("Notification"in window)) {
    alert("This browser does not support desktop notification");
    return;
  }

  if (Notification.permission ==="granted") {
    var notification = new Notification("Hi there!");
  }
  else if (Notification.permission === 'default') {
    Notification.requestPermission(function (permission) {
      if (permission ==="granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }
}