Electron with node-notifier display windows 10 notification

Question

I'm trying to make a simple app that should display notification when button is clicked. The problem is that the notification does not show, but console.logs are showing. Should the notification work on development mode? (meaning just running electron ., and I don't have to build and install the app)

Windows OS:

Edition: Windows 10 Home
Version: 1709
Build:16299.98
NOTE: Toast is enabled (banner, action center) under System->Notification & Actions

Code:

// main.js
const { app, BrowserWindow, ipcMain, Notification } = require("electron");

const path = require("path");
const url = require("url");

let win;

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({ width: 800, height: 600 });

  // and load the index.html of the app.
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, "index.html"),
      protocol: "file:",
      slashes: true
    })
  );

  // Open the DevTools.
  // win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on("closed", () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}

const appId = "elite-notifier";

app.setAppUserModelId(appId);
app.on("ready", createWindow);

console.log("notifying");
ipcMain.on("notify", () => {
  console.log("notified");
  const WindowsToaster = require("node-notifier").WindowsToaster;
  const notifier = new WindowsToaster({
    withFallback: false
  });
  notifier.notify(
    {
      title: "My awesome title",
      message: "Hello from node, Mr. User!",
      sound: true, // Only Notification Center or Windows Toasters
      wait: false // Wait with callback, until user action is taken against notification
    },
    function(err, response) {
      // Response is response from notification
      console.log("responded...");
    }
  );
});


// index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>Notifier!</h1>
  <button type="button" id="notify">Click here to trigger a notification!</button>
      <script type="text/javascript">
         const { ipcRenderer } = require('electron');

         const button = document.getElementById('notify');
         console.log('BUTTON: ', button)
         button.addEventListener('click', function(event) {
            console.log('clicked...');
            ipcRenderer.send('notify')
         });
      </script>
</body>

</html>

For me on windows 8 it stopped working a while back so I just always used the old version of node-notifier (4.6.1) — Joshua, Dec 15 '17 at 10:36

Jaime Sangcap · Accepted Answer · 2017-12-17T06:46:33.620

I've got it working now, thanks to all the people here :) https://github.com/mikaelbr/node-notifier/issues/144#issuecomment-319324058

Based on anthonyraymond's comment, you need to have your app INSTALLED in your windows machine with an appId. You can configure appId in your package.json like this.

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "test",
  "main": "main.js",
  "build": {
    "appId": "com.myapp.id"
  }
}

The appId does not need to have that java/android format, my app just have an appId of elite-notifier.

Then you can pass the appId when calling the notify function of notifier.

notifier.notify(
    {
      appName: "com.myapp.id", <-- yes, the key here is appName :)
      title: "Hello",
      message: "Hello world!",
      wait: true
    },
    function(err, response) {
      // Response is response from notification
      console.log("responded...");
    }
  );

After installation, This will work even on development mode (by running electron . command) provided that you'll not change the appId of your app after installation since there will be a mismatch on the installed one and the development version of the app.

score 1 · Answer 2 · answered Dec 15 '17 at 12:33

1

You don't need to use IPC and send notifications from the main process, this is supported from the renderer process using the HTML5 notification API.

let myNotification = new Notification('Title', {
  body: 'Lorem Ipsum Dolor Sit Amet'
})

myNotification.onclick = () => {
  console.log('Notification clicked')
}

answered Dec 15 '17 at 12:33

Tim

7,746
3
49
83

thank you for pointing that out, it will greatly help to reduce complexity. I got it working now, I'll post answer soon. – Jaime Sangcap Dec 17 '17 at 06:23
Is there any way to show all notifications say 5 notification stack – Rahul Matte Jun 28 '18 at 11:23
1

does this HTML5 notification work on the main process of the electron app? – Abhilash KK Feb 06 '19 at 16:20
This is not working for me. I don't want to have my users forced to pin my app to their start menu to use these notifications. Is there anyway to show notifications without having to install shortcut to start menu, and to pin it to start menu? – Noitidart Apr 06 '19 at 16:42
@Abhilash did you figure this out? – Noitidart Apr 06 '19 at 16:42
@Noitidart sorry I couldn't get much time to look into that. – Abhilash KK Apr 08 '19 at 04:37
Darn, thanks though @Abhilash for the reply. What I did for Windows users is use `node-notifier` package, and then for others I'm using built-in `Notification` module. `node-notifier` on Mac has a weird terminal icon (there is a popular issue its github repo) – Noitidart Apr 08 '19 at 15:04

score 1 · Answer 3 · answered Jul 15 '19 at 00:25

I've also tried many things, but sometimes it works or not.

At last, I've found a way. This works well for not only "npm run dev", but also package built.

use Notification at renderer process.
register app id at package.json

"build": { "appId": "my app id", ...
call app.setAppUserModelId("my app id") at main process (https://electronjs.org/docs/api/app#appsetappusermodelidid-windows)

Here app id can be any type of string.

score 1 · Answer 4 · answered Sep 25 '20 at 13:46

This error doesn't need any configuration all you have to do is go to your setting and enable notification Because in some cases on your computer you just switched off notifications.

System Setting ->Notification & Actions

Then turn on Notification By clicking the switch (problem solved)

score 0 · Answer 5 · answered Aug 27 '19 at 11:55

0

You can do this, it works for me even on windows 10.

in package.json

 "build": {
 "appId": "your.custom.app.id",
 }

in main.js

app.setAppUserModelId("your.custom.app.id");

answered Aug 27 '19 at 11:55

William Fisher

71
1
4

Electron with node-notifier display windows 10 notification

5 Answers5

Linked