Electron Desktop Notification Using Node Notifier -Tutorial Savvy

Electron framework does not provide cross platform notification API.
We can use HTML5 Web Notification API to create notification.But it can only be used in Mac OS and Linux.
Electron for Windows build does not support Web Notification.This concludes We need a cross platform notification solution.We can solve this problem using node-notifier NPM module.
In this demo, “We will learn to install and use node-notifier for cross platform notification solution for Electron framework”.
We can install node-notifier NPM module using npm install node-notifier --save command.The following screenshot shows the terminal with node-notifier installation.

For demonstrating notification we have created a project structure name ElectronExample4.The following screenshot shows the project structure.

The main.js file contains the code for Electron BrowserWindow instance and loads the main.html file in browser window.The following code shows the content of main.js file.

var application = require('app'),
    BrowserWindow = require('browser-window');
application.on('ready', function() {
    var mainWindow = new BrowserWindow({
        width: 600,
        height: 300,
        center:true,
        title:"Electron Notification Example",
    });
    mainWindow.loadUrl('file://' + __dirname + '/main.html');
    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});

The main.html file contains HTML code containing 2 input field and a button.One input field is used for title and other input is used for message.When user click the button it generates a notification.The code for main.html file is as follows.

<html>
<head>
    <style>
        input {
            display: block;
        }
    </style>
</head>
<body>
<fieldset>
    <legend>Notification : </legend>
    <label for="title">Title</label>
    <input id="title" type="text" value="Notification Title">
    <label for="message">Message</label>
    <input id="message" type="text" value="Notification Message">
    <button id="notifyButton">Generate</button>
</fieldset>
</body>
<script src="js/app.js"></script>
</html>

The js/app.js file contains the code for click handler for the button.The click handler gets the value of title and message field and used to generate a notification.The code for app.js file are as follows.

var notifier = require('node-notifier'),
    path = require('path');;
(function() {
    var createNotification = function(title, message) {
        notifier.notify({
            title: title,
            message: message,
            icon: path.join(__dirname, 'image/favicon.png'),
            sound: true,
            wait: false
        });
    };
    var handleNotification = function(event) {
        var title = document.getElementById("title").value,
            message = document.getElementById("message").value;
        createNotification(title, message)
    };
    var notifyButton = document.getElementById("notifyButton");
    notifyButton.addEventListener("click", handleNotification);
})();

The image/favicon.png file is used as icon of the notification instance object.
The demo code can be found in the following GitHub link:

https://github.com/saan1984/ElectronExample4

The demo code can be run using npm run start command.The following screenshot shows the terminal with electron start command.

The initial output of the application looks like following screenshot.

We need to supply some text to these input fields.The title field has text ‘Electron notification Demo’ and message field has text ‘Notification is implemented by Node-Notifier’.The following screenshot shows with the filled up text in input fields.

When used clicks on the button a new notification can be seen on the top of the screen.The notification looks like following screenshot.

Electron Desktop Notification Using Node Notifier

Related

Sandeep Patel