Ir para o conteúdo principal

Notificações

Each operating system has its own mechanism to display notifications to users. Electron's notification APIs are cross-platform, but are different for each process type.

If you want to use a renderer process API in the main process or vice-versa, consider using inter-process communication.

Usando​

Below are two examples showing how to display notifications for each process type.

Show notifications in the main process​

Main process notifications are displayed using Electron's Notification module. Notification objects created using this module do not appear unless their show() instance method is called.

Main Process
const { Notification } = require('electron')

const NOTIFICATION_TITLE = 'Basic Notification'
const NOTIFICATION_BODY = 'Notification from the Main process'

new Notification({
  title: NOTIFICATION_TITLE,
  body: NOTIFICATION_BODY
}).show()

Here's a full example that you can open with Electron Fiddle:

docs/fiddles/features/notifications/main (27.1.3)Open in Fiddle
const { app, BrowserWindow, Notification } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

const NOTIFICATION_TITLE = 'Basic Notification'
const NOTIFICATION_BODY = 'Notification from the Main process'

function showNotification () {
  new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).show()
}

app.whenReady().then(createWindow).then(showNotification)

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

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

Show notifications in the renderer process​

Notifications can be displayed directly from the renderer process with the web Notifications API.

Renderer Process
const NOTIFICATION_TITLE = 'Title'
const NOTIFICATION_BODY =
  'Notification from the Renderer process. Click to log to console.'
const CLICK_MESSAGE = 'Notification clicked'

new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }).onclick =
  () => console.log(CLICK_MESSAGE)

Here's a full example that you can open with Electron Fiddle:

docs/fiddles/features/notifications/renderer (27.1.3)Open in Fiddle
const NOTIFICATION_TITLE = 'Title'
const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
const CLICK_MESSAGE = 'Notification clicked!'

new window.Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
  .onclick = () => { document.getElementById('output').innerText = CLICK_MESSAGE }

Platform considerations​

Enquanto o código e a experiência do usuário em sistemas operacionais sejam semelhantes, há algumas diferenças.

Windows​

For notifications on Windows, your Electron app needs to have a Start Menu shortcut with an AppUserModelID and a corresponding ToastActivatorCLSID.

Electron attempts to automate the work around the AppUserModelID and ToastActivatorCLSID. When Electron is used together with Squirrel.Windows (e.g. if you're using electron-winstaller), shortcuts will automatically be set correctly.

In production, Electron will also detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. Durante o desenvolvimento, você pode ter que chamar app.setAppUserModelId() por si só.

Notifications in development

To quickly bootstrap notifications during development, adding node_modules\electron\dist\electron.exe to your Start Menu also does the trick. Navegue até o arquivo no Explorer, clique com o botão direito e "Fixar em Iniciar". Then, call app.setAppUserModelId(process.execPath) in the main process to see notifications.

Use advanced notifications​

Windows also allow for advanced notifications with custom templates, images, and other flexible elements.

To send those notifications from the main process, you can use the userland module electron-windows-notifications, which uses native Node addons to send ToastNotification and TileNotification objects.

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

Query notification state​

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

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

macOS​

Notifications are straightforward on macOS, but you should be aware of Apple's Human Interface guidelines regarding notifications.

Note que as notificações tem um limite de 256 bytes de tamanho e serão truncadas se você exceder esse limite.

Query notification state​

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

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

Linux​

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