New to electron - access javascript on client from web app


#1

Hello,

I am new to electron. I am trying to implement desktop notifications in an electron app. For this I am calling a javascript function written in the client electron app from the web app js, but it says function is undefined. can you please help in this.

Thanks,


#2

Could you provide a sample of code, so we know both how you’re trying to approach this and to get a better idea of what might be going wrong?


#3

Hello,

Thanks for the quick response. I have added a JS file in the electron project with the following code

// request permission on page load
const path = require('path');
const notifier = require('node-notifier');
const iconPath = path.join(__dirname, '/assets/images/b(1024)-60@2x.png')
const currentWindow = require('electron').BrowserWindow;

notifier.on('click', function (notifierObject, options) {
  // Triggers if `wait: true` and user clicks notification
  windowObj.minimize();
});

notifier.on('timeout', function (notifierObject, options) {
  // Triggers if `wait: true` and notification closes
});

 
 // Method called from web app where notifications needs to be invodked
function **notifyDesktop**(title,message)
{
 
 notifier.notify({
  title: title,
  message: message,
  icon: iconPath, // Absolute path (doesn't work on balloons)
  sound: true, // Only Notification Center or Windows Toasters
  wait: true // Wait with callback, until user action is taken against notification
}, function (err, response) {
  // Response is response from notification
});
}

I need to call the notifyDesktop method from the JS file that loads with the web app.

Thanks,


#4

Trying to call notifyDesktop from your web page, won’t work, they’re completely separate processes, so your web page is completely unaware of that function, the node-notifier module and any associated event listeners.

Assuming you’re not disabling Node integration in your BrowserWindow, you should just be able to move all the node-notifier-related code into your web app JS and call it from there instead.


#5

On a side note, you could also use the HTML5 Notification API, without needing and modules, from your BrowserWindow:


#6

Hello,

Thanks for your response. I have implemented the code as per the example from https://github.com/hokein/electron-sample-apps/tree/master/notifications. But still I am not getting the desktop notifications. The example shows the event listner add for DOMContentLoaded to document object. I did the same with modifications to remove the buttons events and directly added the code for notify.

Can you please let me know whats wrong with it

Thanks,


#7

Not without seeing your code, no.


#8

Hello ,

Below is the code that I have in the notification.js File which is included in the index.html that loads the website in iframe :

// request permission on page load
const path = require(‘path’);
const notifier = require(‘node-notifier’);
const iconPath = path.join(__dirname, ‘/assets/images/111111111.png’)
const currentWindow = require(‘electron’).BrowserWindow;

notifier.on(‘click’, function (notifierObject, options) {
// Triggers if wait: true and user clicks notification
windowObj.minimize();
});

notifier.on(‘timeout’, function (notifierObject, options) {
// Triggers if wait: true and notification closes
});

var options =
{

“title” : “My tests”,
“message” : “hello”,
“icon” :iconPath,
“sound” : true

}

const NotificationCenter = require(‘node-notifier/notifiers/notificationcenter’);
new NotificationCenter(options).notify();

const NotifySend = require(‘node-notifier/notifiers/notifysend’);
new NotifySend(options).notify();

const WindowsToaster = require(‘node-notifier/notifiers/toaster’);
new WindowsToaster(options).notify();

const Growl = require(‘node-notifier/notifiers/growl’);
new Growl(options).notify();

document.addEventListener(‘DOMContentLoaded’, function()
{
debugger;

notifyDesktop('My Test','Hello');

});

function notifyDesktop(title,message)
{
debugger;
console.log(‘notify desk’);
notifier.notify({
title: title,
message: message,
icon: iconPath, // Absolute path (doesn’t work on balloons)
sound: true, // Only Notification Center or Windows Toasters
wait: true // Wait with callback, until user action is taken against notification
}, function (err, response) {
// Response is response from notification
});

Please share your thoughts on this
}


#9

I’m not sure you 100% get how the easy notifications. In browsers there is a HTML5 notifications API you can very easily tap into. Instead of requiring any node modules the build of Chrome that Electron uses (the latest, basically) has native notification support. Here’s an example of how I call a notification:

var myNotification = new Notification('The Title!', {
	icon:  'path/to/icon.png',
	body: 'Your notification body'
});

myNotification.onclick =  function ()
{
	myNotification.close();
};

#10

Hello,

Thanks for the response this is to generate the notifications on the app. I need to handle the browser notifications. My Web app sends notifications to the browser, I need to catch those and show as desktop notifications.

Thanks,


#11

Electron runs chrome in it’s browser window. So, when I say browser notifications they will be the native desktop notifications. See the following link:

http://electron.atom.io/docs/all/#notifications-windows-linux-macos


#12

Hello,

My Web app already implements this call I need to get the values from this notifications call and send it to the desktop notifications. Please suggest.

Thanks,