就类似我们之前描述的，来一个 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("您的浏览器不支持桌面消息");}
};

具体的基本使用方法就是这些。我们最好还是了解下它的详细属性。

但是很多属性在使用过程中没有发现具体的作用，除了上面代码中使用到的，我只发现了两个比较有用的：

1. image 给通知添加一个图片内容。如图：

1. 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消息推送及桌面提醒的全部内容。