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

最新推荐文章于 2024-07-29 11:53:27 发布

敲你码呢?

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量552

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ITstdent/article/details/119274410

版权

Notification API 桌面通知 JavaScript 用户权限事件处理

关键词由CSDN通过智能技术生成

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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
评论
Web通过Notification对象对用户发起通知

Notification介绍Notifications API 的通知接口用于向用户配置和显示桌面通知。允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。Notification.permission(静态属性)用于读取用户给予的权限，它是一个只读属性，它有三种状态。default：用户还没有做出任何许可，因此不会弹出通知。granted：用户明确同意接收通知。
复制链接

扫一扫