Web通过Notification对象对用户发起通知

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文档

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值