Electron中的消息通知

Electron中的消息通知是基于H5的Notification来实现的，比较常见的使用场景是用于监听网络变化然后进行消息提示。

1. 消息提示

var option = {
    title: '温馨提示',
    body: '不要天天坐在电脑前，要注意休息！'
};
var myNotification = new window.Notification(option.title, option);
// 给提示添加点击事件
myNotification.onclick = function () {
    console.log('点击了');
}

2. 监听断网提醒

window.addEventListener('offline', function () {
    // 参数参考Notification文档
    var option = {
        title: '温馨提示',
        body: '网已经断了，你该休息了！'
    };
    var myNotification = new window.Notification(option.title, option);
    // 给提示添加点击事件
    myNotification.onclick = function () {
        console.log('点击了');
    }
})

3. 监听网络恢复提醒

window.addEventListener('online', function () {
    // 参数参考Notification文档
    var option = {
        title: '温馨提示',
        body: '网络好了，你该上工了！'
    };
    var myNotification = new window.Notification(option.title, option);
    // 给提示添加点击事件
    myNotification.onclick = function () {
        console.log('点击了');
    }
});

4. 完整代码示例

主进程文件main.js代码如下：

// main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");


const createWindow = () => {
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 开启node
            nodeIntegration: true,
            // 取消上下文隔离
            contextIsolation: false,
            // 开启remote
            enableRemoteModule:true,
        }
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');

    // 开启调试模式
    mainWindow.webContents.openDevTools();

}

// 监听应用的启动事件
app.on("ready", createWindow);

// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed", () => {
    // 非MacOS直接退出
    if (process.platform != "darwin") {
        app.quit();
    }
});

// 点击MacOS底部菜单时重新启动窗口
app.on("activate", () => {
    if (BrowserWindow.getAllWindows.length == 0) {
        createWindow();
    }
})

渲染进程index.html文件代码如下：

    
    
    



    
Electron中消息通知
    点我试试
    

渲染进程index.html中引入的ipcRenderer.js文件代码：

// 基于H5通知API实现

// 点击按钮触发通知
var button = document.querySelector('#button');
button.onclick = function () {
    var option = {
        title: '温馨提示',
        body: '不要天天坐在电脑前，要早点休息！'
    };
    var myNotification = new window.Notification(option.title, option);
    // 给提示添加点击事件
    myNotification.onclick = function () {
        console.log('点击了');
    }
};

// 监听网络通了
window.addEventListener('online', function () {
    // 参数参考Notification文档
    var option = {
        title: '温馨提示',
        body: '网络好了，你该上工了！'
    };
    var myNotification = new window.Notification(option.title, option);
    // 给提示添加点击事件
    myNotification.onclick = function () {
        console.log('点击了');
    }
});


// 监听网络断了
window.addEventListener('offline', function () {
    // 参数参考Notification文档
    var option = {
        title: '温馨提示',
        body: '网已经断了，你该休息了！'
    };
    var myNotification = new window.Notification(option.title, option);
    // 给提示添加点击事件
    myNotification.onclick = function () {
        console.log('点击了');
    }
})

效果如下图所示：