五 主进程和渲染进程中的通知和通信

本单主要内容

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

本系列的源码地址：https://gitcode.net/leqi/electronapp

任何 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;
});

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

点击按钮前：
点击按钮后：