Notifications

For the Renderer process, Electron conveniently allows developers to send notifications with the , using the currently running operating system’s native notification APIs to display it.

To show notifications in the Main process, you need to use the Notification module.

Starting with a working application from the , add the following line to the file before the closing </body> tag:

…and add the renderer.js file:

docs/fiddles/features/notifications/renderer (23.0.0)

main.js
index.html
renderer.js

const { app, BrowserWindow } = require('electron')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
  })
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
    app.quit()
  }
})
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

const NOTIFICATION_TITLE = 'Title'
const CLICK_MESSAGE = 'Notification clicked!'
new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
  .onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE

After launching the Electron application, you should see the notification:

Starting with a working application from the , update the main.js file with the following lines:

docs/fiddles/features/notifications/main (23.0.0)

main.js
index.html


<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>After launching this application, you should see the system notification.</p>
</body>
</html>

After launching the Electron application, you should see the system notification:

While code and user experience across operating systems are similar, there are subtle differences.

On Windows 10, a shortcut to your app with an Application User Model ID.aspx) 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.

Electron attempts to automate the work around the Application User Model ID. When Electron is used together with the installation and update framework Squirrel, . 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.

Advanced Notifications

Later versions of Windows allow for advanced notifications, with custom templates, images, and other flexible elements. To send those notifications (from either the main process or the renderer process), use the userland module electron-windows-notifications, which uses native Node addons to send ToastNotification and TileNotification objects.

Quiet Hours / Presentation Mode

To detect whether or not you’re allowed to send a notification, use the userland module electron-notification-state.

This allows you to determine ahead of time whether or not Windows will silently throw the notification away.

Notifications are straight-forward on macOS, but you should be aware of Apple’s Human Interface guidelines regarding notifications.

Note that notifications are limited to 256 bytes in size and will be truncated if you exceed that limit.

Do not disturb / Session State

To detect whether or not you’re allowed to send a notification, use the userland module electron-notification-state.

This will allow you to detect ahead of time whether or not the notification will be displayed.

Notifications are sent using libnotify which can show notifications on any desktop environment that follows Desktop Notifications Specification, including Cinnamon, Enlightenment, Unity, GNOME, KDE.