js实现浏览器通知功能
概述
Notification API是浏览器的通知接⼝，⽤于在⽤户的桌⾯（⽽不是⽹页上）显⽰通知信息，桌⾯电脑和⼿机都适⽤，⽐如通知⽤户收到了⼀封Email。具体的实现形式由浏览器⾃⾏部署，对于⼿机来说，⼀般显⽰在顶部的通知栏。
如果⽹页代码调⽤这个API，浏览器会询问⽤户是否接受。只有在⽤户同意的情况下，通知信息才会显⽰。
下⾯的代码⽤于检查浏览器是否⽀持这个API。
if (window.Notification) {
// ⽀持
} else {
// 不⽀持
}
⽬前，Chrome和Firefox在桌⾯端部署了这个API，Firefox和Blackberry在⼿机端部署了这个API。
if(window.Notification && Notification.permission !== "denied") {
var n = new Notification('通知标题', { body: '这⾥是通知内容！' });
});
}
上⾯代码检查当前浏览器是否⽀持Notification对象，并且当前⽤户准许使⽤该对象，然后调⽤questPermission⽅法，向⽤户弹出⼀条通知。
Notification对象的属性和⽅法
Notification.permission
Notification.permission属性，⽤于读取⽤户给予的权限，它是⼀个只读属性，它有三种状态。
天蝎座男人性格
default：⽤户还没有做出任何许可，因此不会弹出通知。
granted：⽤户明确同意接收通知。
denied：⽤户明确拒绝接收通知。
if (status === "granted") {
var n = new Notification("Hi!");
} else {
alert("Hi!");
}
});
上⾯代码表⽰，如果⽤户拒绝接收通知，可以⽤alert⽅法代替。
Notification实例对象
Notification构造函数
Notification对象作为构造函数使⽤时，⽤来⽣成⼀条通知。
var notification = new Notification(title, options);
Notification构造函数的title属性是必须的，⽤来指定通知的标题，格式为字符串。options属性是可选的，格式为⼀个对象，⽤来设定各种设置。该对象的属性如下：
dir：⽂字⽅向，可能的值为auto、ltr（从左到右）和rtl（从右到左），⼀般是继承浏览器的设置。
lang：使⽤的语种，⽐如en-US、zh-CN。
上班路上工伤body：通知内容，格式为字符串，⽤来进⼀步说明通知的⽬的。。
tag：通知的ID，格式为字符串。⼀组相同tag的通知，不会同时显⽰，只会在⽤户关闭前⼀个通知后，在原位置显⽰。
icon：图表的URL，⽤来显⽰在通知上。
上⾯这些属性，都是可读写的。
下⾯是⼀个⽣成Notification实例对象的例⼦。
var notification = new Notification('收到新邮件', {
body: '您总共有3封未读邮件。'
});
notification.title // "收到新邮件"
notification.body // "您总共有3封未读邮件。"
实例对象的事件
怎么消灭蟑螂Notification实例会触发以下事件。
show：通知显⽰给⽤户时触发。
click：⽤户点击通知时触发。
close：⽤户关闭通知时触发。
error：通知出错时触发（⼤多数发⽣在通知⽆法正确显⽰时）。
这些事件有对应的onshow、onclick、onclose、onerror⽅法，⽤来指定相应的回调函数。addEventListener⽅法也可以⽤来为这些事件指定回调函数。
console.log('Notification shown');一个人就好
};
close⽅法
Notification实例的close⽅法⽤于关闭通知。
var n = new Notification("Hi!");
// ⼿动关闭
n.close();
// ⾃动关闭
三年级德育工作总结setTimeout(n.close.bind(n), 5000);
}
上⾯代码说明，并不能从通知的close事件，判断它是否为⽤户⼿动关闭。
摘⾃m.blog.csdn/article/details?id=51004681
注意：
个⼈测试发现：该功能只有在服务器发布的页⾯下才可以出效果，静态页⾯没有任何效果也不报错。
效果图：出口退税的操作明细流程
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论