Electron自定义通知Notification

Notification是什么?

对于渲染进程,Electron 允许开发者使用通知中API,来运行系统的原生通知进行显示。

如何实现系统Notification?

const { Notification } = require('electron');const isAllowed = Notification.isSupported();
if (isAllowed) {const options = {title: '标题',body: '正文文本,显示在标题下方',silent: true, // 系统默认的通知声音icon: '', // 通知图标}const notification = new Notification(argConig);notification.on('click', () => {  });notification.on('show', () => {  });notification.on('close', () => {  });notification.show();
}

系统Notification的困扰

1)受限于当前系统是否支持系统通知,在mac或windows电脑的设置中,需特别注意是否允许通知。

2)样式单一,只能是系统自带的样式,对于不同业务场景无法满足;

3)mac与window各自对于一些功能不支持。比如:

timeoutType(通知的超时持续时间),只有window与linux支持。

closeButtonText(自定义关闭按钮提示内容),只有mac支持。

那么怎么实现我们既定的需求呢?

我在网上也查了很多资料,但并没有得到很理想的结果,所以只能借助于Electron提供的能力来尝试实现 自定义通知

自定义通知

优势在于不受限于系统,样式可以按照自己的想法设计。

实现通知

通知窗体实现

通过使用BrowserWindow()窗口来实现,设置好需要的自定义通知的尺寸与位置。

const { BrowserWindow, screen } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600,show: false,y: 0,x: 0,frame: false, // 无边框skipTaskbar: true, // 使窗口不显示在任务栏中movable: false,  // 禁止窗口被用户移动resizable: false, // 禁止窗口手动调整窗口大小fullscreenable: false, // 禁止窗口可以进入全屏状态alwaysOnTop: true, // 窗口是否永远在别的窗口的上面
})
win.loadFile('./html/customNotification.html')
// 定位到桌面右上角
const sizeObj = screen.getPrimaryDisplay().workAreaSize;
const { width, height } = sizeObj;
const [cwidth, cheight] = win.getContentSize();
const left = parseInt(width - (cwidth || 0) - 5);
const top = 10;
win.setPosition(left, top);win.showInactive(); // 显示但不聚焦于窗口(建议做延时处理)

这种方式的实现相当于是类通知

因为类通知的实现是通过Electron创建窗口实现的。故需要关闭窗口的一些默认特性,也需要开启某些特性(详见上侧代码)。

通知UI样式

win.loadFile(‘./html/customNotification.html’)

loadFile可以将React或者Vue等开发编译后的代码加载展现出来。

管理通知

业务场景:

桌面应用接收发送的通知消息,在电脑桌面右上角进行展示;

接收到第一条通知消息,显示UI设计的通知;

关闭当前通知才可以展示下一条通知消息。

分析:

通知不可能只有一条消息,可能会是多条,也有可能会是同时多条(并发)。

如何管理以上这种情况呢?

image.png

我做了两个概念(有序消息池消息队列)的思路,供大家参考(也可用于其他业务下的并发处理,已实践)。

这里主要是重思路,就不写代码了…

有序消息池

用于存储消息数据。

由于数据不同,有时需要对数据进行处理,这个过程是耗时的,而这期间如果多条或者并发的数据出现,容易导致数据出现混乱、无序。

同时如果出现重复、整合的数据,就没必要再执行一次了。

1、重复:多条数据以最后一条为准,其他舍弃。

2、整合:多条数据同属于同一个数据,该数据需要将其他的数据整合起来。

或者有些情况下是可以直接异步展示所有数据的。

消息队列

用于推送消息。

队列里面有消息就推送,不需要推送,就静默。

可以同时异步推送多条消息,也可以只推一条。

思路

1、消息整合

对于接收到的数据不做任何处理。

生成消息的唯一Key(服务端不生成的情况下),push进有序消息池

2、有序消息池

对于数据复杂、数据量大的情况下,做有序消息池映射处理(建议使用Map)。

3、switch

开关,是否执行生成消息队列 && 是否有序数据池有数据。

false,否,停止流程。

true,是,进入生成消息队列操作

4、生成消息队列

关闭switch开关。

读取有序消息池数据。

遵循业务规则对数据做重复、整合处理。

将唯一Key按序添加到消息队列中。

5、消息队列

判断通知是否存在,如果已存在,再次进入2有序数据池节点执行。

反之通知未存在,创建通知,进入有序数据池节点执行。

6、关闭通知

关闭通知后,再次进入5消息队列节点执行。

扩展

这同时也是可以解决多条、并发情况下的思路。

从逻辑图中的 5、消息队列 往后,是为了通知业务需求而做的。

如果有的业务允许多条消息同时更新,那么5、消息队列这里可以执行异步更新,就没必要按照通知这种同步执行了。

思路有不完美的地方,欢迎大家积极指正沟通,共同学习,共同进步~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/300229.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI 引擎系列 8 - 运行时比率参数简介

简介 在 Versal AI 引擎 2 一文 中,我们注意到计算图 (graph) 文件中有一行内容用于为每个内核实例定义运行时比率参数。 在本文中,我们将讲解该参数如何影响 AI 引擎应用的资源使用率和性能。 要求 下文要求您通读前几篇 AI 引擎系列博文。 AI 引擎系…

cesium实现区域贴图及加载多个gif动图

1、cesium加载多个gif动图 Cesium的Billboard支持单帧纹理贴图,如果能够将gif动图进行解析,获得时间序列对应的每帧图片,然后按照时间序列动态更新Billboard的纹理,即可实现动图纹理效果。为此也找到了相对于好一点的第三方库libg…

亚线性空间算法1

流模型 问题:如果采用bit存储的话 可以是n或者是Logn 但是对于特别大的数据量 这也是不行的,所以我们思考是否有Loglogn的算法 来存储统计的数据。 问题1:近似计数Morris算法 多次实验 使结果更准确。 问题2:不重复元素/FM算法…

3分钟了解安全数据交换系统有什么用!

企业为了保护核心数据安全,都会采取一些措施,比如做网络隔离划分,分成了不同的安全级别网络,或者安全域,接下来就是需要建设跨网络、跨安全域的安全数据交换系统,将安全保障与数据交换功能有机整合在一起&a…

acwing linux docker教程

终章 听着名字还挺伤感的哈哈哈其实是Linux的终章,感谢大家这段时间的阅读,这段使时间我为了给大家清楚的讲解一下Linux自己也是很认真的学习了一遍,自己提升了也不少。其实最近学校里面是讲了Linux和windows server 2019搭载DNS、web、ftp服…

HarmonyOS 组件隔代双向数据通信Provide与Consume

今天 我们说一个场景 我们可以编写代码如下 Entry Component struct Index {State name:string "小猫猫";build() {Row() {Column() {Text(this.name)Button("改个name").onClick(() > {this.name this.name "小猫猫"?"小狗狗&quo…

论文阅读——X-Decoder

Generalized Decoding for Pixel, Image, and Language Towards a Generalized Multi-Modal Foundation Model 1、概述 X-Decoder没有为视觉和VL任务开发统一的接口,而是建立了一个通用的解码范式,该范式可以通过采用共同的(例如语义&#…

VScode远程连接服务器,Pycharm专业版下载及远程连接(深度学习远程篇)

Visual Code、PyCharm专业版,本地和远程交互。 远程连接需要用到SSH协议的技术,常用的代码编辑器vscode 和 pycharm都有此类功能。社区版的pycharm是免费的,但是社区版不支持ssh连接服务器,只有专业版才可以,需要破解…

web架构师编辑器内容-HTML2Canvas 截图的原理

HTML2Canvas 截图的原理 目的:一个canvas元素,上面有绘制一系列的HTML节点 局限:canvas中没法添加具体的Html节点,它只是一张画布 通过canvas.getContext(‘2d’)可以拿到canvas提供的2D渲染上下文,然后在里面绘制形…

【Hive】——函数案例

1 Hive 多字节分隔符处理 1.1 默认规则 Hive默认序列化类是LazySimpleSerDe,其只支持使用单字节分隔符(char)来加载文本数据,例如逗号、制表符、空格等等,默认的分隔符为”\001”。根据不同文件的不同分隔符&#xf…

Git一个仓库包含多个不同的项目VUE(老项目的基础上,新建分支放新项目)

背景: 原有项目A(vue2.6),需要在A的基础上接入组件库,涉及到项目升级,领导不想走这条路,建议重新构建一版2.7的项目B,那么现在就需要把项目B与项目A远程到同一个仓库; 解…

sigmoid softmax优化

1.前言 最近在搞模型部署发现,推理速度不能满足我们需求,于是最近学习了优化算子技巧,学到了sigmoid,softmax算子优化,真的数学之美。2.sigmoid算子优化 一.算子优化图 我们根据sigmoid公式,我们进行求反…