星如雨

Appearance

Notification 发送通知 ​

electronvuevitenotification
  • 前提请先了解主进程与渲染进程通信

主进程中定义接受通知的函数 ​

通过监听渲染进程发送到的通知消息展示需要通知的信息

ts
ipcMain.handle('notification', (_event, title, body) => {
  new Notification({
    title,
    body,
  }).show()
})
ipcMain.handle('notification', (_event, title, body) => {
  new Notification({
    title,
    body,
  }).show()
})

Windows 10默认通知时间为 5s

渲染进程定义发送函数，并暴露给页面文件使用 ​

ts
// 定义发送给主进程的函数
export const sendNotification = (title: string, body: string) => ipcRenderer.invoke('notification', title, body)
// 使用`contextBridge.exposeInMainWorld` 暴露 sendNotification 函数
// 定义发送给主进程的函数
export const sendNotification = (title: string, body: string) => ipcRenderer.invoke('notification', title, body)
// 使用`contextBridge.exposeInMainWorld` 暴露 sendNotification 函数

页面中使用 ​

ts
// UtilsTools 渲染进程中暴露的实例名称（自定义），包括暴露的 sendNotification 方法
window.UtilsTools.sendNotification('title', `${count.value}`)
// UtilsTools 渲染进程中暴露的实例名称（自定义），包括暴露的 sendNotification 方法
window.UtilsTools.sendNotification('title', `${count.value}`)