How can I open a page by clicking on notification using electron

Question

I was developing an application that create alert/notification through a socket server. So i have made following components for implementing the same.

1. Socket server with node-notifier

2. Electron Application

Here i am getting notifications without any issue. But when i am clicking on notification it is not going inside following code part. So i am not able to handle events such as click,close and so on.

top.notification.on("click", ev =>{ console.log("User Clicked on Notification"); });

My index.js file used for Electron application look like below.

"use strict";

const appId = "com.myapp.id";
const {
  app,
  nativeImage,
  Tray,
  Menu,
  BrowserWindow,
  Notification
} = require("electron");
app.setAppUserModelId(appId);
let top = {}; // prevent gc to keep windows
app.once("ready", ev => {
  top.win = new BrowserWindow({
    width: 800,
    height: 600,
    center: true,
    minimizable: true,
    show: true,
    webPreferences: {
      nodeIntegration: false,
      webSecurity: true,
      sandbox: true,
    },
  });
  top.win.loadURL("http://localhost:4200");
  top.win.on("close", ev => {
    //console.log(ev);
    ev.sender.hide();
    ev.preventDefault();
  });

  top.notification = new Notification('Title', {
    body: 'Lorem Ipsum Dolor Sit Amet'
  });
  top.notification.on("click", ev => {
    console.log("User Clicked on Notification");
  });
});
app.on("before-quit", ev => {
  top.win.removeAllListeners("close");
  top = null;
});

Socket server code is like below

let app = require('express')();
let http = require('http').Server(app);
let io = require('socket.io')(http);
let not = require('node-notifier');

io.on('connection', (socket) => {
  var userId = Math.floor(Math.random() * 100)
  // Log whenever a user connects
  console.log(userId, 'user connected');
  var alert = new Object();
  alert.name = 'fire at backyard';
  alert.details = 'fire at backyard hometown  location :lat:1.23424 lang:123434';
  alert.createdBy = 'User';
  alert.createdDate = new Date();
  // Log whenever a client disconnects from our websocket server
  socket.on('disconnect', function() {
    console.log(userId, 'user disconnected');
  });
  // When we receive a 'message' event from our client, print out
  // the contents of that message and then echo it back to our client
  // using `io.emit()`
  socket.on('message', (message) => {
    alert.name = message;
    io.emit('alertGenerated', alert);
    not.notify({
      title: 'My notification',
      message: 'Hello, there!',
      appId: "com.myapp.id"
    });
    console.log("Message send by socket", userId, ":", alert.name);
  });
});
// Initialize our websocket server on port 5000
http.listen(8000, () => {
  console.log('started on port 8000');
});

Please help me to handle notification events for my Windows desktop notifications in Electron framework.

Answer 1

If I'm understanding your question correctly, Electron uses the same Notifications API that browsers do to show desktop notifications.

So to manage a click event (like opening a new window) you can create a notification and add a listener to the click event. In my case, I open new window using

newNotification = new Notification('Hi, this is a notification');

newNotification .onclick = function (event) {
    event.preventDefault(); // prevent the browser from focusing the Notification's tab
    window.open("google.com","_blank");
};

See https://www.electronjs.org/docs/api/window-open for Electron details of window.open()