兼容 谷歌、火狐、360系列浏览器的桌面通知(实用)

兼容 谷歌、火狐、360系列浏览器的桌面通知(实用)

    本文为工作中总结而来，并参考了大量网络资源，希望对有同样需求的朋友提供帮助。
    参考资源如下(部分)：
    http://xsk.tehon.org/den/index.php/category/tech/html5-audio-notifications.html
    http://ttsvetko.github.io/HTML5-Desktop-Notifications/#
    http://www.cnblogs.com/meteoric_cry/archive/2012/03/31/2426256.html

     

1、通知授权问题

       开启桌面通知需要检测当前浏览器是否支持并且有授权，示例代码如下：

    if (!("Notification" in window) && !window.webkitNotifications) {
	//不支持  
	alert("很遗憾，您当前浏览器不支持该功能！\n建议在360、谷歌、火狐等浏览器上使用此功能");
    } else if (Notification.permission != undefined && Notification.permission != null) {
	if (Notification.permission != "granted") {
		/*未授权(谷歌、火狐)  此处省略 300行*/
	}
    } else if (Notification.permission == null || Notification.permission == undefined) {
	if (window.webkitNotifications.checkPermission() != 0) {
		/*未授权(360系列) 此处省略 300行*/
	}
    }else {
	/*支持并已授权(此处省略 300行) */
    }

      效果图如下：

2、桌面通知调用方法

    桌面通知调用方法(windowsNotify)如下：

/*
 * 桌面通知
 * strNewsContent:通知的内容
 */
function windowsNotify(strNewsContent) {
	if (!("Notification" in window) && !window.webkitNotifications && window.webkitNotifications.checkPermission() != 0)
		return;

	if (Notification.permission == null || Notification.permission == undefined)
		windowsNotify360(strNewsContent);
	else if (Notification.permission === "granted")
		windowsNotifyFFAndGE(strNewsContent);
	else if (Notification.permission !== 'denied') {
		Notification.requestPermission(function (permission) {
			if (!('permission' in Notification))
				Notification.permission = permission;

			if (permission === "granted")
				windowsNotifyFFAndGE(strNewsContent);
		});
	}
}


//桌面通知(兼容360)
function windowsNotify360(strNewsContent) {
	if (window.webkitNotifications && window.webkitNotifications.checkPermission() == 0) {
		var notify = window.webkitNotifications.createNotification(
		    "http://www.fx678.com/corp/images/aboutus/htw.jpg",
	            '汇通-新闻中心',
		    strNewsContent
	    );

		//设置定时撤销机制，防止通知长时间显示不被关闭
		notify.ondisplay = function (event) {
			setTimeout(function () {
				event.currentTarget.cancel();
			}, 10000);
		};
		//下面是定义点击事件，类似地还可定义其它事件
		notify.onclick = function () {
			window.focus();
			this.cancel();
		};
		//弹出
		notify.show();
	} else if (window.webkitNotifications) {
		window.webkitNotifications.requestPermission(windowsNotify360);
	}
}


//桌面通知(兼容火狐、谷歌)
function windowsNotifyFFAndGE(strNewsContent) {
	var notification = new Notification('汇通-新闻中心',
						 {
						 	body: strNewsContent,
						 	icon: "http://www.fx678.com/corp/images/aboutus/htw.jpg"
						 });

	//设置定时撤销机制，防止通知长时间显示不被关闭
	notification.ondisplay = function (event) {
		setTimeout(function () {
			event.currentTarget.cancel();
		}, 10000);
	};

	//下面是定义点击事件，类似地还可定义其它事件
	notification.onclick = function () {
		window.focus();
		this.cancel();
	};
}

效果图如下：

以上内容就是这些，如有好的方法欢迎大家多多赐教指正！谢谢。