TODO:

1. Add Windows Notification caused by the app.
2. Add ability to click on this notification
3. On click we should display TrayWindow.

IMAGE: Notification

NOTE: In the development mode icons of the app ( that you can see in Dock panel ), icons of notifications ( that you can see in Mac Notifications panel ) will be set/displayed as Electron icons. But when you create/prebuild the app as production ready app or DMG file - all icons will change. Our app will took icons from /build/icon folder.

Add one more button:

electon-app/pages/tray_page.html

<button id='notify'>Notify!</button>

And JS for it:

electon-app/pages/tray_page.html

document.getElementById("notify").addEventListener("click", function (e) {
  // Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.

  let notif = new window.Notification( 'My First Notification', {
    body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, maxime explicabo dolores tenetur'
  })

  // Also we should add event handler for it. So when user will click on the notification - our About window will shows up.
  notif.onclick = function () {
    window.ipcRenderer.send('show-about-window-event')
  }
});

Add Event handler to Main Process:

electron-app/js/index.js

ipcMain.on('show-about-window-event', function() {
  tray.window.show();
});

As a result will receive next behavior:

VIDEO: Notification

As we can see on video - app has icon of the Electron. But after build/create real app correct icon will be loaded properly.