How to pass Data to Windows in Electron

In Electron, transmitting data to Windows typically involves several key components and concepts, including the main process and renderer process, along with their communication mechanisms. Electron employs an architecture similar to Chromium, where the main process manages windows and interacts with the operating system, while the renderer process is independent, with one instance per window, handling the JavaScript environment for web pages. The following are common methods for transmitting data to Windows:

1. Using IPC (Inter-Process Communication) Communication

Electron provides two IPC communication methods: ipcMain and ipcRenderer. This is the most commonly used approach for passing messages and data between the main process and renderer process.

Example:

Suppose you have a settings window where users can modify application settings, and you want these changes to be immediately reflected in the main window.

In the renderer process (settings window), you can use ipcRenderer to send data:

javascript
const { ipcRenderer } = require('electron');

// Send settings data to the main process
ipcRenderer.send('update-settings', { theme: 'dark' });

In the main process, you listen for this event and handle the data:

javascript
const { ipcMain } = require('electron');

ipcMain.on('update-settings', (event, settings) => {
  console.log('Received settings:', settings);
  // Update the main window or other windows' settings here
});

2. Using the remote Module

The remote module allows the renderer process to invoke methods from objects in the main process. Although convenient, it has been deprecated since Electron 10 and is not recommended due to potential performance issues and security risks.

3. Sharing Data via Global Variables

Electron enables setting global variables in the main process, which the renderer process can access via remote or directly through Electron's API.

Example:

In the main process, set a global variable:

javascript
global.sharedData = { theme: 'light' };

In the renderer process, access this global variable:

javascript
const { remote } = require('electron');
const sharedData = remote.getGlobal('sharedData');
console.log(sharedData.theme);

4. Sending Events via WebContents

The main process can use a window's webContents to send events to the renderer process of that window.

Example:

Suppose the main process needs to notify the renderer process that a task is complete:

javascript
const { BrowserWindow } = require('electron');

let win = new BrowserWindow();
win.webContents.send('task-complete', 'Data to send');

In the renderer process, listen for this event:

javascript
const { ipcRenderer } = require('electron');

ipcRenderer.on('task-complete', (event, data) => {
  console.log('Task complete:', data);
});

These methods facilitate efficient and secure data transmission between different parts of an Electron application.