In this section, we will learn what is the main process and the rendering process, what is the difference between the main process and the rendering process, and the communication between the main process and the rendering process. Let's take a look at the concept of process.

Process is a running activity of a computer program on a certain data set. It is the basic unit of system resource allocation and scheduling, and the basis of operating system structure.

What is the main process

In Electron, the main.js script that runs when starting a project is what we call the main process. Scripts running in the main process can display GUI in the form of creating web pages.

An Electron application has and only has one main process. And all system events, such as creating windows, should be carried out in the main process.

What is a rendering process

Because Electron uses Chromium to display the page, the multi process structure of Chromium is also fully utilized. Each Electron page is running its own process, which we call rendering process.

That is to say, every time a web page is created, a rendering process is created. Each web page runs in its own rendering process. Each rendering process is independent and only cares about the page it runs.

Difference between main process and rendering process

The main process uses BrowserWindow instance to create web pages. Each BrowserWindow instance runs in its own rendering process. When a BrowserWindow instance is destroyed, the corresponding rendering process will be terminated.

The main process manages all pages and their corresponding rendering processes. Each rendering process is independent of each other and only cares about their own web pages.

Using Electron's API

Electron provides a large number of APIs in the main process and rendering process to help develop desktop applications. In the main process and rendering process, it can be included in the module through the require() method to obtain electron's API.

Introduction of electron:

const electron = require('electron');

All Electron APIs are assigned to a process type. Many APIs can only be used in the main process or rendering process, but some of them can be used in both processes. The documentation for each API will state in which process we can use the API.

The window in Electron is an instance created with BrowserWindow type. It can only be used in the main process, as shown below:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

Communication between the main process and the rendering process

The main process of Electron runs in the background, corresponding to the main.js file. The rendering process is seen by the front end, corresponding to the index.html file. ipc mode is preferred for communication between the two processes, because it will return on completion and will not block other operations in the same process.

asynchronous communication

Asynchronous communication, after sending messages, will not prevent the program from running in the same process. In the following example, the rendering process sends an asynchronous message ping to the main process, and then the main process answers pong.

Example:

Render process:

const ipc = require('electron').ipcRenderer

const asyncMsgBtn = document.getElementById('async-msg')

asyncMsgBtn.addEventListener('click', function () {
  ipc.send('asynchronous-message', 'ping')
})

ipc.on('asynchronous-reply', function (event, arg) {
  const message = `Asynchronous message reply: ${arg}`
  document.getElementById('async-reply').innerHTML = message
})

Main process:

const ipc = require('electron').ipcMain

ipc.on('asynchronous-message', function (event, arg) {
  event.sender.send('asynchronous-reply', 'pong')
})

Synchronize messages

In addition to sending messages between processes asynchronously, we can also use ipc module to send synchronous messages between processes, but the synchronous feature of this method means that it will block other operations when it completes tasks.

Example:

Render process:

const ipc = require('electron').ipcRenderer

const syncMsgBtn = document.getElementById('sync-msg')

syncMsgBtn.addEventListener('click', function () {
  const reply = ipc.sendSync('synchronous-message', 'ping')
  const message = `Synchronous message reply: ${reply}`
  document.getElementById('sync-reply').innerHTML = message
})

Main process:

const ipc = require('electron').ipcMain

ipc.on('synchronous-message', function (event, arg) {
  event.returnValue = 'pong'
})

Link: https://www.9xkd.com/