electron 通知

Author：友儿
发布时间：March 26, 2024
957 views
No comments
1450 words
Categories： Electron

主进程中创建桌面通知

在主进程中创建系统通知可以使用内置的主进程模块 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('用户点击了通知');
    })
})

参考文档：https://www.electronjs.org/zh/docs/latest/api/%E9%80%9A%E7%9F%A5#%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95

在渲染进程中创建通知

如果要显示来自渲染进程的通知，应该使用 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>