主进程 main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 1200,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
win.webContents.openDevTools();
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<p>Electron中消息通知</p>
<button id="button">点我试试</button>
<script src="./renderer.js"></script>
</body>
</html>
renderer.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('点击了');
}
})