H5托盘通知(带声音提醒)

今天做了个仿网页版微信的托盘通知小例子，第一次写博客，直接上代码。

参考链接：

http://www.cnblogs.com/a14907/p/6472741.html----消息通知

https://www.helloweba.com/view-blog-220.html -----声音提醒

以下代码要在服务器上运行，才可以实现托盘通知的效果。

<script>

//添加声音文件

$('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="/static/notify.wav" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');

//循环扫描通知条件

setInterval( function (){

$.post("/WebSite/postScan","",

function (data,status){

if (data.result=="1") {

noticeDisplay(data.msgtitle, data.bodycontent, data.iconImg, data.gotourl);

$('#chatAudio')[0].play(); //播放声音

}

});

},5000);

//H5托盘通知

function noticeDisplay(msgtitle,bodycontent,iconImg,gotourl) {

if (!window.Notification) {

alert("浏览器不支持通知！");

}

console.log(window.Notification.permission);

if (window.Notification.permission != 'granted') {

Notification.requestPermission( function (status) {

var permission = Notification.permission;

});

}

var n = new Notification(msgtitle,

{ "icon": iconImg, "body": bodycontent });

n.onshow = function () { console.log("显示通知");

setTimeout( function () { n.close() }, 5000); };

n.onclick = function () { window.open(gotourl); n.close(); };

n.onclose = function () { console.log("通知关闭"); };

n.onerror = function () { console.log('产生错误');};

}

</script>

后台java代码：

public Map postScan()

{

Map<String,String> keyValue=new HashMap<String,String>();

Date now=new Date();

Long time=now.getTime();

if(time%(1000*60*60)==0) {

keyValue.put("result", "1");

keyValue.put("msgtitle", "您收到一条新消息");

keyValue.put("bodycontent", "现在时间："+now);

keyValue.put("iconImg", "");

keyValue.put("gotourl", "http://www.baidu.com");

}

else

{

keyValue.put("result", "0");

keyValue.put("msgtitle", "您收到一条新消息");

keyValue.put("bodycontent", "现在时间："+now);

keyValue.put("iconImg", "");

keyValue.put("gotourl", "http://www.baidu.com");

}

return keyValue;

}