Tray icon not showing in production(Electron)

donvie

Tray icon not showing in production but in development the icon it is showing. i am using mac to build the electron app.

Thank you

import { app, BrowserWindow, nativeTheme, Menu, Tray } from 'electron'
const path = require('path')

try {
  if (process.platform === 'win32' && nativeTheme.shouldUseDarkColors === true) {
    require('fs').unlinkSync(require('path').join(app.getPath('userData'), 'DevTools Extensions'))
  }
} catch (_) { }

/**
 * Set `__statics` path to static files in production;
 * The reason we are setting it here is that the path needs to be evaluated at runtime
 */
if (process.env.PROD) {
  global.__statics = __dirname
}

let mainWindow

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    width: 350,
    height: 600,
    useContentSize: true,
    frame: false,
    minWidth: 240,
    minHeight: 500,
    titleBarStyle: 'hidden',
    webPreferences: {
      // Change from /quasar.conf.js > electron > nodeIntegration;
      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
      nodeIntegration: process.env.QUASAR_NODE_INTEGRATION,
      nodeIntegrationInWorker: process.env.QUASAR_NODE_INTEGRATION,

      // More info: /quasar-cli/developing-electron-apps/electron-preload-script
      // preload: path.resolve(__dirname, 'electron-preload.js')
    }
  })

  mainWindow.setBackgroundColor('#f5f5f5') 

  mainWindow.loadURL(process.env.APP_URL)

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


let tray = null
app.whenReady().then(() => {
  tray = new Tray(path.resolve(__statics,'icons', 'favicon-16x16.png'))
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Light Mode / Dark Mode',
      click: function (item) {
        mainWindow.webContents.send('darkMode')
      }
    }
  ])

  tray.setToolTip('This is my application.')
  tray.setContextMenu(contextMenu)
})

app.on('ready', createWindow)

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

donvie

NEED HELP!! Can someone experienced this problem

Luis Adriani

I have the same problem. Can anyone help?

Hawkeye64

@donvie @Luis-Adriani Please follow the Electron guide here: https://www.electronjs.org/docs/api/tray

tangmemgyu

Same Problem !! Need HELP!

mingzai84

put favicon-16x16.png into /public, then modify code :

tray = new Tray(
    require('path').resolve(__statics, 'favicon-16x16.png')
)

then build again and it’s done.

mingzai84

I’ve tested it many times. It seems that under the /public directory, except for icons and favicon.ico, The rest can be generated into the build package. It could be a bug. Or I guess quasar deliberately ignored them because they were web icons, not electron icons.

tangmemgyu

@mingzai84 no use ,
I found a Unpackaged folder after building.
My Application’s first page view was just fine. but when I turn another route, it became white screen…
Tray was still lost…

Here is my file tree of public/

public
├── favicon.ico
├── fonts
│   ├── Nunito-Bold.ttf
│   └── Nunito-Regular.ttf
└── icons
    ├── favicon-16x16.png
    ├── favicon-180x180.png
    ├── favicon-192x192.png
    ├── favicon-32x32.png
    ├── favicon-512x512.png
    ├── favicon.ico
    ├── icon-128x128.png
    ├── icon-16x16.png
    ├── icon-32x32.png
    ├── icon-48x48.png
    ├── icon-64x64.png
    ├── icon.icns
    ├── icon.ico
    └── icon.png

Here is my code in my electron.main.js

void app.whenReady().then(_ => {
  tray = new Tray(
    require('path').resolve(__statics, 'icons/favicon-16x16.png')
  );
  const trayMenu = Menu.buildFromTemplate([
    {
      label: '显示主窗口',
      click: reShowWindow
    },
    {
      label: '启用开发者模式',
      click() {
        reShowWindow();
        openDevTools();
      }
    },
    {
      label: '退出 Search Zen',
      click() {
        app.quit();
      }
    }
  ]);

  tray.setToolTip('Search Zen - 极速搜索助手');
  tray.setContextMenu(trayMenu);
});

mingzai84

i said put favicon-16x16.png into /public, you still put it into /public/icons;
i said to write this code

require('path').resolve(__statics, 'favicon-16x16.png')

you still

require('path').resolve(__statics, 'icons/favicon-16x16.png')

white screen is your app’s problem, not the icon problem

tangmemgyu

Yes You’re right! Thanks for helping me!!
My tray now is available in production.
but white screen problem is still there. seen UnPackaged folders with a lot of files…

Here is my repo: https://github.com/ShenQingchuan/SearchZenTool.git
I can’t figure out for why my other pages are lost in production …

No More Posting New Topics!

Tray icon not showing in production(Electron)