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、消息队列这里可以执行异步更新,就没必要按照通知这种同步执行了。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,682评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,277评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,083评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,763评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,785评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,624评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,358评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,261评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,722评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,900评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,030评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,737评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,360评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,941评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,057评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,237评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,976评论 2 355

推荐阅读更多精彩内容