Web Notification 浏览器实现系统消息通知

this.sendMesgToDesk(data) // 获取信息的地方调用



// 显示消息通知
async sendMesgToDesk (data) {
  // let notification = null
  if (notification !== null) {
    notification.close(); // 如果已经有通知显示，则关闭它
  }
  let title = data.title
  let str1 = data.data.message
  let options = {
    // tag: data.data.wfFormId, // 多条消息时tag相同只显示一条通知，需要显示多条时tag一定要不同，（谷歌每次只能显示一条，火狐可以显示多条）
    // tag: 1, // 多条消息时tag相同只显示一条通知，需要显示多条时tag一定要不同，（谷歌每次只能显示一条，火狐可以显示多条）
    body: str1, // 通知主体
    data: { // 可以放置任意数据，方便后续使用
      content: '提醒',
      // originUrl: `http://localhost:8889/#/home`
    },
    requireInteraction: true, // 不自动关闭通知 默认值为false，通知会在三四秒之后自动关闭，（谷歌有用，火狐依然会自动关闭）
    image: require('../../assets/pushPic.png'), // 通知上方可显示需要展示的大图
    // icon: require('../../../assets/img/XXX.png') // 通知图标 默认是浏览器图标
  }
  notification = new Notification(title, options)
  // 事件处理
  notification.onclick = ({ currentTarget: { data } }) => {
    window.focus()
    // 默认进入系统之前打开的页面，也可以这里自定义进入的页面
    // window.location.href = data.originUrl
    // window.location.href = window.location.href+"/system/MyInfoNotice"
  }
  // .close() // 单个通知关闭
  notification.onshow = () => {
    console.log('通知显示了')
  }
  notification.onclose = () => {
    console.log('通知被关闭了')
  }
  notification.onerror= (err) => {
    console.log('遇到错误',err)
  }
  if (notification) {
    notification.close();
  }
},

    // { //通知显示正文。非必须，默认为空
    //     body: '你的好友XX上线了！',
    //     //通知显示正文的图片地址。非必须，默认为空
    //     image: 'imgae url',
    //     //通知左侧图标。非必须，默认为空
    //     icon: 'imgae url',
    //     //通知的分类标记（ID）。非必须，默认为空
    //     tag: 'test',
    //     //通知相关联的数据，通常用于方法的回调，传参。非必须，默认为空
    //     data: '可以是任意数据类型',
    //     //通知显示延迟的时间。非必须，默认通知实例创建完成就显示
    //     timestamp: '',
    //     //通知主体内容的水平展示顺序，有点类似direction属性。非必须，默认值是auto, 可以是ltr或rtl
    //     dir: 'auto',
    //     //当没有足够的空间来显示通知本身时，用于表示通知的图像的URL。非必须，默认为空
    //     badge: 'xxx',
    //     //通知的语言。非必须默认为空
    //     lang: '',
    //     //通知显示时，设备的振动模式。非必须，默认为空
    //     vibrate: [200, 100, 200],
    //     //新通知出现是否覆盖旧的通知，覆盖（true）则永远只显示一条通知，不覆盖（false）则会多条通知重叠。非必须，默认为true
    //     renotify: true,
    //     //通知是否静音。非必须，默认为false，表示无声
    //     silent: false,
    //     //通知声源文件地址。非必须，默认为空
    //     sound: 'mp3',
    //     //是否不在屏幕上显示通知信息。非必须，默认为false表示要显示
    //     noscreen: false,
    //     //指定通知是否应该粘滞性，即不容易被用户清理。非必须，默认false表示不具粘滞性
    //     sticky: false,
    //     //指定通知是否保持活性，知道用户点击或关闭。非必须，默认为false
    //     requireInteraction: false
    // }

// 有些需求是在系统中不需要提醒的，还可以加上判断
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
  state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
  state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
  state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
  state = "webkitVisibilityState";
}
  
// 添加监听器,监听当前是否活动页面
document.addEventListener(visibilityChange, function() {
  document.title = document[state];
}, false);