Show and Hide Main Window on Electron

Question

Instead of quit the application, I'd like to hide the main window when the system close button is clicked and show the main window when the application is clicked or activate. I'm using the following code to do this on my Electron app:

'use strict'

import { app, BrowserWindow } from 'electron'

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:${require('../../../config').port}`
  : `file://${__dirname}/index.html`

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 620,
    width: 350,
    resizable: true,
    fullscreenable: true
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow.hide()
  })

  // eslint-disable-next-line no-console
  console.log('mainWindow opened')
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  mainWindow.show()
})

But, hiding and showing the window from the activate and closed event shows the following error and never show the main window when the application is active.

Uncaught Exception:
Error: Object has been destroyed
    at BrowserWindow.<anonymous> (/app/src/main/index.js:24:16): mainWindow.on('closed')

Not sure what else to do.

Answer 1

My solution is this:

import { app, BrowserWindow } from 'electron'

let win = null

function createWindow () {
  win = new BrowserWindow({width: 1024, height: 768})
  win.loadURL('...')
  win.webContents.openDevTools()
  win.on('close', (event) => {
    if (app.quitting) {
      win = null
    } else {
      event.preventDefault()
      win.hide()
    }
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => { win.show() })

app.on('before-quit', () => app.quitting = true)

In this way on OSX if you close the window, the window simply hide, if you close the app with cmd+Q the app terminate.

Answer 2

You can do this, and it will prevent the window from closing, and will just hide it.

You are listening to the closed event. But you need to listen to the close event. In that event, you can prevent the default action, and just do your hide.

mainWindow.on('close', event=>{
    event.preventDefault(); //this prevents it from closing. The `closed` event will not fire now
    mainWindow.hide();
})

Once you do this, you won't be able to close your window. So you will want to add a Menu to your app, with an accelerator of CmdOrCtrl+Q. Then in there, you can tell the app to quit.

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

Menu.setApplicationMenu(Menu.buildFromTemplate([
    {
      label: "Quit",
      accelerator: "CmdOrCtrl+Q",
      click() {
        app.quit();
      }
    }
]));

And this will allow you to Cmd+Q to quit your app.