一、简介

Notifications API的Notification是用来给用户显示桌面通知信息的。Notification生成的消息是依附于浏览器的,与传统的通过写一个div定位到页面右下角显示的方式相比,这种方式不论是哪个页面推送的消息,用户不用切换到显示提示的页面就能看到。

二、Notification API

1、构造方法

var notification = new Notification(title, options);
  • title:一定会被显示的通知标题

  • options: (可选)一个被允许用来设置通知的对象,它包含以下属性:

    • dir:文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)
    • lang:指定通知中所使用的语言
    • body:通知中额外显示的字符串
    • tag:赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除
    • icon:一个图片的URL,将被用于显示通知的图标

2、属性

  • Notification.title:(moz only) 在构造方法中指定的 title 参数。[只读]

  • Notification.dir:通知的文本显示方向。在构造方法的 options 中指定。[只读]

  • Notification.lang:通知的语言。在构造方法的 options 中指定。[只读]

  • Notification.body:通知的文本内容。在构造方法的 options 中指定。[只读]

  • Notification.tag:通知的 ID。在构造方法的 options 中指定。[只读]

  • Notification.icon:通知的图标图片的 URL 地址。在构造方法的 options 中指定。[只读]

3、事件处理

  • Notification.onclick:处理 click 事件的处理。每当用户点击通知时被触发。

  • Notification.onshow:处理 show 事件的处理。当通知显示的时候被触发。

  • Notification.onerror:处理 error 事件的处理。每当通知遇到错误时被触发。

  • Notification.onclose:处理 close 事件的处理。当用户关闭通知时被触发。

4、方法

  • 静态方法
Notification.requestPermission()

用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。

  • 实例方法
Notification.close()

该方法用于关闭通知。

三、显示通知

通知的显示过程一般分为三个步骤:

  1. 检查浏览器是否支持Notification
  2. 检查浏览器的通知权限(是否允许通知),若权限不够则请求权限
  3. 创建并显示通知
Notification.requestPermission( function(status) {
	console.log(status); // 仅当值为 "granted" 时显示通知
	var n = new Notification("title", {body: "notification body"}); // 显示通知
});

Status的值类型

  • default:用户还未被询问是否授权,所以通知不会被显示。
  • granted:表示之前已经询问过用户,并且用户已经授予了显示通知的权限。
  • denied:用户已经明确的拒绝了显示通知的权限。

可以通过检查只读属性 Notification.permission 的值来查看权限。

四、样例

  • HTML
<!DOCTYPE HTML>
<html>
	<head>
		<meta chsrset="UTF-8"/>
		<title>Notification</title>
		<style>
			#show{
				padding: .5em 1.2em .4em .8em;
				margin: .5em;
				color: #336999;
				cursor: pointer;
				font-weight: bold;
				background-color:#A8D7FF;
				border-radius: 7em 1em / 5em 1em;
			}
			#show:hover{
				background-color:rgba(128, 196, 255, .4);
			}
			#show:before{
				font: 1.2em/0 sans-serif;
				content: attr(data-icon);
				margin-right: 8px;
			}
		</style>
	</head>
	<body>
		<a id="show" data-icon="♥">显示通知</a>
	</body>
</html>
  • script
function showNotification(){
	var notice = null,
		options = {
		body: "这是消息内容,是消息的详细信息!",
		icon: "http://www.apache.org/images/SupportApache-small.png",
		dir: "auto",
		tag: "notificationId",
		lang: "zh-CN"
	};
	//检测浏览器是否支持
	if(!window.Notification){
		alert("您的浏览器不支持桌面通知!");
		return;
	}
	if(Notification.permission === "granted"){
		//用户允许
		notice = new Notification("这是消息的标题", options);
	}else if(Notification.permission !== "denied"){//Chrome中无法确定permission是否有值,因此不能检测permission是否==="default"
		//用户没有允许显示通知
		Notification.requestPermission(function(status){
			if(Notification.permission !== status){
				Notification.permission = status;
			}
			if(status === "granted"){
				notice = new Notification("这是消息的标题", options);		
			}else{
				alert("您不允许显示通知!");
			}
		});
	}else {
		alert("您已拒绝接收推送消息!");
	}
	if(notice){
		notice.onclick = function(e){
			e.preventDefault();
			window.open("https://www.baidu.com/");
		};
		notice.onshow = function(){
			setTimeout(function(){
				notice.close();
			}, 5000);
		};
	}
}
document.querySelector("#show").addEventListener("click", showNotification, false);
  • 效果:

Chrome中对通知的管理

chrome://settings/content/notifications

附:

更详细的资料以及浏览器兼容性等信息参考: https://developer.mozilla.org/zh-CN/docs/Web/API/notification