Electron with node-notifier display windows 10 notification

Question

Electron with node-notifier display windows 10 notification

11.1k views Asked by Jaime Sangcap At 14 December 2017 at 09:33

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>

Original Q&A

There are 5 answers

Tim On 15 December 2017 at 12:33

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')
}

Genji On 15 July 2019 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.

William Fisher On 27 August 2019 at 11:55

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");

crispengari On 25 September 2020 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)

**Jaime Sangcap** · Accepted Answer · 2017-12-17T06:37:53+00:00

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.

TechQA.

Electron with node-notifier display windows 10 notification

There are 5 answers

Related Questions in NODE.JS

Related Questions in ELECTRON

Related Questions in NODE-NOTIFIER

Popular Questions

Popular Tags

Trending Questions