通知(Notifications)
Each operating system has its own mechanism to display notifications to users. Electron's notification APIs are cross-platform, but are different for each process type.
If you want to use a renderer process API in the main process or vice-versa, consider using inter-process communication.
用法
Below are two examples showing how to display notifications for each process type.
Show notifications in the main process
Main process notifications are displayed using Electron's Notification module. Notification objects created using this module do not appear unless their show()
instance method is called.
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();
Here's a full example that you can open with Electron Fiddle:
- main.js
- index.html
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()
}
})
<!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>
Show notifications in the renderer process
Notifications can be displayed directly from the renderer process with the 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);
Here's a full example that you can open with Electron Fiddle:
- main.js
- index.html
- renderer.js
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()
}
})
<!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 Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
.onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE
Platform considerations
虽然操作系统的代码和用户体验相似,但依然存在微妙的差异。
Windows
For notifications on Windows, your Electron app needs to have a Start Menu shortcut with an AppUserModelID and a corresponding ToastActivatorCLSID.
Electron attempts to automate the work around the AppUserModelID and ToastActivatorCLSID. When Electron is used together with Squirrel.Windows (e.g. if you're using electron-winstaller), shortcuts will automatically be set correctly.
In production, Electron will also detect that Squirrel was used and will automatically call app.setAppUserModelId()
with the correct value. 在开发的过程中, 你可能需要自己调用app.setAppUserModelld()
To quickly bootstrap notifications during development, adding node_modules\electron\dist\electron.exe
to your Start Menu also does the trick. 导航到资源管理器中的文件,右键单击并选择 “固定到开始菜单”。 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.