Electron 28.2.3通知进入Windows操作中心后点击无响应问题

问题场景 #

使用Windows 10系统，基于Electron 28.2.3开发应用，现有显示系统通知的代码如下：

export const showSystemNotification = (
  notificationData: NotificationCustomOptions,
) => {
  const icon = nativeImage.createFromPath(join(PUBLIC, 'icon.ico'))
  const notification = new Notification({
    ...notificationData,
    icon,
  })

  notification.on('click', async () => {
    console.log('click!')
    if (notificationData.url) await openURL(notificationData.url)
  })

  notification.show()
}

通知刚弹出时点击可触发预期跳转，但进入操作中心后点击无任何反应。

原因分析 #

Windows操作中心的通知属于系统级缓存，当通知被归档到操作中心后，渲染进程中创建的原Notification实例的click事件绑定会失效，此时点击事件会触发Electron主进程的全局notification-click事件，而非实例自身的事件。

解决方法 #

需要在主进程中监听全局的notification-click事件，同时在创建通知时携带自定义数据（如跳转URL），以便主进程处理点击逻辑。

1. 修改渲染进程代码（携带自定义数据） #

export const showSystemNotification = (
  notificationData: NotificationCustomOptions,
) => {
  const icon = nativeImage.createFromPath(join(PUBLIC, 'icon.ico'))
  const notification = new Notification({
    ...notificationData,
    icon,
    // 添加自定义字段存储需要跳转的URL，Electron允许扩展通知选项
    extra: { url: notificationData.url }
  })

  // 保留实例click事件处理即时点击的情况
  notification.on('click', async () => {
    console.log('click!')
    if (notificationData.url) await openURL(notificationData.url)
  })

  notification.show()
}

2. 在主进程中监听全局点击事件 #

在主进程入口文件（如main.js/main.ts）中添加以下代码：

const { app, shell } = require('electron')

app.on('notification-click', (event, notification) => {
  event.preventDefault() // 阻止默认行为
  // 获取自定义携带的URL
  const targetUrl = notification?.extra?.url
  if (targetUrl) {
    shell.openExternal(targetUrl) // 直接使用Electron内置方法打开URL，或替换为你的openURL实现
    console.log('操作中心通知点击，跳转至：', targetUrl)
  }
})

注意事项 #

• 若你原本的openURL是对shell.openExternal的封装，直接替换为内置方法即可，无需额外引入模块。
• 自定义字段名称可自行调整，只要保证主进程和渲染进程的字段名一致即可。

内容的提问来源于stack exchange，提问作者major697