Notification实例

　　www.unliar.com;
　　HTML5 Notificaton桌面通知，实现的效果就是，在电脑右下角的出现类似于qq邮箱收信提示的效果，不过只支持最新的chrome、firefox，手机端firefox浏览器和UC浏览器可以实现，效果类似于通知栏效果。具体效果如图：

　　下面是一个简单的实例：
第一步：判断浏览器支持；
第二步：向用户大爷请求通知权限；
第三步：就是创建桌面通知实例；(我在实际的应用中是用来查看某些数据是否更改，满足条件则会创建实例，并且延时关闭，我想应该可以用来做更加有趣的事情，)

  window.onload = function() {
	var btnClick = document.getElementById("btnQuery");
    
	var httpTarget = "http://7xtby5.com1.z0.glb.clouddn.com/%E6%8A%B1.jpg"; //图标，可以修改，必须双引号
	startNotification = function() {
		console.log("run");
		console.log(getTasknum(2));
		if(checkAvailue() == "passed") {
			if(checkSee() == "seed") {
				document.title = "已在业务页面，通知停止";
				
			};
			if(checkSee() == "hided") { //当用户不在看页面时才模拟点击，检测任务量；
				
				document.title = "任务量"+getText;
				btnClick.click();
				setTimeout(function(){
					if(getTasknum(2)=="danger") {//业务警戒值，默认2，可修改
					
					
					document.title = "任务量为" +getText; 
					createMsg("Hello  你的任务量已经累积啦", new Date().getHours() + "时" + new Date().getMinutes() + "分" + "任务量☞(๑•ั็ω•็ั๑)☞" + getText, httpTarget);
				};
					
				},2000)
			}

		};
	};
	timers = setInterval(startNotification, 60000) //延时刷新业务-----1000=1秒，不建议修改为过低值，默认60秒，可以自行修改；
	createButton("closeButton", "openButton");

};

//检测浏览器支持+检测用户许可
function checkAvailue() {
	var winNoti = window.Notification;
	if(winNoti) {
		winNoti.requestPermission();
	}
	if(winNoti.permission == "granted") {
		return "passed"
	}
};

//获取业务数据
function getTasknum(dangerNum) { //业务量警戒值
	getText = document.getElementById("ywrecordcount").innerText;
	var getTextNum = getText.replace(/[^0-9]/gi, '');
	if(getTextNum >= dangerNum) {
		return "danger" //返回任务量
	}

};
//检测用户是否浏览当前页
function checkSee() {
	if(document.hidden) {
		return "hided";
	} else {
		return "seed";
	}

};
//创建实例
function createMsg(title, bodymsg, ico) {

	var opContent = {
		body: bodymsg,
		icon: ico
	};

		var newMsg = new Notification(title, opContent) //延时创建实例---避免因为网速获取任务量失败;
	 

}

//创建按钮
function createButton(idclose, idopen) {

	//创建关闭按钮
	var tButton = document.createElement("button");
	tButton.id = idclose;
	tButton.style.width = "120px";
	tButton.style.height = "50px";
	tButton.style.position = "fixed"
	tButton.style.right = "0";
	tButton.style.bottom = "50%";
	tButton.innerText = "关闭浮窗通知";
	tButton.style.opacity = "0.7";
	tButton.style.backgroundColor = "whitesmoke";
	tButton.style.borderRadius = "10px";
	tButton.style.border = "none";
	document.getElementsByClassName("page-header-fixed")[0].appendChild(tButton);

	//创建开始按钮
	var tsButton = document.createElement("button");
	tsButton.id = idopen;
	tsButton.style.width = "120px";
	tsButton.style.height = "50px";
	tsButton.style.position = "fixed"
	tsButton.style.right = "0";
	tsButton.style.bottom = "50%";
	tsButton.innerText = "开启浮窗通知";
	tsButton.style.opacity = "0.7";
	tsButton.style.backgroundColor = "whitesmoke";
	tsButton.style.borderRadius = "10px";
	tsButton.style.border = "none";
	tsButton.style.display = "none";
	document.getElementsByClassName("page-header-fixed")[0].appendChild(tsButton);

	document.getElementById(idopen).onclick = function() {
		console.log("open");
		timers = setInterval(startNotification, 60000);
    document.title="通知已开启";
		tsButton.style.display = "none";
		tButton.style.display = "block";

	}

	document.getElementById(idclose).onclick = function() {
		clearInterval(timers);
    document.title="通知已关闭";
		this.style.display = "none";
		tsButton.style.display = "block";
		console.log("close");
	}

}

//(c) Copyright 2016-07-17 远浅. All Rights Reserved.

参考链接：
ＭＤＮ开发者社区
BAIDU搜索
私人链接：
远浅 因为有趣所以前端　
hexo 文章列表

赏

谢谢你的硬币~~

支付宝

微信