参考资料

Notification API 文档 👉🏻 https://www.electronjs.org/docs/latest/api/notification

Notification API 简介

在 Electron 中，Notification 是一个用于向用户发送桌面通知的 API。它可以在应用程序需要向用户提供实时信息、提醒或者更新时使用。Notification API 的工作方式与浏览器中的 Notification API 类似，但是 Electron 的 Notification API 可以提供更丰富的功能以及操作系统级别的定制化。通过使用该 API，开发者可以为他们的应用程序生成本地通知，这些通知可以包含图像、文本和操作按钮等内容，可以通过操作按钮来执行应用程序的自定义操作。

demo | 显示、关闭 notification

源码：

2. notification.zip

  1. const {
  2.   Notification, // 从 electron 模块中导入 Notification 模块
  3.   app
  4. } = require('electron');
  6. app.whenReady().then(() => {
  7.   // 新建一个通知实例
  8.   const notification = new Notification({
  9.     title: '通知的标题',
  10.     body: '通知的正文内容',
  11.     icon: './avatar.jpeg' // 通知的图标
  12.   });
  14.   // 5 秒后显示通知
  15.   setTimeout(() => {
  16.     console.log('show notification')
  17.     notification.show()
  19.     // 5 秒后隐藏通知
  20.     setTimeout(() => {
  21.       console.log('close notification')
  22.       notification.close()
  23.     }, 5000)
  24.   }, 5000)
  25. });

这段代码导入了 Electron 中的 Notification 模块和 app 模块，使用了 app.whenReady 方法来等待应用程序准备就绪，以便正确创建通知。

在 whenReady 方法的回调函数中，创建了一个 Notification 实例并传入标题、正文内容和图标的配置。在 5 秒后，调用 notification.show() 方法来显示通知，并在 5 秒后调用 notification.close() 方法来关闭通知。其中，setTimeout 方法用于延迟操作的实现。

常见配置

Electron 的 Notification API 提供了许多配置选项，以便定制通知的外观和行为。以下是一些常用的配置选项：

  1. title（字符串）：通知的标题。这是创建通知时必需的参数。
  2. subtitle（字符串，仅适用于 macOS）：通知的副标题。
  3. body（字符串）：通知的正文内容。这通常是需要传达给用户的主要信息。
  4. icon（字符串或 NativeImage）：通知的图标。可以是图像文件的路径或 NativeImage 对象。
  5. silent（布尔值）：设置为 true 以禁用通知发出的声音。
  6. urgency（字符串，仅适用于 Linux）：设置通知的优先级。可选值有 ‘low’, ‘normal’, ‘critical’。
  7. actions（对象数组，仅适用于 macOS）：为通知添加一组按钮。每个按钮需要一个标签和一个唯一标识符。
  8. closeButtonText（字符串，仅适用于 macOS）：自定义通知的关闭按钮文本。
  9. timeoutType（字符串，仅适用于 Windows）：设置通知的超时类型。可选值有 ‘default’（根据系统设置自动隐藏）或 ‘never’（永不超时）。 
  1. const {
  2.   Notification,
  3.   app,
  4.   BrowserWindow
  5. } = require('electron')
  7. let win
  9. function showNotification() {
  10.   const notification = new Notification({
  11.     title: 'title area……',
  12.     subtitle: 'subtitle area……',
  13.     body: 'body area……',
  14.     icon: './avatar.jpeg',
  15.     silent: true,
  16.     urgency: 'critical',
  17.     actions: [{
  18.         type: 'button',
  19.         text: 'actions[0] text...',
  20.         id: 'view-action'
  21.       },
  22.       {
  23.         type: 'button',
  24.         text: 'actions[1] text...',
  25.         id: 'ignore-action'
  26.       }
  27.     ],
  28.     closeButtonText: 'closeButtonText',
  29.   });
  31.   notification.show();
  32. }
  34. app.whenReady().then(() => {
  36.   win = new BrowserWindow({
  37.     webPreferences: {
  38.       nodeIntegration: true,
  39.       contextIsolation: false
  40.     }
  41.   })
  43.   win.loadFile('./index.html')
  45.   showNotification();
  46. })
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Helo World</title>
  9.   </head>
  11.   <body>
  12.     <h1>Helo World</h1>
  13.   </body>
  15. </html>

image.png
image.png

注意，不是所有的配置选项都适用于所有平台。在跨平台开发时，请确保测试每个平台的通知行为。

常见事件

Electron 的 Notification 对象提供了一些事件，以便在通知的生命周期中进行响应。以下是一些常用的 Notification 事件：

  1. show：当通知显示时触发。
  2. click：当用户点击通知时触发。
  3. close：当通知关闭时触发。
  4. action：当用户点击通知上的操作按钮时触发。这个事件在 macOS 中是可用的。
  5. reply：当用户在通知上进行回复时触发。这个事件在 macOS 和 Windows 上是可用的。
  1. function showNotification() {
  2.   const notification = new Notification({
  3.     title: 'title area……',
  4.     subtitle: 'subtitle area……',
  5.     body: 'body area……',
  6.     icon: './avatar.jpeg',
  7.     silent: true,
  8.     urgency: 'critical',
  9.     actions: [
  10.       {
  11.         type: 'button',
  12.         text: 'actions[0] text...',
  13.         id: 'view-action'
  14.       },
  15.       {
  16.         type: 'button',
  17.         text: 'actions[1] text...',
  18.         id: 'ignore-action'
  19.       }
  20.     ],
  21.     closeButtonText: 'closeButtonText',
  22.   });
  24.   // 添加事件监听器
  25.   notification.on('show', () => {
  26.     console.log('Notification shown');
  27.   });
  29.   notification.on('click', () => {
  30.     console.log('Notification clicked');
  31.   });
  33.   notification.on('close', () => {
  34.     console.log('Notification closed');
  35.   });
  37.   notification.on('action', (event, index) => {
  38.     console.log(`Notification action clicked: index ${index}`);
  39.   });
  41.   notification.on('reply', (event, reply) => {
  42.     console.log(`User replied: ${reply}`);
  43.   });
  45.   notification.show();
  46. }
  48. app.whenReady().then(() => {
  49.   win = new BrowserWindow({
  50.     webPreferences: {
  51.       nodeIntegration: true,
  52.       contextIsolation: false
  53.     }
  54.   });
  56.   win.loadFile('./index.html');
  58.   showNotification();
  59. });

上述代码添加了 show, click, close, action, 和 reply 事件的监听器，并在事件触发时在控制台输出相应的日志。请注意，action 和 reply 事件仅在特定平台上可用。

我们可以根据自己的需求修改事件处理函数，例如在点击通知时执行某个操作或在用户回复时执行其他操作