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檔案代碼如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron開發</title>
</head>
<body>
<p>Electron中消息通知</p>
<button id="button">點我試試</button>
<script src="renderer/ipcRenderer.js"></script>
</body>
</html>
渲染程序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('點選了');
}
})
效果如下圖所示：
![如何用electron-vue 建立Vue項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)