2017-03-23 21:08:19 +00:00
# Notifications (Windows, Linux, macOS)
All three operating systems provide means for applications to send notifications
to the user. Electron conveniently allows developers to send notifications with
the [HTML5 Notification API ](https://notifications.spec.whatwg.org/ ), using
the currently running operating system's native notification APIs to display it.
2017-05-20 11:25:26 +00:00
**Note:** Since this is an HTML5 API it is only available in the renderer process. If
you want to show Notifications in the main process please check out the
[Notification ](../api/notification.md ) module.
2017-03-23 21:08:19 +00:00
```javascript
2020-07-09 17:18:49 +00:00
const myNotification = new Notification('Title', {
2017-03-23 21:08:19 +00:00
body: 'Lorem Ipsum Dolor Sit Amet'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}
```
While code and user experience across operating systems are similar, there
2017-05-01 23:00:25 +00:00
are subtle differences.
2017-03-23 21:08:19 +00:00
## Windows
2018-06-16 00:32:19 +00:00
* On Windows 10, a shortcut to your app with an [Application User
2019-01-08 16:16:30 +00:00
Model ID][app-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.
2018-06-16 00:32:19 +00:00
* On Windows 8.1 and Windows 8, a shortcut to your app with an [Application User
Model ID][app-user-model-id] must be installed to the Start screen. Note,
2017-03-23 21:08:19 +00:00
however, that it does not need to be pinned to the Start screen.
2017-05-01 22:59:00 +00:00
* On Windows 7, notifications work via a custom implementation which visually
2018-06-16 00:32:19 +00:00
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][squirrel-events]. Furthermore,
Electron will detect that Squirrel was used and will automatically call
`app.setAppUserModelId()` with the correct value. During development, you may have
2019-01-08 21:40:57 +00:00
to call [`app.setAppUserModelId()`][set-app-user-model-id] yourself.
2017-03-23 21:08:19 +00:00
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
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 ](https://github.com/felixrieseberg/electron-windows-notifications ),
which uses native Node addons to send `ToastNotification` and `TileNotification` objects.
2018-05-08 05:16:09 +00:00
While notifications including buttons work with `electron-windows-notifications` ,
2017-03-23 21:08:19 +00:00
handling replies requires the use of [`electron-windows-interactive-notifications` ](https://github.com/felixrieseberg/electron-windows-interactive-notifications ), 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
[electron-notification-state ](https://github.com/felixrieseberg/electron-notification-state ).
This allows you to determine ahead of time whether or not Windows will silently throw
the notification away.
## macOS
2017-05-01 23:00:25 +00:00
Notifications are straight-forward on macOS, but you should be aware of
2018-05-29 15:16:26 +00:00
[Apple's Human Interface guidelines regarding notifications ](https://developer.apple.com/macos/human-interface-guidelines/system-capabilities/notifications/ ).
2017-03-23 21:08:19 +00:00
2017-05-01 23:00:25 +00:00
Note that notifications are limited to 256 bytes in size and will be truncated
2017-03-23 21:08:19 +00:00
if you exceed that limit.
### Advanced Notifications
Later versions of macOS allow for notifications with an input field, allowing the user
2017-05-01 23:00:25 +00:00
to quickly reply to a notification. In order to send notifications with an input field,
2017-03-23 21:08:19 +00:00
use the userland module [node-mac-notifier ](https://github.com/CharlieHess/node-mac-notifier ).
### Do not disturb / Session State
To detect whether or not you're allowed to send a notification, use the userland module
[electron-notification-state ](https://github.com/felixrieseberg/electron-notification-state ).
This will allow you to detect ahead of time whether or not the notification will be displayed.
## Linux
2017-05-01 23:00:25 +00:00
Notifications are sent using `libnotify` which can show notifications on any
2017-03-23 21:08:19 +00:00
desktop environment that follows [Desktop Notifications
Specification][notification-spec], including Cinnamon, Enlightenment, Unity,
GNOME, KDE.
2017-10-12 12:55:21 +00:00
[notification-spec]: https://developer.gnome.org/notification-spec/
2017-11-03 18:52:27 +00:00
[app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
2018-06-16 00:32:19 +00:00
[set-app-user-model-id]: ../api/app.md#appsetappusermodelidid-windows
2019-01-08 16:16:30 +00:00
[squirrel-events]: https://github.com/electron/windows-installer/blob/master/README.md#handling-squirrel-events