Notification桌面消息通知

Notification桌面消息通知

通过Notification实现桌面弹出浏览器消息对话框

浏览器最小化后展示电脑桌面级消息通知，避免由于最小化导致的消息查看不及时问题。

代码示例

descNotice({
    id: id,
    title: '桌面消息-' + id,
    content: '这是一条桌面消息',
    icon: 'http://assets.souche.com/shop/assets/sso/favicon.ico',
    click() {
        console.log('桌面消息点击')
    },
    close() {
        console.log('桌面消息关闭')
    },
    error() {
        console.log('桌面消息出错')
    }
})

options

参数	说明	类型	默认值
id	实例化的notification的id	String	-
title	标题	String	-
icon	图标路径	String	-
content	内容	String	-
click	点击消息回调	Function	-
error	消息出错回调	Function	-
close	消息关闭回调	Function	-

实现

const descNotice = (options = {}) => {
    return new Promise(resolve => {
        const { id, title, icon, content, click, error, close } = options
        const Notification = window.Notification || window.mozNotification || window.webkitNotification
        if(Notification){
            Notification.requestPermission((status) => {
                //status默认值'default'等同于拒绝 | 'denied' 意味着用户不想要通知 | 'granted' 意味着用户同意启用通知
                if(status != 'granted') {
                    return
                }
                const notify = new Notification( title, {
                    dir:'auto',
                    lang:'zh-CN',
                    requireInteraction: true,
                    tag: id, // 实例化的notification的id
                    icon: icon, // "图标路径，若不指定默认为favicon"
                    body: content // 通知的具体内容
                })
                resolve()
                notify.onclick = () => {
                    // console.log('HTML5桌面消息点击！！！')
                    window.focus()
                    notify.close()
                    click && click()
                },
                notify.onerror = function () {
                    // console.log('HTML5桌面消息出错！！！')
                    error && error()
                }
                notify.onclose = function () {
                    window.focus()
                    // console.log('HTML5桌面消息关闭！！！')
                    close && close()
                }
            })
        }else{
            console.log('您的浏览器不支持桌面消息')
        }
    })
}