Notifications

    For the Renderer process, Electron conveniently allows developers to send notifications with the HTML5 Notification API, 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 module.

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

    …and add the renderer.js file:

    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:

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

    Notification in the Main process

    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 must be installed to the Start Menu. This can be overkill during development, so adding 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 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 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.

    Advanced Notifications

    While notifications including buttons work with electron-windows-notifications, handling replies requires the use of , which helps with registering the required COM components and calling your Electron app with the entered user data.

    Quiet Hours / Presentation Mode

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

    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.

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