网页 桌面消息提醒，右下角出现通知框，html5桌面通知,notification的使用,右下角出现通知框

网页 桌面消息提醒
得要用 HTTPS 访问，谷歌浏览器，360极速浏览器，QQ浏览器 得要允许网站【通知】,火狐浏览器没弹窗提示

2021-3-2浏览器测试。

<button  id='ffcvvvvf'>Notify mef!</button>
<script type="text/javascript">
function aaafff(){
	console.log(Notification.permission)
if (!("Notification" in window)) {
            alert("This browser does not support desktop notification");            
        }
        // 检查用户是否同意接受通知
        else if (Notification.permission === "granted") {        	
            var notification = new Notification('来消息了', {
                body: '可以加你为好友吗？',
                icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg',
            });            
            notification.onclick = function() {
            	console.log(1111+'onclick')
                window.focus();//打开对应的页面
                notification.close();//关闭提示信息
            };            
            //定时关闭
            notification.onshow = function () {//定时关闭
            console.log(6333+'onshow')
                setTimeout(notification.close.bind(notification), 3000);
            }
        }
        // 否则我们需要向用户获取权限
        else if (Notification.permission !== 'denied') {
            Notification.requestPermission(function (permission) {
                // 如果用户同意，就可以向他们发送通知
                if (permission === "granted") {
                    var notification = new Notification('111', {
                        body: '第一次点击同意提示，显示本条信息。'
                    });
                }
            });
        }
}
$('#ffcvvvvf').click(function(){	
       aaafff()
    })   
    
    setInterval(function () { //每10秒刷新一次图表
         //需要执行的代码写在这里         
         aaafff()
    }, 10000);
</script>