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 中：

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()
  })
}

并在主入口中引入：

import { setupNotification } from './notification'
setupNotification(win)

🛡️ preload 层：暴露 sendNotification 方法

在 electron/preload/index.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

<template>
  <button @click="sendNotice">发送通知</button>
</template>

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

🧭 Vue Router 中监听跳转事件

在 main.ts 或 App.vue 中：

import router from './router'

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

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

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

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

欢迎点赞、收藏、分享 🙌