跳转到主内容

通知(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 打开的完整示例:

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()
}
})

在渲染进程中显示通知

通知可以直接在渲染进程中使用 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 打开的完整示例:

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插件发送ToastNotificationTileNotification 对象。

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

查询通知状态

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

该模块允许你事先确定 Windows 是否会静默丢弃通知。

macOS

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

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

查询通知状态

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

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

Linux

Notifications are sent using libnotify, which can show notifications on any desktop environment that follows Desktop Notifications Specification, including Cinnamon, Enlightenment, Unity, GNOME, and KDE.