👋
``` After following the above steps, your app should look something like this:  And the code should look like this: ```fiddle docs/fiddles/tutorial-preload ``` ## Communicating between processes As we have mentioned above, Electron's main and renderer process have distinct responsibilities and are not interchangeable. This means it is not possible to access the Node.js APIs directly from the renderer process, nor the HTML Document Object Model (DOM) from the main process. The solution for this problem is to use Electron's `ipcMain` and `ipcRenderer` modules for inter-process communication (IPC). To send a message from your web page to the main process, you can set up a main process handler with `ipcMain.handle` and then expose a function that calls `ipcRenderer.invoke` to trigger the handler in your preload script. To illustrate, we will add a global function to the renderer called `ping()` that will return a string from the main process. First, set up the `invoke` call in your preload script: ```js {1,7} title="preload.js" const { contextBridge, ipcRenderer } = require('electron') contextBridge.exposeInMainWorld('versions', { node: () => process.versions.node, chrome: () => process.versions.chrome, electron: () => process.versions.electron, ping: () => ipcRenderer.invoke('ping'), // we can also expose variables, not just functions }) ``` :::caution IPC security Notice how we wrap the `ipcRenderer.invoke('ping')` call in a helper function rather than expose the `ipcRenderer` module directly via context bridge. You **never** want to directly expose the entire `ipcRenderer` module via preload. This would give your renderer the ability to send arbitrary IPC messages to the main process, which becomes a powerful attack vector for malicious code. ::: Then, set up your `handle` listener in the main process. We do this _before_ loading the HTML file so that the handler is guaranteed to be ready before you send out the `invoke` call from the renderer. ```js {1,11} title="main.js" const { ipcMain } = require('electron') const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), }, }) ipcMain.handle('ping', () => 'pong') win.loadFile('index.html') } ``` Once you have the sender and receiver set up, you can now send messages from the renderer to the main process through the `'ping'` channel you just defined. ```js title='renderer.js' const func = async () => { const response = await window.versions.ping() console.log(response) // prints out 'pong' } func() ``` :::info For more in-depth explanations on using the `ipcRenderer` and `ipcMain` modules, check out the full [Inter-Process Communication][ipc] guide. ::: ## Summary A preload script contains code that runs before your web page is loaded into the browser window. It has access to both DOM APIs and Node.js environment, and is often used to expose privileged APIs to the renderer via the `contextBridge` API. Because the main and renderer processes have very different responsibilities, Electron apps often use the preload script to set up inter-process communication (IPC) interfaces to pass arbitrary messages between the two kinds of processes. In the next part of the tutorial, we will be showing you resources on adding more functionality to your app, then teaching you distributing your app to users. [advanced-installation]: ./installation.md [application debugging]: ./application-debugging.md [app]: ../api/app.md [app-ready]: ../api/app.md#event-ready [app-when-ready]: ../api/app.md#appwhenready [browser-window]: ../api/browser-window.md [commonjs]: https://nodejs.org/docs/latest/api/modules.html#modules_modules_commonjs_modules [compound task]: https://code.visualstudio.com/Docs/editor/tasks#_compound-tasks [content-script]: https://developer.chrome.com/docs/extensions/mv3/content_scripts/ [contextbridge]: ../api/context-bridge.md [context-isolation]: ./context-isolation.md [`document.getelementbyid`]: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById [devtools-extension]: ./devtools-extension.md [dirname]: https://nodejs.org/api/modules.html#modules_dirname [global]: https://developer.mozilla.org/en-US/docs/Glossary/Global_object [ipc]: ./ipc.md [mdn-csp]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP [modules]: ../api/app.md [node-api]: https://nodejs.org/dist/latest/docs/api/ [package-json-main]: https://docs.npmjs.com/cli/v7/configuring-npm/package-json#main [package-scripts]: https://docs.npmjs.com/cli/v7/using-npm/scripts [path-join]: https://nodejs.org/api/path.html#path_path_join_paths [process-model]: ./process-model.md [react]: https://reactjs.org [sandbox]: ./sandbox.md [webpack]: https://webpack.js.org [prerequisites]: tutorial-1-prerequisites.md [building your first app]: tutorial-2-first-app.md [preload]: tutorial-3-preload.md [features]: tutorial-4-adding-features.md [packaging]: tutorial-5-packaging.md [updates]: tutorial-6-publishing-updating.md