Electron自定义通知Notification

最新推荐文章于 2024-05-25 09:55:31 发布

SailingCoder

最新推荐文章于 2024-05-25 09:55:31 发布

阅读量2k

点赞数 35

分类专栏： Electron 文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/qq_37834631/article/details/135194235

版权

Electron 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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创建窗口实现的。故需要关闭窗口的一些默认特性，也需要开启某些特性（详见上侧代码）。