HTML JS 右下角显示windows系统通知

Note：这里是 vue 结构下的写法，原生js需要自行转换一下

//浏览器是否支持显示通知 需要注意的是 只有 HTTPS 协议才能浏览器才能通过通知的功能，否则浏览器是强制关闭改功能的

isSupportNotify : function(){

if ( window. Notification) {

// 支持

// console.log("支持"+"Web Notifications API");

this. isAllowNotify()

} else {

// 不支持

console. log( "不支持"+ "Web Notifications API");

}

},

//通知功能 有骚扰用户的嫌疑，让用户根据自己喜好选择是否开启通知权限

isAllowNotify : function(){

var _this = this;

if( window. Notification && Notification. permission !== "denied") {

Notification. requestPermission( function( status) {

if ( status === "granted") {

     _this. setNotification();

} else{

var n = new Notification( "拒绝通知就看不到精彩资讯了哦！如要接受请在设置中选择允许接收通知。");

}

});

}

},

//编辑通知内容并加上各个点击事件等 后期控制点击通知跳转到文章

setNotification : function(){

var notify = new Notification( "金牛数据，我们快人一步！",{

body: '这是我的测试通知，等接口好了以后再控制显示新消息',

lang: "zh-CN",

icon: "http://backend.jin6.com/@webroot/uploads/image/20180423/1524455833949078.png"

});

notify. onshow = function() {

console. log( 'Notification showning!');

};

notify. onclick = function() {

console. log( 'Notification have be click!');

};

notify. onerror = function() {

console. log( 'error!');

// 手动关闭

notify. close();

};

notify. onclose = function(){

     console. log( "close");

}

}