通知(Notifications)
每个操作系统都有自己的机制向用户显示通知。 Electron的通知 API 是跨平台的,但对每个 进程 类型来说是不同的。
如果您想要在主进程中使用渲染器进程 API,或者要在渲染器进程中使用主进程 API,请考虑使用 进程间通信
用法
下面是两个关于如何显示每个 进程 类型的通知的示例。
在主进程中显示通知
主进程通知使用Electron的 通知模块 显示。 使用此模块创建的通知对象不会立刻显示,除非调用他们的 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 打开的完整示例:
- 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 显示。
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 打开的完整示例:
- 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 应用程序和输入的用户数据。