How To Minimize Electron App To System Tray

Learn how to minimize electron application to the system tray.

Electron.js has gained popularity because it helps to develop cross-platform desktop GUI applications using simple HTML, JavaScript, and CSS. Although Electron has some problems like consuming more RAM than required or being bloated it is used in many applications ranging from Discord, Whatsapp, Signal, etc.

Apart from this because of it being based on web technologies GUI applications can be built very fast. No separate programming language has to be learned for this too.

The Tray Icon

The aim of this tutorial is on minimizing the app it should be sent to the tray. With tray icons, the app runs in the background and does not cause visual clutter for the user.

Electron.js provides a good and effective method for this which can be added to your future app.

 

Getting Started

As obviously expected there are some pre-requisites-

This article expects that you have some basic knowledge about Electron and also assumes you have a working project.

Create a new JavaScript file (apart from the main existing JavaScript file) and link it to the HTML file like this:

<script src="./render.js"></script>

Here we are assuming that the JavaScript file is named render.js.

 

The Renderer File for Electron

Before we get started with the main code we will have to declare 4 constants to use like this:

const remote = require('electron').remote;
const win = remote.getCurrentWindow();
const Tray = remote.Tray;
const Menu = remote.Menu;

Since we are using the remote module here we have to automatically enable the same by usingĀ enableRemoteModule: true when creating the window.

The const win fetches the current window, the Tray and Menu constants will be used further to create the tray and menu for the tray respectively.

This is followed by an important part of code:

let tray = null;

Although it looks insignificant it is important for the following reasons-

  • This declaration prevents the formation of more than one icon to form in the tray hence preventing clones.
  • Sometimes after the icon is in the tray it disappears after a few minutes, this happens because the variable which is used for storing the tray gets garbage collected as mentioned here. This is a well-known issue in Electron.

Next, we check for window minimization like this:

win.on('minimize', () => {
});

Inside this we add the following code to prevent clones of the icons from being formed:

if (tray) { return win.hide(); }

Now inside the minimize event, we will declare the Tray and give it an icon:

tray = new Tray('icons/my-icon.png');

Now we will add a template to the tray icon like this:

const template = [
        {
            label: 'CodeSpeedy',
            icon: 'icons/my-icon-small.png',
            enabled: false,
        },
        {
            type: 'separator',
        },
        {
            label: 'Show App', click: function () {
                win.show();
            },
        },
        {
            label: 'Quit', click: function () {
                win.close();
            },
        },
    ];

The template provides customizable shortcuts for the app when it is in the tray. More about this can be read in the official documentation here.

This will be the output of the tray menu created:

How To Minimize Electron App To System Tray

Once the template is added the final step remaining is to add in the code is to build the Menu from the template by using the following code:

const contextMenu = Menu.buildFromTemplate(template);
tray.setContextMenu(contextMenu);
tray.setToolTip('CodeSpeedy');

Finally, we will hide the window on minimizing:

win.hide();

Final Code for the Electron App: Minimize Electron.js App To System Tray

const remote = require('electron').remote;
const win = remote.getCurrentWindow();
const Tray = remote.Tray;
const Menu = remote.Menu;

//  tray is declared out to prevent garbage collection
//  https://www.electronjs.org/docs/faq#my-apps-windowtray-disappeared-after-a-few-minutes
let tray = null;
win.on('minimize', () => {
    if (tray) { return win.hide(); }
    //  tray documentation at - https://github.com/electron/electron/blob/main/docs/api/menu-item.md
    tray = new Tray('icons/my-icon.png');
    const template = [
        {
            label: 'CodeSpeedy',
            icon: 'icons/my-icon-small.png',
            enabled: false,
        },
        {
            type: 'separator',
        },
        {
            label: 'Show App', click: function () {
                win.show();
            },
        },
        {
            label: 'Quit', click: function () {
                win.close();
            },
        },
    ];
    const contextMenu = Menu.buildFromTemplate(template);
    tray.setContextMenu(contextMenu);
    tray.setToolTip('CodeSpeedy');
    win.hide();
})

 

Conclusion

We have successfully sent the app to the tray when the app is minimized. The app will run in the background and then can be accessed from the tray.

You can also read,

How to create a Timer in React JS?

Plotting A Line Graph Using JavaScript with Chart.js

Leave a Reply

Your email address will not be published. Required fields are marked *