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 通信三层封装实践

欢迎点赞、收藏、分享 🙌

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的7 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀7 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
前端工作日常8 小时前
平台价值与用户规模的共生关系
electron·测试·puppeteer