一、需求

最近一个项目监听 websocket ,对一些数据进行实时的处理。

在消息到来的时候，需要进行桌面提醒，为此特意写了一个函数用于进行 浏览器桌面通知

桌面通知是需要有图片、声音等。

使用默认的 silent 和 sound 设置进行提示音的播放没成功，不知道为什么，因此我直接加载了一个 Audio 播放声音。

QQ截图20170612190136.jpg

二、代码

/**
* 通过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浏览');
  }