Skip to main content

Notifications通知

Overview概述​

All three operating systems provide means for applications to send notifications to the user. 所有三个操作系统都为应用程序提供了向用户发送通知的手段。The technique of showing notifications is different for the Main and Renderer processes.显示通知的技术对于主进程和渲染器进程是不同的。

For the Renderer process, Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system's native notification APIs to display it.对于渲染器进程，Electron方便地允许开发人员使用HTML5 Notification API发送通知，使用当前运行的操作系统的本地通知API来显示。

To show notifications in the Main process, you need to use the Notification module.要在主流程中显示通知，您需要使用通知模块。

Example示例​

Show notifications in the Renderer process在渲染器进程中显示通知​

Starting with a working application from the Quick Start Guide, add the following line to the index.html file before the closing </body> tag:从快速入门指南中的工作应用程序开始，在关闭</body>标记之前将以下行添加到index.html文件：

<script src="renderer.js"></script>

...and add the renderer.js file:..并添加renderer.js文件：

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

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

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

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

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

After launching the Electron application, you should see the notification:启动Electron应用程序后，您应看到通知：

Notification in the Renderer process

Additionally, if you click on the notification, the DOM will update to show "Notification clicked!".此外，如果单击通知，DOM将更新为显示“通知已单击！”。

Show notifications in the Main process在主进程中显示通知​

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:从快速入门指南中的工作应用程序开始，使用以下行更新main.js文件：

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

After launching the Electron application, you should see the system notification:启动Electron应用程序后，您应看到系统通知：

Notification in the Main process

Additional information补充资料​

While code and user experience across operating systems are similar, there are subtle differences.虽然不同操作系统的代码和用户体验相似，但存在细微差异。

Windows​

  • On Windows 10, a shortcut to your app with an Application User Model ID must be installed to the Start Menu. 在Windows 10上，必须在“开始”菜单中安装应用程序用户型号ID的应用程序快捷方式。This can be overkill during development, so adding node_modules\electron\dist\electron.exe to your Start Menu also does the trick. 在开发过程中，这可能是过度的，因此将node_modules\electron\dist\electron.exe添加到“开始”菜单中也可以。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.然后，您需要将行app.setAppUserModelId(process.execPath)添加到主进程中以查看通知。
  • On Windows 8.1 and Windows 8, a shortcut to your app with an Application User Model ID must be installed to the Start screen. 在Windows 8.1和Windows 8上，必须在开始屏幕上安装应用程序用户型号ID的应用程序快捷方式。Note, however, that it does not need to be pinned to the Start screen.但是，请注意，它不需要固定到开始屏幕。
  • On Windows 7, notifications work via a custom implementation which visually resembles the native one on newer systems.在Windows 7上，通知通过自定义实现工作，在视觉上类似于较新系统上的本机实现。

Electron attempts to automate the work around the Application User Model ID. Electron尝试围绕应用程序用户模型ID自动化工作。When Electron is used together with the installation and update framework Squirrel, shortcuts will automatically be set correctly. 当Electron与安装和更新框架Squirrel一起使用时，快捷方式将自动正确设置。Furthermore, Electron will detect that Squirrel was used and will automatically call app.setAppUserModelId() with the correct value. 此外，Electron将检测到使用了Squirrel，并将使用正确的值自动调用app.setAppUserModelId()。During development, you may have to call app.setAppUserModelId() yourself.在开发过程中，您可能需要自己调用app.setAppUserModelId()。

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. 此外，在Windows 8中，通知正文的最大长度为250个字符，Windows团队建议通知应保持在200个字符。That said, that limitation has been removed in Windows 10, with the Windows team asking developers to be reasonable. 也就是说，Windows 10已经取消了这一限制，Windows团队要求开发人员保持理性。Attempting to send gigantic amounts of text to the API (thousands of characters) might result in instability.试图向API发送大量文本（数千个字符）可能会导致不稳定。

Advanced Notifications高级通知​

Later versions of Windows allow for advanced notifications, with custom templates, images, and other flexible elements. 更高版本的Windows允许高级通知，包括自定义模板、图像和其他灵活元素。To send those notifications (from either the main process or the renderer process), use the userland module electron-windows-notifications, which uses native Node addons to send ToastNotification and TileNotification objects.要发送这些通知（从主进程或渲染器进程），请使用userland模块electron-windows-notifications，该模块使用本机节点插件发送ToastNotification和TileNotification对象。

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.虽然包括按钮的通知可与electron-windows-notifications一起使用，但处理回复需要使用electron-windows-interactive-notifications，这有助于注册所需的COM组件并使用输入的用户数据调用Electron应用程序。

Quiet Hours / Presentation Mode安静时间/演示模式​

To detect whether or not you're allowed to send a notification, use the userland module electron-notification-state.要检测是否允许发送通知，请使用userland模块electron-notification-state。

This allows you to determine ahead of time whether or not Windows will silently throw the notification away.这允许您提前确定Windows是否会自动丢弃通知。

macOS​

Notifications are straight-forward on macOS, but you should be aware of Apple's Human Interface guidelines regarding notifications.通知在macOS上是直截了当的，但您应该了解苹果关于通知的人机界面指南。

Note that notifications are limited to 256 bytes in size and will be truncated if you exceed that limit.请注意，通知的大小限制为256字节，如果超过该限制，将被截断。

Do not disturb / Session State请勿打扰/会话状态​

To detect whether or not you're allowed to send a notification, use the userland module electron-notification-state.要检测是否允许发送通知，请使用userland模块electron-notification-state。

This will allow 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, KDE.通知是使用libnotify发送的，它可以在遵循桌面通知规范的任何桌面环境上显示通知，包括Cinnamon、Instruction、Unity、GNOME和KDE。