Are there events for when an Electron app is shown and hidden?

Question

I have been looking for Electron app events for when the application is shown or hidden. I see in the docs that there is 'browser-window-blur' and 'browser-window-focus' but those do not do what I want.

I would like to know when the user has switched to another application or switched back to my app. The above events get triggered if the user switches between browser windows – including the "developer's tools" window.

The code in main.js

app.on('browser-window-focus', () => {
    if (mainWindow) {
        console.log('browser-window-focus');

        mainWindow.webContents.send('projectMsg', { "event": "focus" });
    }
});

app.on('browser-window-blur', () => {
    console.log('browser-window-blur');
    if (mainWindow) {
        mainWindow.webContents.send('projectMsg', { "event": "blur" });
    }
});

I don't know much about Electron, but if I'm not mistaken, many of the same methods used to detect this in a browser would work, like [Is there a way to detect if a browser window is not currently active?](https://stackoverflow.com/q/1060008) — Heretic Monkey, Oct 08 '18 at 20:19
there is no hide or or show event available to the entire app, but for any browser window object you have the hide and restore event listener. — 0.sh, Oct 08 '18 at 20:25
Events you mentioned seem to be exactly what you need. What's wrong with them exactly? You want them to _exclude_ devtools, is that all? — pergy, Oct 09 '18 at 09:52
@NoGrabbing I see. Unfortunately I cannot reproduce that case. For me these events don't fire for a devtool window, so they're working exactly as you want (in 2.0.2) If you could provide some real code that I can test, I'll give it a shot — pergy, Oct 09 '18 at 15:31
@pergy – I added the code I am using. If I toggle between the main window and devtools, the events are triggered. Using Electron version 3.0.3 — spring, Oct 09 '18 at 15:49

pergy · Accepted Answer · 2018-10-11T15:01:26.497

7

It seems to me that it works exactly as you described, so maybe the requirements are different.

This code

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

app.on('browser-window-focus', (event, win) => {
  console.log('browser-window-focus', win.webContents.id)
})
app.on('browser-window-blur', (event, win) => {
  if (win.webContents.isDevToolsFocused()) {
    console.log('Ignore this case')
  } else {
    console.log('browser-window-blur', win.webContents.id)
  }
})
app.once('ready', () => {
  new BrowserWindow()
  new BrowserWindow().webContents.openDevTools({detach: true})
})

works the following way (in 3.0.3) given that nothing is focused initially:

Clicking on window 1 prints browser-window-focus 1
Clicking on window 2 prints browser-window-blur 1 browser-window-focus 2
Clicking on devtools window prints ~~browser-window-blur 2~~ Ignore this case

So as far as I see devtool is not included in these events, windows are getting blurred for any other window focused (including devtool)

edited Oct 11 '18 at 15:01

answered Oct 10 '18 at 08:05

pergy

5,285
1
22
36

thanks for checking that out. I should have explained a bit further what the need is. I would like to do a reset of my app when it loses focus (clear screen, empty form fields, etc.) but I don't want to preclude being able to use the devtools. That is why I was looking for app-level show/hide events. If I act on the `blur` event then clicking on the devtools will clear the screen and so live content can't be examined. I'm going to mark this as the accepted answer: "No, there aren't app-level show/hide events. – spring Oct 10 '18 at 18:17
1

Edited my answer to exclude that specific case. It doesn't work perfectly though. When you focus some other window _right after_ devtools you won't get event (by the nature of these handlers). However, that may be a feasible work around - if you always give back focus after using devtool – pergy Oct 11 '18 at 15:12

score 2 · Answer 2 · answered Oct 08 '18 at 20:29

2

There is also show and hide, though you have to explicitly show/hide the app with win.show() and win.hide() to trigger these events.

answered Oct 08 '18 at 20:29

Darren

710
1
6
11

score 1 · Answer 3 · answered Oct 09 '18 at 01:34

Check out of these BrowserWindow's events:

Event: 'blur': Emitted when the window loses focus.

Event: 'show': Emitted when the window is shown.

For example:

app.once('ready', () => {
  let mainWindow = new BrowserWindow({show: false}) //Create main window
  mainWindow.on('show', () => {
    //Do something
  })
})

Hope this help.

Are there events for when an Electron app is shown and hidden?

3 Answers3

Linked