Notification介绍
Notifications API 的通知接口用于向用户配置和显示桌面通知。允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示。该API被设计成与不同平台上的现有通知系统兼容。
Notification.permission(静态属性)
用于读取用户给予的权限,它是一个只读属性,它有三种状态。
- default:用户还没有做出任何许可,因此不会弹出通知。
- granted:用户明确同意接收通知。
- denied:用户明确拒绝接收通知
Notification.requestPermission(静态方法)
该方法用于请求用户权限,该方法存在一个回调,用于获取用户给予的权限
//请求权限
Notification.requestPermission(function (status) {
//status就是用户给权限,一般根据权限实现对应操作
}
Notification构造函数
使用构造函数,用来生成通知:var n= new Notification(title, options);
1.title(必须):格式为字符串,代表通知头,代表通知的标题
2.options(可选):格式为对象,可选对象属性如下:
- dir : 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)
- lang:指定通知中所使用的语言。这个字符串必须在 BCP 47 language。这个字符串必须在 BCP 47 language tag 文档中是有效的。
- tag:赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
- body: 通知中额外显示的字符串
- icon: 一个图片的URL,将被用于显示通知的图标
- requireInteraction: true, 不自动关闭通知
Notification事件处理(实例方法)
- Notification.onclick 处理 click (en-US) 事件的处理。每当用户点击通知时被触发。
- Notification.onshow 处理 show (en-US) 事件的处理。当通知显示的时候被触发。
- Notification.onerror 处理 error (en-US) 事件的处理。每当通知遇到错误时被触发。
- Notification.onclose 处理 close 事件的处理。当用户关闭通知时被触发。
下面利用Notification来实现一个简单的通知
大概思路:请求权限 – 判断权限 --发起通知
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通知实现</title>
</head>
<body>
<input type="text" id="text">
<button>发送</button>
</body>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取按钮
var btn=$("button");
//绑定点击事件(点击进行发送)
btn.click(function(){
// 首先,让我们检查我们是否有权限发出通知
if (window.Notification && Notification.permission !== "denied") {
// 如果没有,我们就请求获得权限(仅限第一次)
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// 如果用户同意了
if (status === "granted") {
//获取消息
var msg=$("input").val();
//设置发送消息
var options={
body:msg,
}
//创建提示
var n = new Notification("Hi!",options);
//使用Notification事件处理,可以实现更多处理
//消息被点击时
n .onclick=function() {
console.log("点击了消息");
}
n .onshow=function(){
console.log("显示了消息");
}
n .onerror=function(){
console.log("错误消息");
}
n .onclose=function(){
console.log("关闭了消息");
}
}
});
}else{
alert("未获得权限!");
}
});
</script>
</html>
第一次请求通知是这样的:
同意后的通知:
拒绝后的通知(这里是我们手动写的,默认没有):
最简单使用就是这样,小白初步使用,做个记录,如有错误,还望大佬指点。
附上api文档:MDN文档