Electron Fiddle Gist

index.html

<script src="renderer.js"></script>

<p><button onclick="requestPermission()">Request permission</button></p>
<p><button onclick="createMessageNotification()">Generate Notification</button></p>

main.js

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      nodeIntegration: false
    }
  });

  mainWindow.loadURL('file://' + __dirname + '/index.html');
});

preload.js

// Empty

renderer.js

let notifications = new Map();
let count = 0;

function requestPermission() {
  if (!('Notification' in window)) {
    alert('Notification API not supported!');
    return;
  }
  console.log('requesting perm');
  Notification.requestPermission(function (result) {
    console.log('Permission status: ', result);
  });
}

function createMessageNotification() {
  if (!('Notification' in window)) {
    alert('Notification API not supported!');
    return;
  }
  console.log('Creating new notification');
  try {
    let tag = 'messageNotification';
    let oldNotification = notifications.get(tag);
    if (oldNotification) {
      console.log('Closing old notification: ', oldNotification.body);
      oldNotification.close();
      notifications.delete(tag);
    }
    let messageBody = `New Message: ${++count}`;
    let notification = new Notification("NOTIFICATION", {
      tag,
      requireInteraction: true,
      body: messageBody
    });
    notification.onclose = function() {
      console.log('Notification Successfully closed: ', notification.body);
    }
    notification.onerror = function(err) {
      console.log('Notification error: ', err);
    }
    notifications.set(notification.tag, notification);
  } catch (err) {
    alert('Notification API error: ' + err);
  }
}

styles.css

/* Empty */