通知¶
每个操作系统都有自己向用户显示通知的机制。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 打开:
```fiddle docs/fiddles/features/notifications/main 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() } })
### 在渲染进程中显示通知 {#show-notifications-in-the-renderer-process}
可以使用 [Web Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API) 直接从渲染进程显示通知。
```js title='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 打开:
```fiddle docs/fiddles/features/notifications/renderer|focus=renderer.js 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()。
:::info 开发环境中的通知
为了在开发过程中快速引导通知,将
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 应用。
查询通知状态¶
要检测是否允许发送通知,请使用用户态模块
windows-notification-state。
此模块允许你提前确定 Windows 是否会静默丢弃通知。
macOS¶
对于 macOS 上的通知,你的应用程序需要进行代码签名,通知事件才能正确发出。此要求源于 Apple 提供的底层
UNNotification API。未签名的二进制文件在调用通知 API 时会发出 failed 事件。
此外,你应该了解 Apple 关于通知的人机界面指南。
请注意,通知大小限制为 256 字节,如果超过该限制,将被截断。
查询通知状态¶
要检测是否允许发送通知,请使用用户态模块
macos-notification-state。
此模块允许你提前检测通知是否会被显示。
Linux¶
通知使用 libnotify 发送,它可以在任何遵循 桌面通知规范 的桌面环境中显示通知,
包括 Cinnamon、Enlightenment、Unity、GNOME 和 KDE。
本页原文 Markdown:在 AtomGit 查看·内容源自开源项目 el/electron