In our Previous Article , we discussed about What is Electron JS and Why should we use it. We also built a basic electron app using Node JS and Typescript. Now it is time to add some good to have features in our electron app we created.

Let us meet our customer and gather a list of requirements. He asked to listed out following:

  • Suggest some good icon for application and update that.
  • Application must have menu bar options like GoTo & Help.
  • Every menu item must be accessible through some shortcuts.
  • The application should open on top of stack of all other applications.
  • Application Window should have size of display screen.
  • We should be able to see application in System tray too.
  • There should only be single instance of application be running.

Let us implement these basic features in our electorn app and deliver it. Update the index.ts with code snippet below.

                            import {BrowserWindow, app, Menu, shell, session, screen, Tray}  from 'electron';
 
                            var mainWindow = null; 
    let tray = null;
 
                            //There should only be single instance of application be running.
                            const gotTheLock = app.requestSingleInstanceLock()
                            if (!gotTheLock) {
    app.quit()
                            } else {
    app.on('second-instance', (event, commandLine, workingDirectory) => {
                            // Someone tried to run a second instance, we should focus our window.
                            if (mainWindow) {
                            if (mainWindow.isMinimized()) mainWindow.restore();
        mainWindow.focus();
                            }
                            });
                            }
 
    app.on('ready', function() { 
                            //Application Window should have size of display screen.
        let display = screen.getPrimaryDisplay();
 
    mainWindow = new BrowserWindow({
    width: display.workAreaSize.width, 
    height: display.workAreaSize.height,
    icon: "assets/images/light-bulb-icon.png", //Application should have icons in title bar.
    alwaysOnTop: true, //The application should open on top of stack of all other applications.
    title: "Electron for Steady Readers",
    transparent: true,
                            }); 
 
    mainWindow.loadURL('http://www.rahulgilotra.me'); 
    mainWindow.on('closed', function() { 
    mainWindow = null; 
                            }); 
    mainWindow.maximize();
                            //mainWindow.openDevTools();
 
                            //We should be able to see application icon in System tray too.
  tray = new Tray('assets/images/light-bulb-icon.png')
                            const contextMenu = Menu.buildFromTemplate([
                            { label: 'Exit'},
                            ])
    tray.setToolTip('Electron for Steady Readers')
    tray.setContextMenu(contextMenu)
 
                            //Menu template for application.
                            const menuTemplate = [
                            {
        label: 'GoTo',
        submenu: [
                            {
            label: 'Google',
            click: () => {
                shell.openExternal("http://www.google.com");
                            },
                    enabled: true,
                accelerator: 'Ctrl+O', //Every menu item must be accessible through some shortcuts.
                            }, 
                            {
                label: 'GitHub',
                click: () => {
                    shell.openExternal("http://www.github.com");
                            },
                enabled:true,
                accelerator: 'Ctrl+G', //Every menu item must be accessible through some shortcuts.
                            }
                            ]
                            },
                            {
        label: 'Help',
        submenu: [
                            {
                label: 'Electron Web',
                click: () => {
                    shell.openExternal("https://electronjs.org/");
                            },
                    enabled: true
                            } 
                            ]
                            }
                            ];
                            //Application must have menu bar options like GoTo & Help.
                            const menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
 
                            //Using cookies in electron application.
                            const cookie = { url: 'http://www.rahulgilotra.me', name: 'appName', value: 'steadyreaders' }
    session.defaultSession.cookies.set(cookie)
    .then(() => {
                            // success
                            }, (error) => {
        console.error(error)
                            });
                            });
 
    app.on('window-all-closed', function() 
                            { 
        app.quit(); 
                            }); 
 

Let us test all the features implemented, by kick starting our application. You must be able to see updated menu bar, icons and application running in system tray too. Menu items must accessible through shortcuts provided. Application should not able to open another instance of it. Other than these features, i have also demonstrated to store cookies in electron application along with opening developer tool to verify the same.