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: {// 开启nodenodeIntegration: true,// 取消上下文隔离contextIsolation: false,// 开启remoteenableRemoteModule: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 lang="en"><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中的消息通知相关推荐

odoo中的消息通知
odoo有着强大的消息记录.通知机制: 假如有的用户修改了内容, 就会记录并发布消息. 首先,先保证整体基本的消息记录功能,两个地方需要修改,模型和form视图在odoo中集成消息通知, 只需要在对 ...
Electron Notification动态消息通知
Notification通知使用 Notification通知的使用方法有多种,在此介绍三种使用方式文章目录 Notification通知使用一.Notification是什么? 二.使用步骤 1 ...
Qt中的消息通知和事件发送
Qt 中的信号和槽机制.事件机制是其具有特色的两大机制.利用这两种机制可以轻松地实现需要的消息通知和事件通知. 1.信号和槽机制充分使用 Qt 库中已经定义和实现好的对象的信号和槽函数,如按钮的 c ...
linux-4.20.11内核消息通知链
最近发生一些事情,心情有所波动,没有更新,今天更新一下消息通知链.爷爷去世前的那个晚上正在看linux内核的消息通知链,今天,爷爷整整去世一个月了,前几天一直梦到爷爷,也奇怪,梦中我知道爷爷已经走了, ...
laravel Notifynder 以简单的方式提供了强大的消息通知管理功能
1.简介 Notifynder 以简单的方式提供了强大的消息通知管理功能:其提供的完整API可用于对消息通知的各种处理,比如存储.检索以及组织处理成百上千条通知的代码库.有了Notifynder,你可 ...
electron，win10，消息通知
electron官网地址 https://www.electronjs.org/docs/tutorial/notifications 按照文档操作,之后,会发现,无法出现通知的情况,无论是win10 ...
Java中集成极光推送实现给Android提送消息通知(附代码下载)
场景 Android中集成极光推送实现推送消息通知与根据别名指定推送附示例代码下载: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details ...
Android中集成Jpush实现推送消息通知与根据别名指定推送附示例代码下载
场景经常会有后台服务向Android推送消息通知的情况. 实现首先在Android Studio中新建一个Android应用在Project根目录的build.gradle中配置了jcenter ...
解决微信“聊天界面中的新消息通知”设置按钮不见了问题
原因解决微信"聊天界面中的新消息通知"设置按钮不见了问题解决方法开启"接收新消息通知"后,"聊天界面中的新消息通知"设置按钮就会出现

Electron中的消息通知

1. 消息提示；

2. 监听断网提醒；

3. 监听网络恢复提醒；

4. 完整代码示例；

Electron中的消息通知相关推荐

最新文章

热门文章