Building a Cross-Platform Desktop Notification Application with Electron

Introducing Electron

Node.js is an open source cross-platform runtime environment for developing server-side web applications using JavaScript. It uses Google’s V8 engine to interpret JavaScript. Nowadays, it’s very commonly used for tooling purposes on a normal software development cycle. For example, most of the client-side JavaScript frameworks use Node.js to automate various development processes such as build, minify JavaScript, compile source code, and so on. But most people have a false impression that node is all about web applications and for command-line utilities. But the truth is we can use Node.js for building most of the functionality same as other programming languages and platforms.

What we will build

This is an application for those of us that have sedimentary jobs. To demonstrate how electron works we will build a small desktop application that will sit in the system tray and notify the user to get up and move around at intervals that the user sets. The application will be cross platform so it will not matter if you are using Windows, Linux or Mac.

  • User should be able to select between predefined intervals for notifications.
  • The notifications should look “Native”.
  • The notifications should behave like “Native” notifications.

Initial project structure

Lets start by creating and setting up the basic project structure. First that you have to do is create a project folder. My os of choice for my workstation is Windows 10 so the screenshots and commands will be from it.

  1. Create a new folder.
  2. Cd into the newly created folder and run following commands
    - npm init
    - npm install --save-dev electron
    - npm install node-notifier
  3. Create a new file index.js in the root of the project folder, this file will contain all our code since this is a very small application.
  4. Start your editor and change package.json in the project folder. There is a “scripts” property in the file and change that one to look like the one below.
package.json change.

Lets start coding

All the code we are going to write will go into the index.js file that we created. And when we run the “npm run start” command electron will start and load the index.js file.

Initial index.js file.
running the project right now as is.
  1. Add an variable to hold the status if the notifications are enabled/disabled.
  2. Add 2 new menu options in the getContextMenu() function.

Extending the functionality we have

Currently the application has the following functionality

  • It has a menu that is displayed when user right clicks on the system tray icon
  • It can show a basic test notification
  • It can show a basic test notification on 10 minute intervals.
  • The notifications it shows look and act like “Native” notifications.
  • Re-factor parts of the code since certain values are static and there is some repetition of code.
example of an notification after refactoring

Whats next?

Well that is up to you, you could do several other things such as

  • Expand the look of the notifications by adding content such as maybe clips to meditation YouTube videos or something similar.
  • Find a way to integrate it with wearables so it can notify that user needs a break only if the wearable says that the user has been sitting still for a certain time period.

I am a developer who is passionate about stuff like IOT and home automation. Few tech that I enjoy working in are .net core, C#, Typescript and Azure.