跳转到主内容

通知（Notifications）

每个操作系统都有自己的机制向用户显示通知。 Electron的通知 API 是跨平台的，但对每个 进程 类型来说是不同的。

如果您想要在主进程中使用渲染器进程 API，或者要在渲染器进程中使用主进程 API，请考虑使用 进程间通信

用法​

下面是两个关于如何显示每个 进程 类型的通知的示例。

在主进程中显示通知​

Main process notifications are displayed using Electron's Notification module. 使用此模块创建的通知对象不会立刻显示，除非调用他们的 show() 实例 方法。

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()

下面是您可以使用 Electron Fiddle 打开的完整示例：

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

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()
  }
})

在渲染进程中显示通知​

通知可以直接在渲染进程中使用 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)

下面是您可以使用 Electron Fiddle 打开的完整示例：

docs/fiddles/features/notifications/renderer (34.0.2)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 }

不同平台注意事项​

虽然操作系统的代码和用户体验相似，但依然存在微妙的差异。

Windows​

对于Windows上的通知 您的 Electron 应用需要有一个带有 AppUserModelID 和对应的 ToastActivatorCLSID 的开始菜单快捷方式。

Electron 尝试使AppUserModelID 和 ToastActivatorCLSID的工作自动化。 Electron在和安装和更新框架 Squirrel 一起使用的时候，Windows (例如你正在使用electron-winstaller)快捷方式将被自动正确的配置好。

在生产环境中，Electron 会自动检测 Squirrel 的存在，并且使用正确的值来自动调用app.setAppUserModelId()。 During development, you may have to call app.setAppUserModelId() yourself.

开发环境中显示通知

为了快速实现开发模式下显示通知，因为将 node_modules\electron\dist\electron.exe 添加到您的开始菜单也可以解决问题。 导航到资源管理器中的文件，右键单击并选择 “固定到开始菜单”。 然后，在主进程中调用 app.setAppUserModelId(process.execPath) 以查看通知。

使用高级通知​

Windows还允许使用自定义模板、图像和其他灵活的元素进行高级通知。

要从主进程发送这些通知，您可以使用用户空间模块 electron-windows-notifications ，它使用本机Node插件发送ToastNotification 和 TileNotification 对象。

当包括按钮在内的通知使用 electron-windows-notifications 时，处理回复需要使用 electron-windows-interactive-notifications 帮助注册所需的 COM 组件并调用您的 Electron 应用程序和输入的用户数据。

查询通知状态​

要检测是否允许发送通知，请使用用户空间的 windows-notification-state 模块。

该模块允许你事先确定 Windows 是否会静默丢弃通知。

macOS​

在macOS上发送通知很简单，你应该参考苹果关于通知的人机界面指南。

请注意，通知的大小限制为256个字节，如果超过该限制，则会被截断。

查询通知状态​

要检测是否允许发送通知，可以使用用户空间的macos-notification-state模块。

该模块允许你事先确定通知是否会被显示。

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.