Windows Taskbar Operations in ElectronJS

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.

According to the official definition, the taskbar is an element of the operating system located at the bottom of the screen. It allows us to locate and launch programs through the Start Menu, or view any program that’s currently open. On the right side of the taskbar is the Notifications Area that allows us to check the date and time, items running in the background, etc. All modern Desktop applications that are supported on the Windows OS platform can interact with this Windows taskbar. Some of the more common taskbar operations include displaying an overlay over the original icon or flashing the icon of the application to notify the user. Electron also provides us with a way by which we can interact with this Windows taskbar using the Instance methods of the BrowserWindow object. This tutorial will demonstrate these common Windows Taskbar operations in Electron. For more information on how Electron interacts with the Notification Area, Refer to the article: Custom Notifications in ElectronJS. More complex Windows taskbar operations such as displaying a custom thumbnail toolbar for the application, etc, will be covered in separate articles.

We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.

• Project Structure:
  

Example: Follow the Steps given in Desktop Operations in ElectronJS to setup the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. Also, perform the necessary changes mentioned for the package.json file to launch the Electron Application. We will continue building our application using the same code base. The basic steps required to setup the Electron application remain the same. Create the assets folder according to the project structure. This assets’ folder will contain the image.png file which will be used as an overlay image for the window’s taskbar. For this tutorial, we have used the Electron logo as the image.png file. 
package.json:

{
  "name": "electron-taskbar",
  "version": "1.0.0",
  "description": "Windows Taskbar Operations in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Output:

Windows Taskbar Operations in Electron: The BrowserWindow Instance is part of the Main Process. To import and use BrowserWindow in the Renderer Process, we will be using Electron remote module. As mentioned above, the two most common Windows taskbar operations are Icon overlays and the flashing Icon effect. We will cover both of these operations in detail via code. 

 Icon Overlays in Windows Taskbar

• According to the official MSDN: 

“Icon overlays serve as a contextual notification of status and are intended to negate the need for a separate notification area status icon to communicate that information to the user. For instance, the new mail status in Microsoft Outlook, currently shown in the notification area, can now be indicated through an overlay on the taskbar button. Again, you must decide during your development cycle which method is best for your application. Overlay icons are intended to supply important, long-standing status or notifications such as network status, messenger status, or new mail. The user should not be presented with constantly changing overlays or animations.”

In Electron, we can use a small overlay icon to set over the original application Icon. This can be used to display the application status and can be changed accordingly. When the Electron application is originally launched, it displays a single application Icon in the Windows Taskbar as shown below: 

• index.js: Add the following snippet in that file.  

javascript

const electron = require('electron')
const path = require('path');

// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();

win.setOverlayIcon(
      path.join(__dirname, '../assets/image.png'), 'Overlay Icon Description');

setTimeout(() => {
    win.setOverlayIcon(null, '');
}, 5000);

Explanation: The win.setOverlayIcon(overlay, description) Instance method of the BrowserWindow object is supported in Windows OS only. This Instance method when called sets a 16 x 16-pixel overlay image over the current taskbar icon. As mentioned above, it is usually used to convey some sort of application status or to passively notify the user. This Instance method does not have a return type. It takes in the following parameters: 

• overlay: NativeImage This parameter represents the NativeImage icon to display in the bottom right corner of the application icon in the Windows taskbar. If this parameter is set to null, the overlay icon is cleared. The NativeImage Instance is specially designed for Electron applications to create system tray, dock, taskbar, and application icons using PNG or JPG files.
• description: String This parameter provides a description for the overlay icon which will be provided to Accessibility screen readers. When clearing the overlay from the taskbar icon, an empty String value can be passed to this parameter.

In the above code, we have used the path.join() method of the NodeJS path module to fetch the image.png file from the assets folder. We have also used the setTimeout() function to simulate the removal of the overlay icon from the Windows taskbar after 5s. 
Output:

Flash Frame Effect in Windows Taskbar

• According to the official MSDN: 

“Typically, a window is flashed to inform the user that the window requires attention but that it does not currently have the keyboard focus.”

• index.js: In Electron, we can highlight the taskbar icon of the application and make it flash for notifying the user. The flashing effect of the icon can occur for either a specific time interval or until a specific event occurs. If the notification is urgent, we can even make the icon flash until the user does not explicitly focus on the application window. This is similar to bouncing the dock icon on macOS. 

javascript

const electron = require('electron')
const path = require('path');

// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();

setTimeout(() => {
    win.flashFrame(true);
}, 5000)

win.once('focus', () => win.flashFrame(false));

Explanation: The win.flashFrame(flag) Instance method of the BrowserWindow object starts or stops the flashing of the application icon in the Windows taskbar based on the flag: Boolean parameter provided. This is an effective way to catch the user’s attention and this is used in all modern desktop applications. This Instance method does not have any return type. In the above code, we have used the setTimeout() function to simulate the flashing icon effect in the Windows taskbar. The flashing effect will be activated 5s after the application is launched. 

Note: If this Instance method is not called with the flag parameter set as false, the flashing will continue infinitely. In the above code, we have called with flag: false when the application window comes into focus i.e. when the focus Event is emitted on the current BrowserWindow Instance. For a detailed Explanation on the BrowserWindow.getFocusedWindow() static method to fetch the current BrowserWindow Instance, Refer to the article: Emulation in ElectronJS.
Output: