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

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.xdnf.cn/news/18025.html

相关文章:

  • 【R语言】R 语言中 gsub 与正则表达式详解(含 POSIX 与 Perl 风格实例)
  • 汽车电子:现代汽车的智能核心
  • [激光原理与应用-287]:理论 - 波动光学 - 电磁波既能承载能量,又能承载信息?
  • 【软件设计模式】前置知识类图、七大原则(精简笔记版)
  • Spark 运行流程核心组件(二)任务调度
  • EN/IEC 55015 照明设备的电磁兼容标准安全
  • Docker Compose部署Clickhouse最新版
  • 【LINUX网络】HTTP协议基本结构、搭建自己的HTTP简单服务器
  • 为什么游戏会出现“卡顿”:`clock.tick()` v.s. `clock.get_fps()`
  • 【uni-app】根据角色/身份切换显示不同的 自定义 tabbar
  • 线性代数 · 直观理解矩阵 | 空间变换 / 特征值 / 特征向量
  • CERT/CC警告:新型HTTP/2漏洞“MadeYouReset“恐致全球服务器遭DDoS攻击瘫痪
  • 机械加工元件——工业精密制造的璀璨明珠
  • Day14: Flask太空站搭建指南:从零到超光速的Web开发之旅
  • git clone https://gh.llkk.cc/
  • C++从入门到实战(十九)C++ vector容器及其常用接口
  • 电子电路学习日记
  • qt项目中解决关闭弹窗后执行主界面的信号槽时闪退问题
  • MySql——聚簇索引(主键索引)和非聚簇索索引(非主键索引)引区别(即聚集索引和非聚集索引区别)
  • Java 学习笔记(基础篇2)
  • Docker build创建镜像命令入门教程
  • **超融合架构中的发散创新:探索现代编程语言的挑战与机遇**一、引言随着数字化时代的快速发展,超融合架构已成为IT领域的一种重要趋势
  • ts概念讲解
  • Vue 3 + TypeScript:package.json 示例 / 详细注释说明
  • 基于Java飞算AI的Spring Boot聊天室系统全流程实战
  • 快速部署一个鉴黄服务
  • 前端vue框架
  • 【机器人-开发工具】ROS 2 (4)Jetson Nano 系统Ubuntu22.04安装ROS 2 Humble版本
  • 【Java 后端】Spring Boot 集成 JPA 全攻略
  • Nginx学习笔记(九)—— Nginx Rewrite深度解析