Using Notification API for Electron App

Question

How to implement Notification API on Electron App?

I tried checking Notification.permission and it returns granted

But when I try to run:

new Notification("FOO", {body:"FOOOOOOOOOOOOOOOOOOOOOOOOO"});

nothing happens. Is it even supported?

Answer 1

A good approach is use node-notifier for notifications, because the package have cross-platform notification support

Answer 2

Note: Since this is an HTML5 API it is only available in the renderer process.

Example :

let myNotification = new Notification('Title', {
  body: 'Lorem Ipsum Dolor Sit Amet'
})

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

Windows

On Windows 10, notifications "just work".

On Windows 8.1 and Windows 8, a shortcut to your app, with a Application User Model ID, must be installed to the Start screen. Note, however, that it does not need to be pinned to the Start screen.

On Windows 7, notifications are not supported. You can however send "balloon notifications" using the Tray API.

Furthermore, the maximum length for the notification body is 250 characters, with the Windows team recommending that notifications should be kept to 200 characters.

More information : https://github.com/electron/electron/blob/master/docs/tutorial/desktop-environment-integration.md#notifications-windows-linux-os-x

Answer 3

The HTML5 Notification API is only available in the renderer process.

You must require the Electron Notification API if you want to use notifications from the main process. The API is different from the standard/HTML5 version.

const {Notification} = require('electron');

new Notification({
    title: 'Headline',
    body: 'Here write your message'
}).show();

Answer 4

The notification API doesn't work on Windows, because there is no notification API that works on all versions of Windows (really Win10 is the first version where desktops have a documented API for it, Win8.x had it but it was WinRT-only)

Answer 5

Posting an updated answer that Electron has a section in their tutorial for their Notifications and about how to handle Windows

Windows

• On Windows 10, a shortcut to your app with an Application User Model ID must be installed to the Start Menu. This can be overkill during development, so adding node_modules\electron\dist\electron.exe to your Start Menu also does the trick. Navigate to the file in Explorer, right-click and 'Pin to Start Menu'. You will then need to add the line app.setAppUserModelId(process.execPath) to your main process to see notifications.
• On Windows 8.1 and Windows 8, a shortcut to your app with an Application User Model ID must be installed to the Start screen. Note, however, that it does not need to be pinned to the Start screen.
• On Windows 7, notifications work via a custom implementation which visually resembles the native one on newer systems. Electron attempts to automate the work around the Application User Model ID. When Electron is used together with the installation and update framework Squirrel, shortcuts will automatically be set correctly. Furthermore, Electron will detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. During development, you may have to call app.setAppUserModelId() yourself.

Furthermore, in Windows 8, the maximum length for the notification body is 250 characters, with the Windows team recommending that notifications should be kept to 200 characters. That said, that limitation has been removed in Windows 10, with the Windows team asking developers to be reasonable. Attempting to send gigantic amounts of text to the API (thousands of characters) might result in instability.

Answer 6

for window 7, you might try this: https://github.com/blainesch/electron-notifications - it generates 'desktop' notifications as separate electron windows. It looks pretty slick; I'm about to implement it now. I believe you'll need to use something like https://github.com/electron/electron/blob/master/docs/api/ipc-main.md to communicate between your app and the main electron process which would be responsible for displaying and managing the notifications, unless your main electron process is already responsible for the notification logic.