跳至主要内容

通知

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

如果你想在主进程中使用渲染器进程的 API，反之亦然，请考虑使用进程间通信。

用法​

下面是两个示例，展示了如何为每种进程类型显示通知。

在主进程中显示通知​

主进程通知使用 Electron 的Notification 模块显示。使用此模块创建的通知对象除非调用其 show() 实例方法，否则不会显示。

主进程
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 (36.1.0)在 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 显示通知。

渲染器进程
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 (36.1.0)在 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() 并设置正确的值。在开发过程中，你可能需要自己调用 app.setAppUserModelId()。

开发环境中的通知

为了在开发过程中快速启动通知，将 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 上的通知相对简单，但你应该了解 Apple 关于通知的人机界面指南。

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

查询通知状态​

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

此模块可以帮助你提前检测通知是否会被显示。

Linux​

通知使用 libnotify 发送，它可以在任何遵循 桌面通知规范 (Desktop Notifications Specification) 的桌面环境中显示通知，包括 Cinnamon、Enlightenment、Unity、GNOME 和 KDE。