主进程中创建桌面通知
在主进程中创建系统通知可以使用内置的主进程模块 Notification 模块。用起来也十分的简单。
// 主进程 main.js
const { app, BrowserWindow, Notification } = require('electron')
app.on('ready', () => {
// 创建窗口
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
// 创建通知实例
const notification = new Notification({
title: '通知标题',
body: '通知正文，这是主进程的消息',
icon: './1.png' // 可选：通知图标的路径
});
// 显示通知
notification.show();
// 监听用户点击事件
notification.on('click', function () {
console.log('用户点击了通知');
})
})在渲染进程中创建通知
如果要显示来自渲染进程的通知，应该使用 HTML5 Notification API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>您好，世界</title>
</head>
<body>
<h1>您好，世界！</h1>
<button id="btn">点我发通知</button>
<script>
let btn = document.getElementById('btn')
btn.addEventListener('click', function () {
// 创建并显示通知
let n1 = new Notification('消息标题', {
body: '消息的主要内容',
icon: './1.png'
})
// 监听后续操作
n1.onclick = function () {
console.log('用户点击了通知');
}
})
</script>
</body>
</html>参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Notification
https://www.electronjs.org/zh/docs/latest/tutorial/%E9%80%9A%E7%9F%A5
