# 原生应用通知

对于渲染进程，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 (可选) - 通知的标题，将在通知窗口的顶部显示。

subtitleString (可选) 通知的副标题, 显示在标题下面。 macOS

body String (可选) - 通知的正文文本，将显示在标题或副标题下面。

silentBoolean (可选) 在显示通知时是否发出系统提示音。

icon(String | NativeImage (opens new window)) (可选) 用于在该通知上显示的图标。

hasReplyBoolean (可选) 是否在通知中添加一个答复选项。 macOS

timeoutType String (可选) Linux Windows - 通知的超时持续时间可以是 'default' 或 'never'.

replyPlaceholderString (可选) 答复输入框中的占位符。 macOS

soundString (可选) 显示通知时播放的声音文件的名称。 macOS

urgency 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'))
})

← 第三方登录（扫码登录） Electron打包 →