跳到主要内容

通知

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

如果要在主进程中使用渲染器进程 API,反之亦然,请考虑使用进程间通信

用法

下面是两个示例,展示了如何为每种进程类型显示通知。

在主进程中显示通知

主进程通知使用 Electron 的 Notification 模块显示。 使用此模块创建的通知对象除非调用其 show() 实例方法,否则不会出现。

主进程
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 通知 API 显示。

渲染器进程
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.setAppUserModelId()

开发中的通知

为了在开发过程中快速启动通知,将 node_modules\electron\dist\electron.exe 添加到您的开始菜单也可以实现。 在资源管理器中导航到该文件,右键单击并选择“固定到开始菜单”。 然后,在主进程中调用 app.setAppUserModelId(process.execPath) 以查看通知。

使用高级通知

Windows 也允许使用自定义模板、图像和其他灵活元素的高级通知。

要从主进程发送这些通知,您可以使用用户land模块 electron-windows-notifications,它使用原生 Node 插件发送 ToastNotificationTileNotification 对象。

虽然包含按钮的通知可以使用 electron-windows-notifications,但处理回复需要使用 electron-windows-interactive-notifications,它有助于注册所需的 COM 组件并使用输入的用户数据调用您的 Electron 应用程序。

查询通知状态

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

此模块允许您提前确定 Windows 是否会悄悄丢弃通知。

macOS

macOS 上的通知很简单,但您应该注意 Apple 关于通知的人机界面指南

请注意,通知的大小限制为 256 字节,如果超出该限制,将被截断。

查询通知状态

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

此模块允许您提前检测通知是否会显示。

Linux

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