目录
【可选】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
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-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
.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;
}
}
}