浏览器通知Notification Api的使用

实现的效果如下：

不同的浏览器，不同的PC设备显示的样式各有千秋。

windows：chrome浏览器

windows:360极速浏览器

MacOs：Chrome浏览器

如何使用Notification ？

1.检查当前浏览器是否支持Notification Api

if (!('Notification' in window)) {
    return this.$noticeTips.error(this.$t('当前浏览器不支持通知'))
  }

2.检查权限

发送通知需要用户授权，通过只读属性 Notification.permission 获取是否有权限，其属性值有

• granted：用户已明确授权显示通知的权限

if (window.Notification.permission === 'granted') {
    //do something
}

• denied：用户已明确拒绝显示通知的权限

if (window.Notification.permission === 'denied') {
    this.$noticeTips.error(this.$t('通知权限尚未开启'))
}

• default：用户还未被询问是否授权

通过 Notification.requestPermission 去申请权限

if (window.Notification.permission === 'default') {
        window.Notification.requestPermission((res) => {
          console.log('Notification.requestPermission', res)
        })
  }

此时浏览器会弹窗询问你是否授权

允许：res会打印 granted 表示已授权

禁止：res会打印 denied 表示已拒绝

X号： res会打印 default 下次还会弹窗询问你

3.创建通知

通过 new Notification("title", options) 创建一条通知其中title是必填参数，使用 options 对通知做一些自定义设置，包含

不同浏览器的实现样式略有不同，js代码不能控制具体的位置和样式，可以确定标题，内容，和一个系统icon。对于chrome浏览器，一般几秒钟后会被自动关闭，其他浏览的各个版本实现各有不同

当通知创建后会被立即显示出来，过一段时间会自动关闭，包含 4 个事件

• onshow：当通知显示时触发
• onclick：当用户点击通知后触发（点击后通知会被关闭）
• onclose：当使用 notice.close.bind(notice) 关闭通知后触发（自动关闭的通知无法触发）
• onerror：当通知无法显示给用户时触发（常见于没有用户没有授权）

Notifications API 兼容性如下

Notifications API - Web API 接口参考 | MDN

完整代码如下：

Notification.requestPermission((res) => {
        if (res !== 'granted') return // 未授权通知
        const notice = new Notification('J&T Notification', {
          body: `${_this.$t('您刚刚收到一条新通知，单击即可立即查看')}`,
          icon: noticeImg,
          renotify: false, // 重复的 tag 是否再次通知，默认 false 不重复通知
          requireInteraction: false, // 是否强制手动关闭，默认 false 会自动关闭
          silent: false, // 是否静音
          image: noticeImg
        })
        notice.onshow = function () {
          console.log('show')
          setTimeout(notice.close.bind(notice), 5000) //五秒后自动关闭
        }
        notice.onclick = function () {
          //do something
        }
         notice.onclose = function () {
          console.log('close')
         }
         notice.onerror = function () {
           console.log('error')
         }
      })