Notifications

A notification is a pop-up message from the operating system in a corner of the screen. It is visible even when the app window is hidden or sent to the tray. Electron shows notifications with the system's own tools, so they look the same as in other apps.

A notification from the main process

In the main process a notification is created with the Notification class from the electron module. Show one after exporting notes:

// main.js
const { Notification } = require('electron');
 
function notifyExported(filePath) {
  const notification = new Notification({
    title: 'Notes',
    body: `Notes saved to ${filePath}`,
  });
  notification.show();
}

Call notifyExported(result.filePath) in the notes:export handler from the dialogs lesson after writing the file. A message with the file path appears in the corner of the screen.

Options

Notification.isSupported() tells whether the system supports notifications.

Clicking a notification

// main.js
notification.on('click', () => {
  win.show();
  win.focus();
});
notification.show();

If the window was hidden in the tray, clicking the notification shows it. Subscribe to the event before calling show().

A notification from the page

The page has the standard browser Notification class — the same as on websites. There is no need to ask the user for permission:

// renderer.js
function remind(note) {
  new Notification('Reminder', { body: note });
}

A browser notification is handy when everything needed is already on the page. If the notification is about main process work — saving, downloading, a background timer — show it from main.js.

Windows specifics

Windows ties notifications to an app identifier (AppUserModelID). The Electron Forge installer sets it, and for runs with npm start you can set it in code:

// main.js
if (process.platform === 'win32') {
  app.setAppUserModelId('com.example.notes');
}

This line usually goes at the top of main.js, before any windows are created.

Common mistake

Creating a Notification object is not enough: without show() nothing appears, and there is no error. Also keep a reference to the notification if you subscribed to click — otherwise the garbage collector may remove the object and the click does nothing.