HTML JS 右下角显示windows系统通知
Note：这里是 vue 结构下的写法，原生js需要自行转换一下//浏览器是否支持显示通知需要注意的是 只有 HTTPS 协议才能浏览器才能通过通知的功能，否则浏览器是强制关闭改功能的isSupportNotify:function(){if (window.Notification) {// 支持...
·
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");
}
}
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献28条内容
所有评论(0)