Notification
Notifications API的Notification接口用于配置和向用户显示桌面通知。通知的外观和特定功能因平台而异。
Notification能够为用户提供异步的桌面消息通知,即使缩小浏览器或是活动在其他标签页,只要调用该API的标签页没有被关闭,它都能工作。在桌面浏览器中,除IE不支持外,其他均已支持。
状态值
permission:只读属性,表示当前显示的通知权限的字符串
- denied:拒绝显示通知
- granted:接受显示通知
- default:未选择,浏览器默认将其当做拒绝的行为
授权
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()
事件处理
监听用户点击通知时,可以为实例添加事件
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 文档上提示,onshow
和 onclose
是一个过时的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 })