客户端开发（Electron）发送通知

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

本篇说明：

在windows，macOS，linux操作系统均为开发者提供了向用户发送通知的API，也是客户端开发标配的功能之一，在Electron中主进程和渲染进程显示的方式不太一样，我们用实际的案例来演示一下。

环境说明：

设备环境Windows；
代码环境：快速入门

在渲染进程中显示通知：

准备index.html内容，提供两个操作按钮和加载渲染脚本。

 <body>
    <button id="clickme">渲染进程发送通知</button>
    <button id="clickme2">主进程发送通知</button>
    <script src="renderer.js"></script>
</body>

渲染进程中绑定第一个button用来在渲染进程发送通知
主要用到Notification模块，并且点击后可以获的反馈

 document.getElementById("clickme").addEventListener("click", () => {
  new Notification("今日更文：客户端开发（Electron）主题切换", {
    body: "「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。",
  }).onclick = () => {
    console.log("[ 通知被点击了 ]");
  };
});

在主进程中发送通知：

主进程发送通知我们还是要在渲染脚本来触发

 document.getElementById("clickme2").addEventListener("click", () => {
  window.send.notice(
    "客户端开发（Electron）URL远程启动",
    "「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。"
  );
});

可以看到有一个send.notice函数（桥接），我们还是在preload脚本中定义：

 const { contextBridge } = require("electron");
const { ipcRenderer } = require("electron/renderer");
 
contextBridge.exposeInMainWorld("send", {
  notice: (title, content) => ipcRenderer.send("send:notice", title, content),
});

在主进程实现监听并发送通知：

 ipcMain.on("send:notice", (event, ...args) => {
  new Notification({
    title: args[0],
    body: args[1],
  }).show();
});

总结：

本篇涉及到两个知识点：

渲染进程=>主进程通信
通知发送模块使用
桥接函数定义并传参

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。

posted @ 2022-01-26 19:38 前端小鑫同学阅读(36) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 客户端开发（Electron）主题切换

· 客户端开发（Electron）URL远程启动

· Electron 案例

· Electron快速入门与实践

· Electron小白入门自学笔记（一）

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

昵称：前端小鑫同学
园龄： 2年11个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端小鑫同学

擅长使用 Vue、 Angular、 Typescript 和 Node 构建 Web 应用程序

客户端开发（Electron）发送通知

本篇说明：

环境说明：

在渲染进程中显示通知：

在主进程中发送通知：

总结：

公告

搜索

常用链接

随笔档案

阅读排行榜

	<body>
	<button id="clickme">渲染进程发送通知</button>
	<button id="clickme2">主进程发送通知</button>
	<script src="renderer.js"></script>
	</body>

	document.getElementById("clickme").addEventListener("click", () => {
	new Notification("今日更文：客户端开发（Electron）主题切换", {
	body: "「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。",
	}).onclick = () => {
	console.log("[ 通知被点击了 ]");
	};
	});

	document.getElementById("clickme2").addEventListener("click", () => {
	window.send.notice(
	"客户端开发（Electron）URL远程启动",
	"「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。"
	);
	});

	const { contextBridge } = require("electron");
	const { ipcRenderer } = require("electron/renderer");

	contextBridge.exposeInMainWorld("send", {
	notice: (title, content) => ipcRenderer.send("send:notice", title, content),
	});

	ipcMain.on("send:notice", (event, ...args) => {
	new Notification({
	title: args[0],
	body: args[1],
	}).show();
	});