David.dev

How to make a tray app using electron-packager

• ##electron
• 27 Oct 2019

If you are building a "tray app" - so an app that only appears on the tray and not the dock (applicable only to Mac OS X as Windows and. think Linux do not have the dock) 

you first need to hide the dock:

app.on('ready', () => {
  // 	 hides dock for mac
  if (process.platform == 'darwin') {
    app.dock.hide()
  }

But here comes the fun. If you are using electron-packager all will work fine with npm start but the app built with electron app will not show the tray icon - so your app cannot run because you did hide it from the dock remember? (or better said, it will run but you will need to click on the empty space on the tray to make it work :) )

here is how to solve this:

const path = require('path');
  var iconPath = path.join(__dirname, '/icons/elektro.png') // your png tray icon 
  let trayIcon = nativeImage.createFromPath(iconPath);
  // if needed resize to 16x16 but mac also accepted the 24px icon
 trayIcon = trayIcon.resize({
 width: 16,
 height: 16
  //  });
  tray = new Tray(trayIcon)

et voila! now your .app package built with electron-packager will work as expected. This might seems pretty trivial but I did spend quiet a bit of time to debug this. I hope that it will be helpful!