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

欢迎点赞、收藏、分享 🙌

相关推荐
布兰妮甜8 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia8 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
StrongerIrene18 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子27 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168835 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
qq_589568102 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~2 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript