Overview of main concepts in Electron 4 applications.
main process
Every Electron app has one (and just one!) main process. The main process is used to display a GUI and started from the main script defined package.json.
Each web page in Electron runs in a separate renderer process. If not limited, web pages running in a renderer process have to power to access Node.js modules.
Concerns
Takes care of showing your HTML & JS in the Chromium browser
Note: ipcRenderer does not send messages to itself, it sends them to ipcMain. If you want to access the messages within a renderer process, you need to check ipcMain using electron.remote:
window.addEventListener('DOMContentLoaded', () => { // From guest (webview content) to host (main process) window.addEventListener(z.event.WebApp.LIFECYCLE.RESTART, (event) => { ipcRenderer.send(EVENT_TYPE.WRAPPER.RELAUNCH); });
// From host (main process) to guest (webview content) ipcRenderer.on(EVENT_TYPE.WRAPPER.RELAUNCHED, () => { window.dispatchEvent(newCustomEvent(EVENT_TYPE.ACTION.CREATE_ACCOUNT)); }); });
main.ts
1 2 3 4 5 6 7 8 9 10 11
import {BrowserWindow} from'electron';
const main = newBrowserWindow(); main.loadFile('index.html'); ipcMain.on( EVENT_TYPE.WRAPPER.RELAUNCH, async (event: IpcMessageEvent) => { console.log('Do some work and send a reply...'); main.webContents.send(EVENT_TYPE.WRAPPER.RELAUNCHED); } );