How to minimize a window from a rendered process in Electron

How Electron Handles Window Minimization

In Electron, managing the display, hiding, or minimizing of windows is straightforward, and we can achieve this by controlling the BrowserWindow object. BrowserWindow is the module in Electron used for creating and controlling windows.

Step 1: Creating the Window

First, ensure a window instance is created. This is typically done in your main process's main.js file:

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

function createWindow () {
  // Create the browser window
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // Load the index.html file for your application
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

Step 2: Minimizing the Window

To minimize a window, use the minimize method. This can be called anywhere in the application as long as you have a window reference. For example, in an event handler for an interactive button:

javascript
// Assuming 'win' is the BrowserWindow instance created earlier
button.addEventListener('click', () => {
  win.minimize();
});

Example Explanation

Suppose your application has a settings button, and clicking it minimizes the window to quickly view other desktop content. Handle the click event in the rendering process and communicate via IPC (Inter-Process Communication) to trigger window minimization:

Rendering Process (renderer.js):

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

const minimizeBtn = document.getElementById('minimize-btn');
minimizeBtn.addEventListener('click', () => {
  ipcRenderer.send('minimize-window');
});

Main Process (main.js):

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

ipcMain.on('minimize-window', (event) => {
  win.minimize();
});

When the user clicks the minimize button, the rendering process sends an IPC message to the main process, which then calls the minimize method on the window. This mechanism allows Electron applications to flexibly control window display states, enhancing user experience.