Skip to main content

通知

🌐 Notifications

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

🌐 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.

如果你想在主进程中使用渲染进程的 API 或反之，可以考虑使用进程间通信。

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

用法​

🌐 Usage

以下两个示例展示了如何显示每种进程类型的通知。

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

在主进程中显示通知​

🌐 Show notifications in the main process

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

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

这是一个可以使用 Electron Fiddle 打开的完整示例：

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

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

在渲染器进程中显示通知​

🌐 Show notifications in the renderer process

通知可以通过渲染进程直接显示，使用Web 通知 API。

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

这是一个可以使用 Electron Fiddle 打开的完整示例：

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

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

尽管各操作系统的代码和用户体验相似，但仍存在一些细微差别。

🌐 While code and user experience across operating systems are similar, there are subtle differences.

Windows​

在 Windows 上使用通知功能时，你的 Electron 应用需要在开始菜单中有一个带有 应用用户模型ID 的快捷方式以及一个对应的 Toast激活器CLSID。

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

Electron 尝试自动处理 AppUserModelID 和 ToastActivatorCLSID 的相关工作。当 Electron 与 Squirrel.Windows 一起使用时（例如，如果你使用 electron-winstaller），快捷方式将自动正确设置。

🌐 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.

在生产环境中，Electron 还会检测到使用了 Squirrel，并会自动调用 app.setAppUserModelId() 并传入正确的值。在开发进程中，你可能需要自己调用 app.setAppUserModelId()。

🌐 In production, Electron will also detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. During development, you may have to call app.setAppUserModelId() yourself.

开发中的通知

为了在开发进程中快速启动通知，将 node_modules\electron\dist\electron.exe 添加到开始菜单也能起到同样的效果。在资源管理器中找到该文件，右键点击并选择“固定到开始菜单”。然后，在主进程中调用 app.setAppUserModelId(process.execPath) 来查看通知。

🌐 To quickly bootstrap notifications during development, 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'. Then, call app.setAppUserModelId(process.execPath) in the main process to see notifications.

使用高级通知​

🌐 Use advanced notifications

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

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

要从主进程发送这些通知，你可以使用用户级模块 electron-windows-notifications，该模块使用本地 Node 插件来发送 ToastNotification 和 TileNotification 对象。

🌐 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.

虽然包含按钮的通知可以与 electron-windows-notifications 一起使用，但处理回复需要使用 electron-windows-interactive-notifications，它有助于注册所需的 COM 组件并使用输入的用户数据调用你的 Electron 应用。

🌐 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

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

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

该模块允许你事先确定 Windows 是否会悄无声息地丢弃通知。

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

macOS​

对于 macOS 上的通知，你的应用需要进行代码签名，以便通知事件能够正确发出。这个要求源自 Apple 提供的底层 UNNotification API。未签名的二进制文件在调用通知 API 时将发出 failed 事件。

🌐 For notifications on macOS, your application will need to be code-signed in order for notification events to emit correctly. This requirement stems from the underlying UNNotification API provided by Apple. Unsigned binaries will emit a failed event when notification APIs are called.

此外，你还应该注意苹果关于通知的人机界面指南。

🌐 Additionally, you should be aware of Apple's Human Interface guidelines regarding notifications.

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

🌐 Note that notifications are limited to 256 bytes in size and will be truncated if you exceed that limit.

查询通知状态​

🌐 Query notification state

要检测你是否被允许发送通知，请使用用户空间模块 macos-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​

通知是通过 libnotify 发送的，它可以在任何遵循 桌面通知规范 的桌面环境中显示通知，包括 Cinnamon、Enlightenment、Unity、GNOME 和 KDE。

🌐 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.