通知（Notifications） | Electron 跳转到主内容 Electron 文档 应用开发接口（API） 博客 工具 * Electron Forge * Electron Fiddle 社区 * 治理 * 案例展示 * 资源 版本发布 中文 * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 搜索 * 开始上手 * Electron 中的流程 * 最佳实践 * 示例 * Dark Mode * 设备访问 * 应用程序内购 * * 键盘快捷键 * 深度链接 (Deep Links) * 桌面启动器快捷操作 * * Menus * 多线程 * 原生文件拖 & 放 * 导航历史 * 通知（Notifications） * 离屏渲染 * 在线/离线事件探测 * 进度条 * 最近的文件 * * * 在 BrowserWindow 中展示文件 * * 拼写检查器 * Web 嵌入 * 任务栏自定义 * * 自定义窗口 * 开发 * Native Node Modules * 分发 * 检测和调试 * 引用 * 参与贡献 * * 示例 * 通知（Notifications） 在本页面 通知（Notifications） 每个操作系统都有自己的机制向用户显示通知。 Electron的通知 API 是跨平台的，但对每个 进程 类型来说是不同的。 如果您想要在主进程中使用渲染进程 API，或者要在渲染进程中使用主进程 API，请考虑使用 进程间通信 。 用法 ​ 下面是两个关于如何显示每个 进程 类型的通知的示例。 在主进程中显示通知 ​ 主进程通知使用 Electron 的 通知模块 显示。 使用此模块创建的通知对象不会立刻显示，除非调用他们的 show() 实例 方法。 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 打开的完整示例： docs/fiddles/features/notifications/main ( 43.4.0 ) Open in Fiddle * main.js * index.html 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 ( ) } } ) <! DOCTYPE html > < html > < head > < meta charset = " UTF-8 " > < title > Hello World! </ title > < meta http-equiv = " Content-Security-Policy " content = " script-src 'self' 'unsafe-inline'; " /> </ head > < body > < h1 > Hello World! </ h1 > < p > After launching this application, you should see the system notification. </ p > </ body > </ html > 在渲染进程中显示通知 ​ 通知可以直接在渲染进程中使用 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 打开的完整示例： docs/fiddles/features/notifications/renderer ( 43.4.0 ) Open in Fiddle * main.js * index.html * renderer.js const { app , BrowserWindow } = require ( 'electron/main' ) 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 ( ) } } ) <! DOCTYPE html > < html > < head > < meta charset = " UTF-8 " > < title > Hello World! </ title > < meta http-equiv = " Content-Security-Policy " content = " script-src 'self' 'unsafe-inline'; " /> </ head > < body > < h1 > Hello World! </ h1 > < p > After launching this application, you should see the system notification. </ p > < p id = " output " > Click it to see the effect in this interface. </ p > < script src = " renderer.js " > </ script > </ body > </ html > 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.setAppUserModelld() 。 开发环境中显示通知 为了快速实现开发模式下显示通知，因为将 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 ​ 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个字节，如果超过该限制，则会被截断。 查询通知状态 ​ 要检测是否允许发送通知，可以使用用户空间的 macos-notification-state 模块。 该模块允许你事先确定通知是否会被显示。 Linux ​ 在 Linux 上，通知是使用 libnotify 发送的，它可以在遵循 桌面通知规范 的任何桌面环境上显示通知，包括 Cinnamon、Enlightenment、Unity、GNOME 和 KDE。 编辑此页面 上一个 导航历史 下一个 离屏渲染 * 用法 * 在主进程中显示通知 * 在渲染进程中显示通知 * 不同平台注意事项 * Windows * 使用高级通知 * 查询通知状态 * macOS * 查询通知状态 * Linux 文档 * 入门指南 * API 参考 清单 * 性能 * 安全 工具 * Electron Forge * Electron Fiddle 社区 * 治理 * 资源 * Discord * Bluesky * X * Mastodon * Stack Overflow 更多 * GitHub * Open Collective * 基础看板 版权所有 OpenJS Foundation 及 Electron 贡献者。保留所有权利。 OpenJS Foundation 已注册商标并使用商标。如需查看 OpenJS Foundation 的商标列表，请参阅我们的 商标政策 和 商标列表 。未在 OpenJS Foundation 商标列表 中标明的商标和标志，均为其各自持有者的商标™或注册商标®。使用它们并不意味着与它们有任何关联或得到它们的认可。 OpenJS Foundation | 使用条款 | 隐私政策 | 章程 | 行为准则 | 商标政策 | 商标列表 | Cookie 政策 Hosting and infrastructure graciously provided by