Electron notifications

Question

I'm trying to get notifications working for an Electron app I've made using Angular 5 and Electron. So far I have the following code in my index.html file:

<script type="text/javascript">

  function doNotify() {
      new Notification( "Basic Notification", "Short message part");
  }

   window.onload = doNotify;
  </script>

In my package.json I have the appId setup as below:

  "build": {
    "appId":"com.myapp.id"
  },

and finally I have this in my main.js:

app.setAppUserModelId("com.myapp.id");

As I've read in places that both of these are required to make notifications work. I am using electron forge to build a squirrel installer as this is also mentioned to be required to get notifications to work.

I have tried using similar notification code in my angular components but have no luck there either. I have looked into node-notifier but am unable to get that to work, mainly due to a lack of understanding of where it should go in an Angular-Electron app.

At this point all I want is to get some form of desktop notification working, but I can't find any resources on how to do that in an Angular-Electron app.

Answer 1

As stated by Mike above the solution was indeed to go with node-notifier. I was unable at first to get this to work directly through angular due to it being a node module. After further investigation I found that in Electron you can send messages to the ipcRenderer which then can fire off node code/modules. Below is my code that used to get this working:

In my angular file which I want the notification to start from I added:

import { ElectronService } from 'ngx-electron';
//
//Other regular angular code here
//
constructor(private databaseService: DatabaseService, private router: Router, private 
     _electronService: ElectronService){
}

ngOnInit(): void {
    this._electronService.ipcRenderer.send('request-mainprocess-action', "Message");
}

Then in my main.js I added the following:

const {ipcMain} = require('electron');
var notifier = require('node-notifier');
//
//Other regular electron main code
//
// Attach listener in the main process with the given ID
ipcMain.on('request-mainprocess-action', (event, arg) => {
    notifier
    .notify({title: 'Title', message: 'Message', icon:`${__dirname}\\assets\\image.png`,  wait: true }, function(err, data) {
      console.log(err, data);
    })
});

What happens in the above code is that a message is sent to the ipcRenderer with the tag 'request-mainprocess-action'. I then have a listener in my main.js which listens for this message and does the required node processing. There might have been tutorials out on how to do this but I was unable to find any.

Answer 2

You can also get electron notifications working with angular 5 using Electron service remote and node-notifier module as:

app.component.ts

import { ElectronService } from 'ngx-electron';

constructor(private databaseService: DatabaseService, private router: Router, private 
 _electronService: ElectronService){
}

ngOnInit(): void {
  let main_js  = this._electronService.remote.require("./main.js");
  this.main_js.notifier("Message");
}

main.js

const notifier = require('node-notifier')

exports.notifier = (msg) =>  {
notifier.notify({
  title: 'Notify Me',
  message: msg,
  wait: true
});