Как в Electron взаимодействуют main- и renderer-процессы?

Electron построен на двух типах процессов. Main-процесс один на всё приложение: он создаёт окна, работает с файловой системой, треем, меню и нативными API. Renderer-процессы — это отдельные экземпляры Chromium, каждый со своей страницей и DOM. Они изолированы друг от друга и от Node.js, поэтому напрямую обмениваться данными не могут.

Механизм IPC

Связь строится на Inter-Process Communication. Renderer отправляет сообщение через ipcRenderer.invoke или send, main принимает его через ipcMain.handle или on и возвращает ответ. Это похоже на асинхронный RPC.

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
ipcMain.handle('read-file', async (event, path) => {
  return require('fs').promises.readFile(path, 'utf-8');
});

// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
  readFile: (path) => ipcRenderer.invoke('read-file', path)
});

// renderer.js
const text = await window.api.readFile('/tmp/data.txt');
console.log(text);

Зачем нужен preload и contextBridge

• Preload-скрипт выполняется в контексте renderer до загрузки страницы, но имеет доступ к Node.js API.
• contextBridge аккуратно прокидывает только разрешённые функции в window, не открывая весь Node.js.
• Без этого любой сторонний скрипт на странице мог бы читать файлы и выполнять команды ОС.

Также существует webContents.send для push-уведомлений из main в renderer, например при изменении состояния системы.

Итог: применять IPC с preload и contextBridge стоит в любом Electron-приложении, где UI должен получать данные из системы или управлять окнами, сохраняя безопасность и изоляцию процессов.