Notification API,为你的网页添加桌面通知推送

Notification 是什么

MDN:

Notifications API 的 Notification 接口用于配置和向用户显示桌面通知。这些通知的外观和特定功能因平台而异,但通常它们提供了一种向用户异步提供信息的方式。

其实,MDN 的说明已经可以让我们很清楚知道 Notification 的作用。Notification 能够为用户提供异步的桌面消息通知,即使你缩小浏览器或是活动在其他标签页,只要调用该 Api 的标签页没被关闭,它都能工作。在桌面端的浏览器中,除了 IE 不支持外,其他就均已支持。

以下只提到常用的属性及其方法,更全的看MDN文档: https://developer.mozilla.org/en-US/docs/Web/API/notification

状态值

permission:

只读属性,表示当前显示通知权限的字符串,为以下值:

  • denied: 拒绝显示通知
  • granted: 接受显示通知
  • default: 未选择,浏览器默认将其当作拒绝的行为
Notification.permission

授权

requestPermission:

向用户请求显示通知的权限。只有当 permission 的值为 default 时调用此方法,右上角才会显示授权弹窗。如果用户此前已选择过,那么再次调用直接返回状态值。

Notification.requestPermission().then(res => {
  // denied 或 granted
  console.log(res) 
})

需要注意的是,用户如果选择拒绝后,再次调用也不会弹出授权提示。想要再次更改状态,只能由用户手动设置:

  • 第一种:点击地址栏前的小按钮(感叹号或小锁),设置通知状态
  • 第二种:chrome 浏览器右上角 设置 >> 隐私设置和安全性 >> 网站设置 >> 通知

构造实例

new Notification(title[,options])

当用户允许授权后,构造实例后,浏览器就会弹窗提示。

let notification = new Notification('通知标题', {
  // 正文内容
  body: '已经错过的风景就不要再打听了,当你选定了一个方向,另一边的风景便与你无关了。',
  // 图标
  icon: 'https://common.cnblogs.com/images/wechat.png',
  // 预览大图
  image: 'https://user-gold-cdn.xitu.io/2020/5/18/1722800bd522f520?imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1',
  // 通知id
  tag: 1,
  // 是否一直保持有效
  requireInteraction: true
})

tag:

通知的ID,默认 tag 为空。当 tag 相同时,重复构造实例,新通知会替换旧通知。反之,通知不会替换,而是像楼层一样叠加。同样的,忽略 tag 属性,通知也不会替换。

requireInteraction:

通知是否保持,不会自动关闭。默认为 false,会自动关闭。当设置为 true 时,由用户手动关闭或调用实例的 close 方法进行关闭。

notification.close()

事件处理

监听用户点击通知时,可以为实例添加事件:

let notification = new Notification('通知标题', {
  body: '已经错过的风景就不要再打听了,当你选定了一个方向,另一边的风景便与你无关了。',
  icon: 'https://common.cnblogs.com/images/wechat.png',
  image: 'https://user-gold-cdn.xitu.io/2020/5/18/1722800bd522f520?imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1',
  tag: 1
})

notification.onclick = function () {
  alert('用户点击了通知')
}

如果想要在事件内获取一些自定义参数信息,可以为实例添加 data 属性:

let notification = new Notification('通知标题', {
  body: '已经错过的风景就不要再打听了,当你选定了一个方向,另一边的风景便与你无关了。',
  icon: 'https://common.cnblogs.com/images/wechat.png',
  image: 'https://user-gold-cdn.xitu.io/2020/5/18/1722800bd522f520?imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1',
  tag: 1,
  data: {
    url: 'https://juejin.im'
  }
})

notification.onclick = function (e) {
  window.open(e.target.data.url, '_blank')
}

实例上还可以绑定事件 show(显示通知时触发) 、close(关闭通知时触发)、error(通知错误时触发)。

MDN 文档上提示,onshowonclose 是一个过时的API,不保证可以正常工作。但在 chrome 浏览器测试使用这两个 API,还是能够工作的,最好还是慎用吧。

封装Notification

为了方便调用,简单封装创建 Notification 的方法,在原基础上加入消息时长配置

/*
* @param {string} title - 消息标题
* @param {object} options - 消息配置
* @param {number} duration - 消息时长
* @param {function} onclick
* @param {function} onshow
* @param {function} onclose
* @param {function} onerror
* @return {object}
*/
async function createNotify(data) {
  // 一些判断
  if (window.Notification) {
    if (Notification.permission === 'granted') {
      return notify(data)
    } else if (Notification.permission === 'default') {
      let [err, status] = await Notification.requestPermission().then(status => [null, status]).catch(err => [err, null])
      return err || status === 'denied' ? Promise.reject() : notify(data)
    }
  }
  // 构造实例
  function notify(data) {
    let { title, options, duration } = data
    options.requireInteraction = true
    let notification = new Notification(title, options)
    setTimeout(()=> notification.close(), duration || 5000)
    // 绑定事件
    let methods = ['onclick', 'onshow', 'onclose', 'onerror']
    for(let i = 0; i < methods.length; i++) {
      let method = methods[i]
      if (typeof options[method] === 'function') {
        notification[method] = options[method]
      }
    }
    return notification
  }
  return Promise.reject()
}

使用

createNotify({
  title: '标题',
  options: {
    body: '消息内容'
  },
  duration: 3000
})

浏览器支持

PC 端支持还不错,移动端就基本一片红了...

兼容性查询:https://www.caniuse.com/#search=Notification

posted @ 2020-05-20 22:24  WahFung  阅读(1507)  评论(0编辑  收藏  举报
Live2D