Electron - Notifications

Electron - Displaying System Notifications

Modern applications often use system notifications to alert users to important events, even when the application window is not in focus. Electron provides a built-in Notification API that works across Windows, macOS, and Linux, leveraging the native notification capabilities of each operating system.

Previously, libraries like node-notifier were common, but Electron’s native Notification API is now the recommended approach for most use cases.

Using the Notification API

The Notification class is part of the electron module. Notifications are typically created and managed in the main process. If you need to trigger a notification from a renderer process (e.g., in response to a user action), you should use IPC (Inter-Process Communication) to request the main process to show it.

Key steps:

1. In the main process, listen for an IPC message from the renderer.
2. When the message is received, create a new Notification instance with desired options (title, body, icon, etc.).
3. Call the show() method on the notification instance.

Let’s create an app with a button that triggers a system notification.

First, your main.js:

const { app, BrowserWindow, ipcMain, Notification } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

ipcMain.on('show-notification', (event, { title, body, icon }) => {
  if (Notification.isSupported()) { // Check if notifications are supported
    const notification = new Notification({
      title: title,
      body: body,
      // icon: icon ? path.join(__dirname, icon) : undefined // Optional: path to an icon file
      // Note: Icon paths can be tricky. For local files, ensure they are accessible.
      // For macOS, only .icns files are supported for notifications if packaged.
    });

    notification.on('click', () => {
      console.log('Notification clicked');
      // Optionally, bring window to front or perform an action
      if (mainWindow) {
        mainWindow.show();
      }
    });

    notification.on('close', () => {
      console.log('Notification closed');
    });

    notification.show();
  } else {
    console.log('Notifications are not supported on this system.');
  }
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

Next, create a preload.js file to securely expose the IPC functionality:

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendNotification: (options) => ipcRenderer.send('show-notification', options)
});

Finally, your index.html with a button:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron Notifications</title>
</head>
<body>
  <h1>Notifications Demo</h1>
  <button id="notifyButton">Show Notification</button>

  <script>
    document.getElementById('notifyButton').addEventListener('click', () => {
      window.electronAPI.sendNotification({
        title: 'My Awesome App',
        body: 'Hello from Electron! This is a notification.',
        // icon: 'assets/icon.png' // Optional: relative path to an icon in your project
      });
    });
  </script>
</body>
</html>

Make sure to create an assets folder with an icon.png if you want to use an icon, and adjust the path accordingly. Icon handling can be platform-specific.

Run your app (electron .). When you click the “Show Notification” button, a native system notification should appear. The appearance varies by OS:

• On Windows, it’s typically a toast notification in the corner.
• On macOS, it appears in the Notification Center.
• On Linux, it depends on the desktop environment’s notification daemon (e.g., libnotify).

The Notification API also supports actions (buttons within the notification on macOS) and replies. Clicking the notification or its closure can be handled by event listeners ('click', 'close', 'reply', 'action') on the Notification object in the main process, allowing for interactive notifications.