# 原生应用通知
对于渲染进程,Electron 方便地允许开发者使用 HTML5 通知 API (opens new window) 发送通知,然后使用当前运行中的系统的原生通知 API 来进行显示。
要在主进程中显示通知,您需要使用 Notification (opens new window) 模块。
# 弹出通知
# 渲染进程中
官方示例渲染进程中设置通知,修改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 Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
.onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE
# 主进程中
给扫码登录的用户加入扫码登录成功的通知:
修改文件pacakges/main/src/index.ts
:
const instance = new Notification({
title: '登录成功',
body: '登录时间' + dayjs('2021-10-01').format('YYYY-MM-DD hh:mm:ss'),
silent: true // 设置系统通知声音为静音
})
详细代码见第三方登录扫码登录
官方文档:https://www.electronjs.org/zh/docs/latest/tutorial/notifications (opens new window)
# 通知声音
如何定制消息通知的声音?
思路:通过Notification的options设置表单,同时通过 show()
方法回调的时候进行声音的播放。
new Notification([options])
其中的options选项:
title
String (可选) - 通知的标题,将在通知窗口的顶部显示。subtitle
String (可选) 通知的副标题, 显示在标题下面。 macOSbody
String (可选) - 通知的正文文本,将显示在标题或副标题下面。silent
Boolean (可选) 在显示通知时是否发出系统提示音。icon
(String | NativeImage (opens new window)) (可选) 用于在该通知上显示的图标。hasReply
Boolean (可选) 是否在通知中添加一个答复选项。 macOStimeoutType
String (可选) Linux Windows - 通知的超时持续时间 可以是 'default' 或 'never'.replyPlaceholder
String (可选) 答复输入框中的占位符。 macOSsound
String (可选) 显示通知时播放的声音文件的名称。 macOSurgency
String (可选) Linux - 通知的紧急级别。 可以是 'normal', 'critical', 或者 'low'actions
[NotificationAction] (opens new window) (可选) macOS - 要添加到通知中的操作 请阅读NotificationAction
文档来了解可用的操作和限制。closeButtonText
String (可选) macOS - 自定义关闭按钮提示内容。 空字符串将替换为默认的本地化文本。toastXml
String (可选) Windows - 自定义的窗口通知描述可取代上面所有属性。 提供完全自定义的设计和通知行为。
在Electron播放声音需要借助到第三方插件sound-play
:
npm install sound-play
or
yarn add sound-play
使用:
const sound = require("sound-play");
sound.play("file.mp3");
// 设置声音大小
volume = 0.1;
sound.play("file.mp3", volume);
// 在使用的时候,需要注意音频文件的路径
instance.on('show', () => {
sound.play(join(__dirname, './test.wav'))
})