Author: Liang Bangbang

Although the tray is small, its function is not small. It is the identification that your application is running in the operating system. It can notify you of new messages, wake up the application interface, set the context (right-click) menu, set more functions, etc. Let's implement these functions one by one, and operate in the main process.

1. Create tray

First, create a tray icon in three simple steps:

1. Introducing the Tray class from the electron Library
2. Get icon address
3. Instantiate Tray and pass in the icon address

The code is also simple:

const { Tray } = require('electron')
const path = require('path')

const icon = path.join(__dirname, 'Your picture path')
new Tray(icon)

A system tray will be created. It's very simple, isn't it, but this icon doesn't have any function yet. Next, we'll add some properties and events to the icon.

2. Set tray properties

Set some properties and events for the tray instance, including context menu and mouse in text. Detailed documentation Click here.

Here, we set flexible icons for tray so that it can display different icons according to the system theme; When you move the mouse into the menu, you can set it to display some text icons, and then set it as the context.

Let's look at the renderings first:

Attach Code:

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

let tray

// Set the operation and icon of the top APP icon
const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')

// Display different theme icons according to the system theme
tray = new Tray(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)

tray.setToolTip('Electron-Playground')

const contextMenu = Menu.buildFromTemplate([
  {
    label: 'Open a new window',
    click: () => {
      let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })
      child.loadURL('https://electronjs.org')
      child.show()
    },
  },
  {
    label: 'delete icon',
    click: () => {
      tray.destroy()
    },
  },
])

// Set context menu
tray.setContextMenu(contextMenu)

If you want to try it yourself electron-playground . Then continue:

Above, we set the tray to display different icons according to the system theme, but the system theme is dynamic. What should we do? Please see:

nativeTheme.on('updated', () => {
  tray.setImage(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)
})

Just add a topic to listen for events.

For more lists of properties, events, and methods, see the official documentation.

3. Examples

Give a few examples.

3.1 display unread messages (macOS)

In macOS system, setTitle(String) can be used to set the number of unread messages. PS: no effect under windows.

tray.setTitle("1")

The effect is as follows:

3.2 icon flashing when there is unread message (windows)

Under windows, you can set the normal icon and empty Icon to switch through setImage to achieve the flashing effect. The mac icon does not need to take up empty space.
You can use darkIcon instead of nativeimage Createempty() and execute to see the effect.

How to judge the operating system platform, click here

Effect under windows:

Attached code:

const { Tray, Menu, BrowserWindow, nativeImage } = require('electron')
const path = require('path')

let tray
let timer
let toggle = true
let haveMessage = true

const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')

const win = BrowserWindow.getFocusedWindow();

tray = new Tray(lightIcon)

const contextMenu = Menu.buildFromTemplate([
  {
    label: 'News from Zhang San',
    click: () => {
      let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })
      child.loadURL('https://electronjs.org')
      child.show()
    },
  },
  { type: 'separator' },
  {
    label: 'delete icon',
    click: () => {
      tray.destroy()
      clearInterval(timer)
    },
  },
])

tray.setContextMenu(contextMenu)

tray.setToolTip('Electron-Playground')

if (haveMessage) {
  timer = setInterval(() => {
    toggle = !toggle
    if (toggle) {
      tray.setImage(nativeImage.createEmpty())
    } else {
      tray.setImage(lightIcon)
    }
  }, 600)
}

3.3 double click the tray to display the hidden interface (windows)

Effect under windows:

Attached code:

const { Tray, BrowserWindow } = require('electron')
const path = require('path')

let tray

const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')

const win = BrowserWindow.getFocusedWindow()

tray = new Tray(lightIcon)

tray.on('double-click', () => {
  win.isVisible() ? win.hide() : win.show()
})

Note: this effect is good on windows. There will be some problems under mac. The double-click event may fail. Pay attention to it in the actual use process, but this event will not be used under mac.

We are the front end of xiaoblackboard. Welcome to pay attention to us Know,Segmentfault,CSDN,Jian Shu,Open source China,Blog Garden account number.