跳转到主内容

通知(Notifications)

每个操作系统都有自己的机制向用户显示通知。 Electron的通知 API 是跨平台的,但对每个进程类型来说是不同的。

如果您想要在主进程中使用渲染进程 API,或者要在渲染进程中使用主进程 API,请考虑使用进程间通信。

用法

下面是两个关于如何显示每个进程类型的通知的示例。

在主进程中显示通知

主进程通知使用Electron的通知模块显示。使用此模块创建的通知对象不会立刻显示,除非调用他们的 show() 实例方法。

Main Process

const{Notification}=require('electron')

constNOTIFICATION_TITLE='Basic Notification'
constNOTIFICATION_BODY='Notification from the Main process'

newNotification({
title:NOTIFICATION_TITLE,
body:NOTIFICATION_BODY
}).show()

下面是您可以使用 Electron Fiddle 打开的完整示例:

docs/fiddles/features/notifications/main (39.0.0) UTF-8">
<title>Hello World!</title>
<metahttp-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

constNOTIFICATION_TITLE='Title'
constNOTIFICATION_BODY=
'Notification from the Renderer process. Click to log to console.'
constCLICK_MESSAGE='Notification clicked'

newNotification(NOTIFICATION_TITLE,{body:NOTIFICATION_BODY}).onclick=
()=>console.log(CLICK_MESSAGE)

下面是您可以使用 Electron Fiddle 打开的完整示例:

docs/fiddles/features/notifications/renderer (39.0.0) UTF-8">
<title>Hello World!</title>
<metahttp-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>
<pid="output">Click it to see the effect in this interface.</p>

<scriptsrc="renderer.js"></script>
</body>
</html>

constNOTIFICATION_TITLE='Title'
constNOTIFICATION_BODY='Notification from the Renderer process. Click to log to console.'
constCLICK_MESSAGE='Notification clicked!'

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

在macOS上发送通知很简单,你应该参考苹果关于通知的人机界面指南。

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

查询通知状态

要检测是否允许发送通知,可以使用用户空间的macos-notification-state模块。

该模块允许你事先确定通知是否会被显示。

Linux

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

用法
- 在主进程中显示通知
- 在渲染进程中显示通知
不同平台注意事项