当前位置: 首页 > news >正文

electron之win/mac通知免打扰

目录

系统区别

win:不支持桌面通知,使用气泡显示

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

代码

Vuex:免打扰状态

src/store/App/mutations.ts

src/store/App/state.ts

src/views/miracast/index.vue

Util

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

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

通知

样式

html

css

参考链接


系统区别

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;}}}

参考链接

通知 | Electron

通知(Notifications) | Electron

Notifications | Apple Developer Documentation

http://www.lryc.cn/news/621660.html

相关文章:

  • 基本电子元件:碳膜电阻器
  • iOS App TF 上架多工具协作实战,一次高效的应用内测分发流程
  • iOS 性能监控实战,多工具协作完成全方位分析
  • 高并发场景下限流算法对比与实践指南
  • Day59--图论--47. 参加科学大会(卡码网),94. 城市间货物运输 I(卡码网)
  • 《人形机器人的觉醒:技术革命与碳基未来》——电子皮肤技术路线:压阻式电子皮肤及Stanford可拉伸纳米线网格
  • CSS Houdini 与 React 19 调度器:打造极致流畅的网页体验
  • Backblaze 2025 Q2硬盘故障率报告解读
  • 【机器人-基础知识】ROS1和ROS2对比
  • ABAQUS多边形骨料ITZ混凝土细观受压开裂论文复现
  • 云原生俱乐部-杂谈2
  • Linux入门(十九)定时备份数据库
  • Scrapy + Django爬虫可视化项目实战(二) 详细版
  • gnu arm toolchain中的arm-none-eabi-gdb.exe的使用方法?
  • 力扣hot100 | 普通数组 | 53. 最大子数组和、56. 合并区间、189. 轮转数组、238. 除自身以外数组的乘积、41. 缺失的第一个正数
  • ITM(仪器跟踪宏单元)是什么?
  • 崩溃大陆2 送修改器 PC/手机双端(Crashlands2)免安装中文版
  • C#WPF实战出真汁07--【系统设置】--菜品类型设置
  • go应用注册到kong
  • 网络通讯核心知识
  • rent8 安装部署教程之 Windows
  • 云原生俱乐部-k8s知识点归纳(4)
  • 难以超越的 TCP AIMD
  • 在多语言大模型中保留文化细微差别:超越翻译
  • 解决Electron透明窗口点击不影响其他应用
  • ABP vNext+ WebRTC DataChannel 低延迟传感推送
  • Tokenizer(切词器)的不同实现算法
  • 代码随想录刷题Day33
  • 分库分表和sql的进阶用法总结
  • AI架构师生存手册:图解避坑MCP工具链/智能体RAG/推理蒸馏实战