跳转到主内容

通知(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')

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 { app, BrowserWindow } = require('electron')

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

不同平台注意事项

虽然操作系统的代码和用户体验相似,但依然存在微妙的差异。

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 添加到您的开始菜单也可以解决问题。 导航到资源管理器中的文件,右键单击并选择 “固定到开始菜单”。 Then, call app.setAppUserModelId(process.execPath) in the main process to see notifications.

Use advanced notifications

Windows also allow for advanced notifications with custom templates, images, and other flexible elements.

To send those notifications from the main process, you can use the userland module electron-windows-notifications, which uses native Node addons to send ToastNotification and TileNotification objects.

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

Query notification state

To detect whether or not you're allowed to send a notification, use the userland module windows-notification-state.

This module allows you to determine ahead of time whether or not Windows will silently throw the notification away.

macOS

Notifications are straightforward on macOS, but you should be aware of Apple's Human Interface guidelines regarding notifications.

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

Query notification state

To detect whether or not you're allowed to send a notification, use the userland module macos-notification-state.

This module allows you to detect ahead of time whether or not the notification will be displayed.

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.