(Web Notifications)桌面通知信息

要求

登录进系统，定时查询出系统新增了多少条工单信息，发通知给当前登录系统的人。

实现

Notification API：允许网页或应用程序在系统级别发送在页面外部显示的通知；这样即使应用程序空闲或在后台，Web应用程序也会向用户发送信息。

Notification属性和方法：

权限状态：Notification.permission

获取权限：Notification.requestPermission((status)=>{回调函数})

创建通知：let n = new Notification(title, options)

点击通知：n.onclick()

显示通知：n.onshow()

关闭通知：n.onclose()

报错通知：n.onerror()

设置信息提示

• dir : 文字的方向； auto（自动）、 ltr（从左到右）、 rtl（从右到左） 
• lang : 指定通知中所使用的语言。必须在 BCP 47 language tag 文档中是有效的
• body : 通知中额外显示的字符串 
• tag : 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除
• icon : 一个图片的URL，将被用于显示通知的图标

新增一条通知（注：Firefox 和 Safari 会在一定时间后自动关闭通知（大约4秒）。这也会发生在操作系统层面）

// 先检查浏览器是否支持 Notification
if (!window.Notification) {
    console.log('浏览器不支持通知');
} else {
    // 检查用户是否已经同意接收通知
    // granted：已授权  default：未被询问授权  denied：已拒绝
    if (Notification.permission === 'granted') {
        // 显示通知
        var notification = new Notification('这是一条自动通知的信息');
    } else if (Notification.permission === 'default') {
        // 获取权限
        Notification.requestPermission().then(permission => {
            if (permission === 'granted') {
                // 显示通知
                var notification = new Notification('这是一条自动通知的信息'); 
            } else if (permission === 'default') {
                console.warn('用户关闭授权');
            } else {
                console.log('用户拒绝显示通知');            }
        });
    } else {
        console.log('用户拒绝显示通知');
    }
}

定时10秒新增一条通知，定时11秒自动关闭通知

let timer = setInterval(() => {
    // 先检查浏览器是否支持 Notification  
    if (!window.Notification) {    
        console.log('浏览器不支持通知');  
    } else {    
        // 检查用户是否已经同意接收通知    
        // granted：已授权  default：未被询问授权  denied：已拒绝    
        if (Notification.permission === 'granted') {        
            // 显示通知       
            var notification = new Notification('这是一条自动通知的信息');
            notification.onshow = function () {
                setTimeout(notification.close.bind(notification), 11000);
            }    
        } else if (Notification.permission === 'default') {        
            // 获取权限        
            Notification.requestPermission().then(permission => {            
                if (permission === 'granted') {                
                    // 显示通知                
                    var notification = new Notification('这是一条自动通知的信息');             
                } else if (permission === 'default') {                
                    console.warn('用户关闭授权');            
                } else {                
                    console.log('用户拒绝显示通知');            
                }        
            });    
        } else {        
            console.log('用户拒绝显示通知');    
        }
    }
}, 10000)

重复的通知展示最新的通知(设置一个标识：tag)

let timer = setInterval(() => {
    // 先检查浏览器是否支持 Notification  
    if (!window.Notification) {    
        console.log('浏览器不支持通知');  
    } else {    
        // 检查用户是否已经同意接收通知    
        // granted：已授权  default：未被询问授权  denied：已拒绝    
        if (Notification.permission === 'granted') {        
            // 显示通知       
            var notification = new Notification('这是一条自动通知的信息', {tag: 'soManyNotification'});   
        } else if (Notification.permission === 'default') {        
            // 获取权限        
            Notification.requestPermission().then(permission => {            
                if (permission === 'granted') {                
                    // 显示通知                
                    var notification = new Notification('这是一条自动通知的信息', {tag: 'soManyNotification'});             
                } else if (permission === 'default') {                
                    console.warn('用户关闭授权');            
                } else {                
                    console.log('用户拒绝显示通知');            
                }        
            });    
        } else {        
            console.log('用户拒绝显示通知');    
        }
    }
}, 1000)

总结（参考文档）

• 使用 Web Notifications
• 如果MAC电脑弹不出通知，需要在系统偏好设置->通知->谷歌浏览器允许权限