Enable Sticky Behaviour of Electron App Notifications on Windows Platform

Question

I want to achieve the sticky behaviour of notifications in the electron desktop application until the user clicks on the notification itself.

I am using node-notifier to achieve this behaviour following this documentaion and using ngx-electron to use ElectronService for importing the main.js file in the angular component file.

Here is my main.js file:

const notifier = require('node-notifier')
exports.notifier = (msg) =>  {
  notifier.notify({
  title: 'Notify Me',
  message: msg,
  wait: true,
  timeout: 1500000,
  sound: true,
  icon:  './assets/images/logo.png'
});

app.component.ts:

import {ElectronService} from 'ngx-electron';
@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public main_js : any;

  constructor(private _electronService: ElectronService ) { 
    this.main_js  = this._electronService.remote.require("./main.js");
    this.getTasks();
  }

  getTasks() {
    var message = 'New Task Assigned!!!';
    this.main_js.notifier(message);
  }
}

Electron App Notification:

Currently,I am checking this notification behaviour on Windows Platform and the notification remains sticky until and unless user takes any action including any key press from keyboard or any mouse movement.

I want notification to stuck on the screen until the user clicks on close label of notification itself and not closes on clicking any other part of the screen.

Answer 1

Well, I am not able to achieve the sticky behaviour of notifications in electron. However, I have found an awesome alternative for that which is combination of both Electron_Tray and Node-Notifier Balloon_Notifications.

The best part is that it works on both Windows and Linux Platform like a charm eventually gives a cross-platform funtionality. I haven't tested it on mac yet ,may be it works there as well. Here is my tested code:

app.component.ts

import {ElectronService} from 'ngx-electron';
  @Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    public main_js : any;

    constructor(private _electronService: ElectronService ) {
      this.main_js  = this._electronService.remote.require("./main.js");
      this.getTasks();
    }

    getTasks() {
      var message = 'New Task Assigned!!!';
      this.main_js.notifier(message);
  }
}

main.js

let tray = null

function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, 'dist/assets/images/logo.png')
  })

  // +++++++  TRAY NOTIFICATIONS  +++++++++ //
  var icon_tray = path.join(__dirname,'dist','assets','images','logo.png');

  tray = new Tray(icon_tray)

  const trayMenuTemplate = [
  {
    label: 'Maximize',
    click: function () {
      //For Maximizing the Window
      if(!win.isVisible()) { win.show() }
    }
  },

  {
    label: 'Minimize',
    click: function () {
      //For Minimizing the Window
      if(win.isVisible()) { win.hide() }
    }
  }]

  tray.setToolTip('I am Notifier!!!')
  let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
  tray.setContextMenu(trayMenu)
  tray.displayBalloon({
    title: 'Notifier Realm',
    content: 'Greetings!!!',
    icon: icon_tray
  });

  tray.on('click', () => {
    win.isVisible() ? win.hide() : win.show()
  })
}

exports.notifier = (msg) =>  {
// pops out the app window if minimized and show the notification 
  if(win.isVisible()){
    // win.hide()
  } else {
    win.show()
  }
  if(msg != undefined) {
    notifier.notify({
      title: 'Nethues Notify',
      message: msg,
      wait: true,
      icon:  './assets/images/logo.png'
    });
  }
}

Now, whenever the app window is minimized and a new task is assigned by a different user, the window pops out above all the applications (whatever is opened on your screen) and show the newly assigned task notification to the user.