Electron + Vue 实现系统消息通知与点击跳转页面

Electron + Vue 实现系统消息通知与点击跳转页面

在 Electron 应用开发中,系统通知(Notification)是提高用户体验的重要手段。配合 Vue 路由实现"点击通知跳转到指定页面",可以满足如消息提醒、任务完成、系统告警等多种业务场景。

本文将基于 electron-vite-vue 项目,介绍如何:

  • ✅ 从渲染进程触发系统通知
  • ✅ 在主进程监听通知点击事件
  • ✅ 跳转应用内指定页面

📦 项目结构概览

复制代码
electron-vite-vue/
├── electron/
│   ├── main/
│   │   └── notification.ts     ← 通知与点击逻辑
│   ├── preload/
│   │   └── index.ts            ← 暴露 sendNotification API
├── src/
│   ├── App.vue                 ← 触发按钮
│   ├── router/index.ts         ← 监听跳转

🔧 主进程:发送通知并监听点击

electron/main/notification.ts 中:

ts 复制代码
import { Notification, BrowserWindow, ipcMain } from 'electron'

export function setupNotification(win: BrowserWindow) {
  ipcMain.on('notify-with-path', (_, { title, body, path }) => {
    const notification = new Notification({
      title,
      body,
      // @ts-ignore
      data: path,
    })

    notification.on('click', () => {
      if (win.isMinimized()) win.restore()
      win.show()
      win.focus()

      const targetPath = notification.data
      win.webContents.send('navigate-to', targetPath)
    })

    notification.show()
  })
}

并在主入口中引入:

ts 复制代码
import { setupNotification } from './notification'
setupNotification(win)

🛡️ preload 层:暴露 sendNotification 方法

electron/preload/index.ts 中:

ts 复制代码
contextBridge.exposeInMainWorld('electronAPI', {
  sendNotification: (title: string, body: string, path: string) => {
    ipcRenderer.send('notify-with-path', { title, body, path })
  },
  onNavigate: (cb: (path: string) => void) => {
    ipcRenderer.on('navigate-to', (_, path) => cb(path))
  }
})

🧪 渲染进程:发送通知 + 监听跳转

App.vue

vue 复制代码
<template>
  <button @click="sendNotice">发送通知</button>
</template>

<script setup lang="ts">
function sendNotice() {
  window.electronAPI.sendNotification(
    '有新消息',
    '点击查看详情',
    '/notice/detail/42'
  )
}
</script>

🧭 Vue Router 中监听跳转事件

main.tsApp.vue 中:

ts 复制代码
import router from './router'

window.electronAPI.onNavigate((path) => {
  router.push(path)
})

🧠 补充:通知权限处理建议

在首次发送通知前,可判断是否已有权限:

ts 复制代码
if (Notification.permission === 'granted') {
  new Notification('标题', { body: '内容' })
} else if (Notification.permission !== 'denied') {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      new Notification('标题', { body: '内容' })
    }
  })
}

注意:Electron 无法跳转系统设置页面,需要用户手动开启通知权限。


✅ 总结

通过上述封装,我们实现了:

  • ✅ 渲染进程安全调用系统通知
  • ✅ 主进程监听通知点击并发出跳转事件
  • ✅ Vue 路由完成页面跳转

该结构清晰、易扩展,适用于消息提醒、通知中心、工作流等 Electron 应用场景。


如需了解更多 Electron 通信结构封装,建议阅读:

👉 Electron IPC 通信三层封装实践

欢迎点赞、收藏、分享 🙌

相关推荐
吃饭睡觉打豆豆嘛6 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man7 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高0077 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible7 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua7 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12048 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy8 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_19 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子9 小时前
JS实现丝滑文字滚动
前端·javascript·面试
写不出来就跑路9 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html