HTML5开启浏览器桌面通知
一、需求
最近一个项目监听 websocket ,对一些数据进行实时的处理。
在消息到来的时候,需要进行桌面提醒,为此特意写了一个函数用于进行
桌面通知是需要有图片、声音等。
使用默认的 silent 和 sound 设置进行提示音的播放没成功,不知道为什么,因此我直接加载了一个 Audio 播放声音。
二、代码
/**
* 通过Html调用显示系统通知
* @param title
* @param msg
* @param imgUrl
*/
function showNotification(title,msg,imgUrl){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
// 判断浏览器是否支持桌面通知
if(Notification){
Notification.requestPermission(function(result){
//result 默认值'default'等同于拒绝 'denied' -用户选择了拒绝 'granted' -用户同意启用通知
if("granted" != result){
alert('请授权浏览器能够进行通知!');
return false;
}else{
var tag = "sds"+Math.random();
var notify = new Notification(
title,
{
dir:'auto',
lang:'zh-CN',
tag:tag,//实例化的notification的id
icon:imgUrl,//通知的缩略图,icon 支持ico、png、jpg、jpeg格式
title:title, //通知的标题
body:msg //通知的具体内容
}
);
// 定义通知窗口点击函数
notify.onclick=function(){
//如果通知消息被点击,通知窗口将被激活
window.focus();
};
// 定义通知错误事件
notify.onerror = function () {
// console.log("");
};
// 定义通知显示事件 可以设置多少秒之后关闭 也可以不设置关闭
notify.onshow = function () {
// 窗口显示 播放音频
var audio = new Audio("__STATIC__/mp3/notification.wav");
audio.play();
// 窗口显示7S后关闭
setTimeout(function(){
notify.close();
},7000);
};
// 定义通知关闭事件
notify.onclose = function () {
};
}
});
}else{
// 提示不支持系统通知
alert('您的浏览器不支持系统通知,建议使用Chrome浏览');
}
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/html5-notification-browser.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!