Главный процесс и процесс отрисовки

Процесс — это отдельно запущенная программа со своей памятью. Приложение на Electron работает как несколько процессов: один главный и по одному процессу отрисовки на каждое окно. Понимать это разделение нужно с самого начала: от него зависит, где какой код писать.

Главный процесс

Главный процесс (main process) — это Node.js. Он запускается первым из файла, указанного в поле main файла package.json, обычно main.js. Главный процесс один на всю программу. Он:

• создаёт и закрывает окна;
• управляет жизнью программы: запуском и выходом;
• работает с файлами, меню, диалогами, треем;
• может использовать любой модуль Node.js и npm.

// main.js
const { app } = require('electron');
 
app.whenReady().then(() => {
  console.log('Главный процесс запущен');
});

Вывод console.log главного процесса появляется в терминале, из которого вы запустили программу.

Процесс отрисовки

Процесс отрисовки (renderer process) показывает содержимое окна. Это обычная вкладка Chromium: HTML, CSS, DOM, fetch. Доступа к Node.js у неё по умолчанию нет.

// renderer.js
document.querySelector('h1').textContent = 'Заметки';
console.log('Страница загружена');

Этот console.log виден не в терминале, а в инструментах разработчика окна — DevTools, как в браузере.

Скрипт preload

Между ними стоит третий участник — скрипт preload. Он выполняется в процессе отрисовки до загрузки страницы и может передать странице отдельные безопасные функции. Подробно он разобран в разделе «Страница и IPC».

Зачем разделять

• Надёжность. Если страница зависнет или упадёт, главный процесс и остальные окна продолжат работать.
• Безопасность. Страница может показать текст или картинку из интернета. Если бы у неё был доступ к Node.js, вредоносный скрипт мог бы удалить файлы пользователя. Поэтому страница просит главный процесс выполнить действие, а тот решает, разрешить ли его.

Обмен сообщениями между процессами называется IPC (inter-process communication). Ему посвящены отдельные уроки.

Частая ошибка

Новички пишут в renderer.js строку const fs = require('fs') и получают в консоли ошибку require is not defined. Это не поломка, а защита: страница не видит Node.js. Работу с файлами делает главный процесс, а страница вызывает её через preload и IPC.