Building a Cross-Platform Desktop Notification Application with Electron

Introducing Electron

What we will build

  • Cross platform (It will basically behave the same regardless of the users OS)
  • 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

  1. Cd to a path of your choice.
  2. Create a new folder.
  3. Cd into the newly created folder and run following commands
    - npm init
    - npm install --save-dev electron
    - npm install node-notifier
  4. 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.
  5. 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

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

Extending the functionality we have

  • It displays an application icon in the system tray
  • 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.
  • Add more notification interval options
  • 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?

  • Add a way for the user to enter a user defined time interval
  • 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Admir Cosic

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.