就类似我们之前描述的,来一个 HTML5 提醒面板,再放一段语音。这个就有些类似12306 的抢票了。
还是先看下我们的效果图:
我们重点说下 HTML5 Notification
Notification 从字面意思理解就是”提醒”、”注意”的意思。所以它的作用就是,我们在忙于其他工作时,也可以收到来自页面的消息通知,例如一个新订单或者新邮件来了。
作为 HTML5 的新东西,主流浏览器除了 IE 以外,其他浏览器较高版本都支持,只是有些样式的不同而已。
所以我们使用这些新特性的时候还是要考虑下用户的情况。
具体代码实现:
//浏览器兼容性处理
var Notification = window.Notification ||
window.mozNotification ||
window.webkitNotification;
var media = new Audio("http://****.mp3"); //语音地址
function showNotice(title,msg){
if(Notification){
Notification.requestPermission(function(status){
//status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
if("granted" != status){
return;
}else{
var tag = "order"+Math.random(); //产生随机tag,方便点击的时候定位处理
var notify = new Notification(
title,
{
tag:tag,
icon:'http://******.png',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
body:msg //通知的具体内容
}
);
notify.onclick=function(){
//如果通知消息被点击,通知窗口将被激活
media.pause();
window.focus();
notify.close();
};
notify.onerror = function () {
console.log("HTML5桌面消息出错!!!");
};
notify.onshow = function () {
media.play();
//5s 后自行停止通知
setTimeout(function () {
notify.close();
media.pause();
}, 5000);
}
};
notify.onclose = function () {
console.log("HTML5桌面消息关闭!!!");
media.pause();
};
}
});
}else{
console.log("您的浏览器不支持桌面消息");
}
};
具体的基本使用方法就是这些。我们最好还是了解下它的详细属性。
但是很多属性在使用过程中没有发现具体的作用,除了上面代码中使用到的,我只发现了两个比较有用的:
- image 给通知添加一个图片内容。如图:
- requireInteraction 。字面意思是 “需要互动、合作”,表示无法理解。
默认为 false ,如果不处理提醒,系统会在20s之后会调用 onclose 事件,提醒自动消失;
如果为 true ,我们会发现,系统不会自动进入 onclose ,消息是永久的,直到我们手动处理。所以这个属性可以创建持续性提醒面板。
比如这里我需要创建一个持续性提醒cms管理员有新订单,我们修改其中的一些方法:
var clickFlag=false; //是否已经点击
notify.onclick=function(){
//如果通知消息被点击,通知窗口将被激活
media.pause();
window.focus();
notify.close();
clickFlag=true; //通知已点
};
notify.onshow = function () {
media.play();
if(!clickFlag) {
//每5s提醒一次
setTimeout(function () {
//notify.close();
//media.pause();
notify.onshow();
}, 5000);
}
};
notify.onclose = function () {
console.log("HTML5桌面消息关闭!!!");
media.pause();
clickFlag=true;
};
以上就是简单实现web消息推送及桌面提醒的全部内容。