前端js实现桌面通知

前端js实现桌面通知，思路是调用Notification对象，先检测用户是否授权桌面显示，若授权则进行显示，若不授权则不显示。

在Notification对象中常用的属性有title(桌面通知标题)、body(桌面通知的主体内容，注意不对html进行转义，只是字符串)、icon(桌面通知左边的logo)、dir(主体内容的水平书写顺序)。

Notification有onclick事件、onerror事件、onshow事件、close()事件。可以使用setInterval或者setTimeout定时器对桌面通知的消失事件进行操控，可在其他的事件中对桌面通知进行交互。

本次实现的是页面初始化的时候请求用户是否允许显示桌面通知，若允许则显示，若不允许则不显示。在显示桌面通知后，用户可手动关闭，若用户不关闭，则5秒钟之后自行关闭，当用户点击桌面通知时实现打开当前页面并刷新。

可以直接运行的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		测试桌面通知，窗口小化效果更好。
	</body>
	<script type="text/javascript">
   	document.addEventListener('DOMContentLoaded',function(){
		if(! ('Notification' in window) ){
		alert('Sorry bro, your browser is not good enough to display notification');
		return;
		}	
		Notification.requestPermission(function(permission){
			var notification = new Notification("Here I am!",{body:'Thanks for clicking that button. Hope you liked.',icon:'',dir:'auto'});
			setTimeout(function() {
			    notification.close();//关闭桌面通知
			}, 5000);
			notification.onclick = function(){
				//点击桌面通知，模拟实现把用户小化的窗口大化并刷新
				notification.close();//关闭桌面通知
				var href = window.location.href;//获取当前页面的url
				window.close();//将当前页面关闭
				window.open(href);//新开一个页面，url为当前页面
			}
			navigator.onerror = function(){
				//当有错误发生时会onerror函数会被调用
				console.log('桌面通知发生了错误');
			}
			navigator.onshow = function(){
				//消息框显示时会被调用
				console.log('桌面通知显示ing');
			}
		});
	});
	</script>
</html>

前端js实现桌面通知

猜你喜欢