Author: Liang Bangbang

Small as the tray is, the effect is not small. It is a sign that your application is running on the operating system, it can notify you of new messages, it can wake up the application interface, it can set the context (right-click) menu to set more functions, and so on. Let’s implement each of these functions in the main process.

1. Create a tray

Start by creating a tray icon in three simple steps:

  1. Import 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 image path')
new Tray(icon)
Copy the code

A system tray will be created. Pretty simple, right? But the icon doesn’t do anything yet, so let’s add some properties and events to the icon.

2. Set tray properties

Set some properties and events for the Tray instance, including the context menu, mouse-over text. For full documentation click here.

Here we set up a flexible icon for tray so that it can display different ICONS based on the system theme; Set up a mouse over the icon when the text will be displayed, and finally set up a context menu for it to have some functions.

Take a look at the renderings:

Attached code:

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

let tray

// Set the action and icon of the APP icon at the top
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 the context menu
tray.setContextMenu(contextMenu)
Copy the code

If you want to try it out for yourself, hit the electron playground. Then continue:

We set the tray to display different ICONS according to the system theme, but the system theme is dynamic.

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

Just add a topic listener event.

See the official documentation for a list of properties, events, and methods.

Example 3.

Just a few examples.

3.1 Displaying The Number of Unread Messages (macOS)

On macOS, you can use setTitle(String) to set the number of unread messages. PS: Windows has no effect.

tray.setTitle("1")
Copy the code

It works like this:

3.2 Icon Flashes When There is an Unread Message (Windows)

In Windows, you can use setImage to switch between normal ICONS and empty ICONS to achieve flashing effect. On the MAC, empty ICONS do not occupy the icon space. Therefore, you need to set transparent ICONS. You can use darkIcon instead of NativeImage.createEmpty () to see the effect.

How to determine the operating system platform, click here

Effect under Windows:

The 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: 'John's Message'.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 = ! toggleif (toggle) {
      tray.setImage(nativeImage.createEmpty())
    } else {
      tray.setImage(lightIcon)
    }
  }, 600)}Copy the code

3.3 Double-click the Tray to Display the Hidden Page (Windows)

Effect under Windows:

The 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()
})
Copy the code

Note: This effect works well on Windows, but there are some problems on MAC, the double click event may not work, please pay attention to the actual use of the event, but generally not used on MAC.

In order to learn electron better, we have created a series at present, if you are interested, you can have a look

  • [Electron playground series] Menu
  • 【Electron Playground series 】Dialog with file selection
  • [Electron playground series] Agreement
  • 【Electron Playground series 】 The tray

For more complete documentation, please refer to the documentation below

Electron-Playground official document

Github address portal: github.com/tal-tech/el…