[Electron] Keep apps on top, whether in full-screen mode or on other desktops.

syobochim

2 min readNov 16, 2020

I made an application with Electron.

The app is

visible when switching workspaces (Desktop)
appear on top of other apps
appears on top when other apps are displayed in full screen
appears on top when Keynote in Presentation Mode

In particular, it is difficult to appear on top when Keynote in the Presentation mode. This is the final solution.

I added the setting when I opened the windows in main.js that is defined in main of package.json .

const { app, BrowserWindow } = require("electron");
const is_mac = process.platform==='darwin'if(is_mac) {
  app.dock.hide()                                     // - 1 - 
}const MAIN_WINDOWS_WIDTH = 300;
const MAIN_WINDOWS_HEIGHT = 350;
function createClapWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: MAIN_WINDOWS_WIDTH,
    height: MAIN_WINDOWS_HEIGHT,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  })
  mainWindow.setAlwaysOnTop(true, "screen-saver")     // - 2 -
  mainWindow.setVisibleOnAllWorkspaces(true)          // - 3 -
  mainWindow.loadFile('public/reaction.html')
}app.whenReady().then(() => {
  createClapWindow()
})

app.dock.hide()

This setting allows macOS to display on top of full-screen mode. Since Windows OS does not have this setting, so I check that it is macOS before it. The setting is applied only for macOS.

2. mainWindow.setAlwaysOnTop(true, "screen-saver")

This setting allows displaying on top when Keynote in Presentation Mode. There is an itemalwaysOnTop in BrowserWindow. When I set thistrue , other apps were applied on top, but keynote presentation mode was not. So I need to set this setting mainWindow.setAlwaysOnTop(true, "screen-saver") .

3. mainWindow.setVisibleOnAllWorkspaces(true)

This setting allows displaying when I move other workspaces.

[Electron] Keep apps on top, whether in full-screen mode or on other desktops.

Reference Links

Written by syobochim