系统区别

win：不支持桌面通知，使用气泡显示

window.Electron && window.Electron.ipcRenderer.send()

mac：有镜像/共享屏幕时通知免打扰设置

const notification =new Notification(title,option)

且通知样式是固定的，只能传部分参数

       /**
       * title: "字符串"
       * option: {
       * body: "xxxxx",
       * tag: "IM",
       * icon: ""
       * }
       */

new后会在用户设备的通知中心中创建一个通知条目，

notification.show();手动显示通知，

但一般是把条目按需放在通知中心，等待显示

代码

Vuex：免打扰状态

src/store/App/mutations.ts

    SET_NOTIFY_MUTED(state:any, value:any) {state.notifyMuted= value;},

src/store/App/state.ts

    notifyMuted:false,//通知免打扰

src/views/miracast/index.vue

  <el-checkbox v-model="isMuted" @change="toggleMute">投屏后不弹出新消息提示</el-checkbox>watch:{castStatus(newStatus:string){if(newStatus=='isCasting'&&this.isMuted){this.$store.commit('App/SET_NOTIFY_MUTED',true);}else{this.$store.commit('App/SET_NOTIFY_MUTED',false);}}},methods:{toggleMute() {     if(this.castStatus=='isCasting'&&this.isMuted){this.$store.commit('App/SET_NOTIFY_MUTED',true);}else{this.$store.commit('App/SET_NOTIFY_MUTED',false);}},
}

Util

【可选】src/util/ipcUtil.ts：重写ipc【日志记录】

src/util/webimutil.ts：判断系统、通知

import ipcUtil from '@/util/ipcUtil';const userAgent = window.navigator.userAgent.toLowerCase();
const ipc = window.Electron && window.Electron.ipcRenderer;/*** @desc 判断系统类型*/
export const checkWin = () => {let sUserAgent = navigator.userAgent;let isWin = sUserAgent.indexOf('Windows') > -1;return isWin;
};//在浏览器环境中，window 是全局对象，不需要前缀
export const isMac() = () => {return /macintosh|mac os x/i.test(navigator.userAgent);
},
export class NotificationHelper {static isNotificationSupported() {return typeof Notification === 'function' || typeof Notification === 'object';}static requestPermission() {if (!NotificationHelper.isNotificationSupported()) {return;}Notification.requestPermission().then(function(permission) {console.log('用户是否允许通知： ', permission === 'granted' ? '允许' : '拒绝');});}static showNotification(title: any, option: any, content: any) {//（正在聚焦、没有隐藏、主会话页）|| 免打扰  时 不通知if ((store.state.App.appIsFocus && !document.hidden && content.$route.path == '/main/conversation')||store.state.App.notifyMuted) {return;}// win不支持桌面通知if (checkWin()) {//气泡显示ipc.send('display-balloon', title, option);//闪烁图标ipc.send('flash-dock');return;}if (!NotificationHelper.isNotificationSupported()) {return;}if (Notification.permission !== 'granted') {NotificationHelper.requestPermission();}/*** title: "字符串"* option: {*  body: "xxxxx",*  tag: "IM",*  icon: ""* }*/let notify = new Notification(title, {...option,silent: true, //是否保持静默});notify.onshow = function() {};notify.onclick = function() {};notify.onclose = function() {};notify.onclose = function() {};notify.onerror = function() {};}
}

通知

	webimutil.NotificationHelper.showNotification('视频会议',{icon: 'assets/img/meishi.ico',body: '您的账号在其他地方登录!',silent: true,},this,);

样式

html

  <el-checkbox v-model="isMuted" @change="toggleMute">投屏后不弹出新消息提示</el-checkbox><el-popoverv-if="!isWin"placement="top-end"trigger="hover"     popper-class="info-popover"><div class="mute-tip"><dl><dd>没有弹出新消息提示，请前往设置</dd><dd>[设置]-[通知]-[当镜像或共享屏幕时允许通知]</dd></dl><img src="../../assets/img/miracast/mac_mute.png" alt="示例图片" ></div><i slot="reference" class="el-icon-info"></i></el-popover>

css

    .info-popover{width: 328px;height: 206px ;background-color: rgba(255, 255, 255, 1);border: 1px solid rgba(206, 212, 224, 1);border-radius: 6px;box-shadow: 0px 4px 12px 0px rgba(27, 28, 30, 0.1);.mute-tip{display: flex;flex-direction: column;justify-content: space-around;height: 96%;                   text-align: center;align-items: center;dl{padding-top: 7px;}dd {font-size: 14px;font-weight: 400;line-height: 26px;color: #A8ACB3;}img {padding: 7px 0;width: 296px;height: 110px;border-radius: 8px;}}}