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

欢迎点赞、收藏、分享 🙌

相关推荐
C++chaofan1 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family3 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
我是日安41 分钟前
从零到一打造 Vue3 响应式系统 Day 18 - Reactive:深入 Proxy 的设计思路
前端·vue.js
_AaronWong1 小时前
多页面应用登录状态共享:基于弹出窗口的通用解决方案
前端·javascript·vue.js
六月的可乐1 小时前
Vue接入AI聊天助手实战
前端·vue.js·人工智能
陈卿然1 小时前
一文通关JavaScript:从基本语法到TypeScript
javascript
小菜全1 小时前
《WebAssembly:前端开发的新可能》
前端·javascript
南风木兮丶2 小时前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
mldong2 小时前
保姆级教程!手把手教你搭建FastAPI + Vue3前后端分离项目
vue.js·python·全栈
Mintopia2 小时前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium