兼容 谷歌、火狐、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("非常遗憾，您当前浏览器不支持该功能！
建议在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();
	};
}

效果图例如以下：

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

版权声明：本文博主原创文章。博客，未经同意不得转载。