实战Chrome浏览器桌面通知

2013-09-11 06:18 ·Ab叔 7438 15 <- 点击左侧的数字“攒”一个吧

更新:在一些新版本的chrome中使用以下方式进行通知

完整代码如下:

	Notification.requestPermission( function(status) {
		var n = new Notification("abshu.com html5桌面通知", {body: "这里是通知内容"});
	});

Chrome浏览器有个桌面通知API的功能,这个功能可以在浏览器外现实通知信息。即便你没有查看浏览器照样可以看到通知。现在我们用js去实现简单的桌面通知功能

需要注意的是,只有在使用Chrome浏览器时才会有这个功能的

View demo      Download

步骤:

1.所以首先需要if (window.webkitNotifications) 判断浏览器是否支持此功能。

2.接下来是要判断用户是否允许此站点使用桌面通知,window.webkitNotifications.checkPermission(),如果允许了,会返回0

3.如果用户未允许,就使用window.webkitNotifications.requestPermission()来提示用户允许桌面通知。

4.等上诉条件满足后就要使用弹出桌面提示了。

var notification = webkitNotifications.createNotification(
	'icon.png', // icon url - can be relative
	'这里是标题', // notification title
	'这里是内容' // notification body text
);

代码如下:

if (window.webkitNotifications) {
	if (window.webkitNotifications.checkPermission() == 0) {
		var n = window.webkitNotifications.createNotification("../../img/logo_s.gif", 'ABshu.com', $("#msg").val());
		//n.display = function() {}
		//n.onerror = function() {}
		//n.onclose = function() {}
		n.onclick = function() {this.cancel();}
		n.show();
	}else{
		alert("需要允许桌面通知");
		window.webkitNotifications.requestPermission();
	}
}else{
	alert("浏览器不支持桌面通知");
}

在实际运行中会多次点击按钮后会多次提醒,这就需要用到replaceId这个唯一标识了。加上他,只会提示一个标识框。

完整代码如下:

if (window.webkitNotifications) {
	if (window.webkitNotifications.checkPermission() == 0) {
		var n = window.webkitNotifications.createNotification("../../img/logo_s.gif", 'ABshu.com', $("#msg").val());
		//n.display = function() {}
		//n.onerror = function() {}
		//n.onclose = function() {}
		n.onclick = function() {this.cancel();}
		n.replaceId = "abshu";
		n.show();
	}else{
		alert("需要允许桌面通知");
		window.webkitNotifications.requestPermission();
	}
}else{
	alert("浏览器不支持桌面通知");
}