Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Electron Desktop Notifications Tutorial

By Gary simon - Nov 29, 2017

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial

We are just about finished with our Electron Bitcoin price alert app. The only thing left to do is to display a desktop notification when the price of 1 Bitcoin (BTC) exceeds a user specified amount.

We can do this very easily with Electron's Notification API.

Let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

..video coming soon..

Setting the Notification Title & Body

A notification contains both a title and body that you need to specify in the form of an object.

Open up /src/index.js and add the following, just above our getBTC() function:

var targetPriceVal;

const notification = {
    title: 'BTC Alert',
    body: 'BTC just beat your target price!'
}

function getBTC() { ... }

Making the Notification Appear

Next, within our getBTC() function, we want to declare an if statement to determine if the user-specified price is less than the actual price of Bitcoin. If it is, we show the notification:

function getBTC() {
    axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC&tsyms=USD')
    .then(res => {
        const cryptos = res.data.BTC.USD
        price.innerHTML = '$'+cryptos.toLocaleString('en')

        // Add this:
        if (targetPrice.innerHTML != '' && targetPriceVal < res.data.BTC.USD) {
            const myNotification = new window.Notification(notification.title, notification)
        }

    })
}

To give this a test, run npm start and set the notification value to a significantly lower value than the current price of Bitcoin and then wait 30 seconds.

It should give you a notification along with a sound alert. On windows, it looks like this:

Setting a Custom Icon for the Notification

Notice that blank image from above? We can specify an image/icon that will show up in the notification area:

Modify our notification to the following:

const notification = {
    title: 'BTC Alert',
    body: 'BTC just beat your target price!',
    icon: path.join(__dirname, '../assets/images/btc.png')
}

Yes, this will mean you will need to place a file called btc.png inside of the images folder. I used this one here (Rename the .ico to png and it will work).

The result?

 

Excellent!

Detecting when a Notification is Clicked

These notifications are clickable! Just after our if statement inside of the getBTC() function, add:

        if (targ...) {
            ...
        }

        myNotification.onclick = () => {
            console.log('clicked')
        }

Of course, you could do anything else outside of console logging.

Going Further with Notifications

According to the Official Notifications Docs, you can send more elaborate notifications based on the OS.

For Windows, you would need to integrate electron-windows-notifications

For Mac, you can integrate node-mac-modifier.

We're not going to cover that in this course, we're just focused on the beginner's stuff.

Going Forward

Now that our very simple app is now complete for this course, in the next lesson, we're going to take a look at how you can build out your app for others to use.

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial


Share this post




Say something about this awesome post!