本单主要内容

1. 在主进程和渲染进程中显示通知
2. 主进程和渲染进程之间进行通信

任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制我们应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。而渲染器进程可以简单地理解为我们加载显示的网页，我们每创建一个web页面都会创建一个渲染进程。

一、在主进程和渲染进程中显示通知

操作系统都为应用程序向用户发送通知提供了手段。 在主进程和渲染进程中，显示通知的技术是不同的。

对于渲染进程，Electron 方便地允许开发者使用 HTML5 通知 API 发送通知，然后使用当前运行中的系统的原生通知 API 来进行显示。

要在主进程中显示通知，您需要使用 Notification 模块。

1.在主进程中显示通知

（1）新建 notification.js 文件，并写入如下代码

const { Notification } = require("electron");const TITLE = 'electron应用';const BODY = '这是一个来自主进程的通知！';let appNotif;const notification = () => {  appNotif = new Notification({    title: TITLE,    body: BODY  });  appNotif.show();}module.exports = notification;

（2）在 main.js 中引用通知

...const notification = require('./notification');    // 导入模块...app.on('ready', () => {  createWindow();  Menu.setApplicationMenu(menu);  tray(iconPath);  notification();    // 应用通知  app.on('activate', () => {    if (BrowserWindow.getAllWindows().length === 0) {      createWindow()    }  });});...

注：省略号表示不需要改动的代码，以后的文章中都将会以这种形式显示代码，否则代码篇幅会过长，除非代码改动很大才会大篇幅的引用代码。

现在运行应用程序会看到通知已经添加成功

2.在渲染进程中显示通知

这里我们为了简单方便起见，直接修改index.html

...<p id="notification">  点击通知看看会发生什么。</p><script>  const TITLE = 'electron应用'  const BODY = '这是来自渲染进程的通知！'  const MESSAGE = '通知被点击了!'  new Notification(TITLE, { body: BODY })     .onclick = () => document.getElementById("notification").innerText = MESSAGE</script>...

现在运行程序会看到通知，当我们点击通知后，页面中的第二段文字会发生改变。

正如我们前面章节中提到过的编程最佳实践，这里直接修改 index.html 加入javascript代码肯定不是最佳实践，我们应该创建一个独立的文件来编写我们的功能，然后在页面中调用它。

例如，我们创建一个名为 renderernotif.js 文件，在里面添加功能，然后在 index.html 中这样引用它:

<script src="renderernotif.js"></script>

二、主进程和渲染进程之间进行通信

我们用electron开发一个应用肯定不是简单的用来展示页面内容的，有时候我们需要从渲染进程（这里就是指我们的 html 文件）发送一个消息给主进程，让主进程做出相应的反应，然后主进程将结果再返回给渲染进程。

这里我们就以一个简单的例子展示。在我们的页面中有一个按钮，点击后它会发送一个消息给主进程，然后主进程收到消息后会返回一个消息，我们再将返回的消息显示在网页中。具体步骤如下：

注：为了尽量减少干扰，我们可以将上面第一章节中显示应用通知的代码在main.js和index.html中注释掉。

1.修改 main.js

...const { ipcMain } = require('electron');function createWindow () {  mainWindow = new BrowserWindow({    width: 800,    height: 600,    icon: iconPath,    show: false,    webPreferences: {      nodeIntegration: true,      contextIsolation: false    }  });  mainWindow.loadFile('index.html')  mainWindow.on('ready-to-show', () => {    mainWindow.show();  });}// 与渲染进程进行通信ipcMain.on('message-request', (event, arg) => {  event.reply('message-reply', '我是来自主进程的消息！');})...

2.修改 index.html

增加如下代码

...<p id="message">  这里的文字会显示来自主进程的消息。</p><button onclick="sendMessage();">点击我</button><script src="renderer.js"></script>...

3.新建 renderer.js

写入如下代码

const { ipcRenderer } = require("electron");function sendMessage() {  ipcRenderer.send('message-request');}ipcRenderer.on('message-reply', (event, arg) => {  document.getElementById('message').innerText = arg;});

运行程序后就可以看到主进程和渲染进程间的通信已经成功。

点击按钮前：

点击按钮后：