通知(Notifications)

概览

这三个操作系统都为应用程序向用户发送通知提供了手段。 在主进程和渲染进程中,显示通知的技术不同的。

对于渲染进程,Electron 方便地允许开发者使用 HTML5 通知 API 发送通知,然后使用当前运行中的系统的原生通知 API 来进行显示。

要在主进程中显示通知,您需要使用 Notification 模块。

示例

在渲染进程中显示通知

Quick Start Guide 示例的应用程序开始,将以下行添加到 index.html 文件:

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

并添加 renderer.js 文件:

  • index.html
  • main.js
  • renderer.js
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Hello World!</title>
  6. <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body>
  9. <h1>Hello World!</h1>
  10. <p>After launching this application, you should see the system notification.</p>
  11. <p id="output">Click it to see the effect in this interface.</p>
  12. <script src="renderer.js"></script>
  13. </body>
  14. </html>
  1. const { app, BrowserWindow } = require('electron')
  2. function createWindow () {
  3. const win = new BrowserWindow({
  4. width: 800,
  5. height: 600
  6. })
  7. win.loadFile('index.html')
  8. }
  9. app.whenReady().then(createWindow)
  10. app.on('window-all-closed', () => {
  11. if (process.platform !== 'darwin') {
  12. app.quit()
  13. }
  14. })
  15. app.on('activate', () => {
  16. if (BrowserWindow.getAllWindows().length === 0) {
  17. createWindow()
  18. }
  19. })
  1. const NOTIFICATION_TITLE = 'Title'
  2. const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
  3. const CLICK_MESSAGE = 'Notification clicked!'
  4. new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
  5. .onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE

Open in Fiddle

启动 Electron 应用程序后,您应该能看到通知:

渲染进程中的通知

此外,如果您点击通知,DOM将更新以显示“Notification clicked!”

Show notifications in the Main process

Quick Start Guide 中的应用开始,将以下内容更新到 main.js

  • index.html
  • main.js
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Hello World!</title>
  6. <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body>
  9. <h1>Hello World!</h1>
  10. <p>After launching this application, you should see the system notification.</p>
  11. </body>
  12. </html>
  1. const { app, BrowserWindow, Notification } = require('electron')
  2. function createWindow () {
  3. const win = new BrowserWindow({
  4. width: 800,
  5. height: 600
  6. })
  7. win.loadFile('index.html')
  8. }
  9. const NOTIFICATION_TITLE = 'Basic Notification'
  10. const NOTIFICATION_BODY = 'Notification from the Main process'
  11. function showNotification () {
  12. new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).show()
  13. }
  14. app.whenReady().then(createWindow).then(showNotification)
  15. app.on('window-all-closed', () => {
  16. if (process.platform !== 'darwin') {
  17. app.quit()
  18. }
  19. })
  20. app.on('activate', () => {
  21. if (BrowserWindow.getAllWindows().length === 0) {
  22. createWindow()
  23. }
  24. })

Open in Fiddle

启动 Electron 应用程序后,您应该能看到系统通知:

主进程中的通知

Additional information

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

Windows

  • 在 Windows 10 上,您的应用程序的快捷方式必须安装到启动菜单中,包含一个 Application User Model ID.aspx). This can be overkill during development, so 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’. 然后您需要添加 app.setAppUserModelId(process.execPath) 到主进程才能看到通知。
  • 在 Windows 8.1 和 Windows 8 上,带有 应用程序用户模型ID(Application User Model ID).aspx) 的应用程序快捷方式必须被添加到开始屏幕上。 但是请注意,它不需要被固定到开始屏幕。
  • 在 Windows 7 上, 通知通过视觉上类似于较新系统原生的一个自定义的实现来工作。

Electron尝试将应用程序用户模型 ID 的相关工作自动化。 Electron在和安装和更新框架 Squirrel 协同使用的时候,快捷方式将被自动正确的配置好。 更棒的是,Electron 会自动检测 Squirrel 的存在,并且使用正确的值来自动调用app.setAppUserModelId()。 在开发的过程中, 你可能需要自己调用app.setAppUserModelld()

此外,在Windows 8中,通知正文的最大长度为250个字符,Windows团队建议将通知保留为200个字符。 然而,Windows 10中已经删除了这个限制,但是Windows团队要求开发人员合理使用。 尝试将大量文本发送到API(数千个字符) 可能会导致不稳定。

高级通知

Windows 的更高版本允许高级通知,自定义模板,图像和其他灵活元素。 要发送这些通知(来自主进程或渲染器进程),请使用用户区模块 electron-windows-notifications 来用原生节点附件发送 ToastNotificationTileNotification 对象。

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

免打扰模式 / 演示模式

如果要检测是否允许发送通知,请使用 electron-notification-state 模块。

这样,您可以提前确定 Windows 是否会将通知忽略。

macOS

MacOS上的通知是最直接的,但你应该注意苹果关于通知的人机接口指南(Apple’s Human Interface guidelines regarding notifications).

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

勿扰 / 会话状态

要检测是否允许发送通知,请使用用户区模块 electron-notification-state

这样可以提前检测是否显示通知。

Linux

通知是通过libnotify发送的,libnotify可以在任何实现了桌面通知规范(Desktop Notifications Specification)的桌面环境中发送通知,包括Cinnamon、Enlightenment、Unity、GNOME、KDE