Notification API是浏览器的通知接口，用于在用户的桌面（而不是网页上）显示通知信息，桌面电脑和手机都适用，比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署，对于手机来说，一般显示在顶部的通知栏。
如果网页代码调用这个API，浏览器会询问用户是否接受。只有在用户同意的情况下，通知信息才会显示。

检查浏览器是否支持这个API。 

 if (window.Notification) {
  // 支持
} else {
  // 不支持
}

Notification.permission属性，用于读取用户给予的权限，它是一个只读属性，它有三种状态。

  • default：用户还没有做出任何许可，因此不会弹出通知。
  • granted：用户明确同意接收通知。
  • denied：用户明确拒绝接收通知。

Notification.requestPermission()方法用于让用户选择是否接收通知。它的参数是一个回调函数，该函数的参数为用户授权的状态。 

 Notification.requestPermission(function (status) {
  if (status === "granted") {
    // 用户同意了接收通知
  } else {
    // 用户拒绝接收通知
  }
})

Notification对象作为构造函数使用时，用来生成一条通知。 

var notification = new Notification('通知标题', options);
PS：options是一可选的配置对象，该对象的属性如下：
  • dir：文字方向，可能的值为auto、ltr（从左到右）和rtl（从右到左），一般是继承浏览器的设置。
  • lang：使用的语种，比如en-US、zh-CN。
  • body：通知内容，格式为字符串，用来进一步说明通知的目的。
  • tag：通知的ID，格式为字符串。一组相同tag的通知，不会同时显示，只会在用户关闭前一个通知后，在原位置显示。
  • icon：图表的URL，用来显示在通知上。

具体案例： 

 test();
function test () {
	if(!window.Notification || Notification.permission === "denied") return;

	Notification.requestPermission(function (status) {
		if (status === "granted") {
			var n = new Notification('通知标题', {
				body: '需要通知的内容'
			});
			n.onclick = function () {
				console.log('用户点击了通知');
			}
			n.onshow = function () { 
				setTimeout(() => n.close(), 5000); 
			}
		} else {
			alert("已拒绝接收通知");
		}
	});
}
PS：在生产环境一定要用https访问，不然浏览器不会支持通知功能
上一篇 下一篇