chrome桌面通知notification

什么是Chrome桌面通知

chrome桌面通知即chrome notification，它可以在用户的windows桌面弹出一个消息框，如图：

可以直接去看它的文档 ，我们将这个效果通过三个步骤来实现： 第一步、检测浏览器是否支持Notifications API

if(window.webkitNotifications){
console.log("你的浏览器支持Notifications");
}
else{
console.log("抱歉！你的浏览器不支持Notifications");
}

第二步、让用户授权浏览器显示桌面通知

if(window.webkitNotifications.checkPermission==0){//当等于0时，代表用户授权了
	//do something
}
else{
	window.webkitNotifications.requestPermission(msg);
}

当用户未授权时，requestPermission()函数将会在浏览器顶部显示信息栏，如图所示：

第三步、封装事件或写成类添加其他动作

<button onclick="msg('http://www.iancj.com/demo/html5/html5-manifest/images/t3.gif','iancj','热爱生活 专注前端','http://www.iancj.com/');">显示通知</button>
<script>
/*
*strImgurl  显示的图标
*strTitle   通知的标题
*strCon     通知的内容
*strLink    点击通知后跳转的链接
*/
function msg(strImgurl,strTitle,strCon,strLink){
	if (window.webkitNotifications) {
		if (window.webkitNotifications.checkPermission() == 0) {
			var iancjMsg = window.webkitNotifications.createNotification(strImgurl,strTitle,strCon);
			iancjMsg.display = function() { /*添加显示动作*/ } 
			iancjMsg.onerror = function() { /*添加出错动作*/ }
			iancjMsg.onclose = function() { /*添加关闭动作*/ }
			iancjMsg.onclick = function() { /*添加点击动作*/
				if(strLink==undefined || strLink==""){
					this.cancel();
				}else{
					window.location.href=strLink;
				}
			}
			iancjMsg.replaceId = 'iancjChrMsg';//为通知绑定唯一标识
			iancjMsg.show();//显示通知
		} else {
			window.webkitNotifications.requestPermission(msg);
		}
	}
}
</script>

需要注意的是replaceId为当前创建的通知绑定了一个唯一标识，之后出现的通知如果也是这个标识那么该通知将会覆盖掉以前的。 最后的效果：查看Demo