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");
}
}



Logo

前往低代码交流专区

更多推荐