目录
[mac：有镜像/共享屏幕时 通知免打扰设置](#mac：有镜像/共享屏幕时 通知免打扰设置)
【可选】src/util/ipcUtil.ts：重写ipc【日志记录】
系统区别
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
javascript
SET_NOTIFY_MUTED(state:any, value:any) {
state.notifyMuted= value;
},src/store/App/state.ts
javascript
notifyMuted:false,//通知免打扰src/views/miracast/index.vue
javascript
<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：判断系统、通知
javascript
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() {};
}
}通知
javascript
webimutil.NotificationHelper.showNotification(
'视频会议',
{
icon: 'assets/img/meishi.ico',
body: '您的账号在其他地方登录!',
silent: true,
},
this,
);样式
html
html
<el-checkbox v-model="isMuted" @change="toggleMute">投屏后不弹出新消息提示</el-checkbox>
<el-popover
v-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
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;
}
}
}