使用 Electron 调用基本或附带图像的通知

最新推荐文章于 2024-09-10 07:51:31 发布

转载最新推荐文章于 2024-09-10 07:51:31 发布 · 890 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011502038

文章标签：

#操作系统

本文介绍如何在Electron应用中使用notification模块实现基本及带有图像的桌面通知,包括渲染器进程中的具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 Electron 调用基本或附带图像的通知

此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下载后运行查看. 欢迎 Star .

使用 Electron 中的 notification 模块可以允许你增加基本的桌面通知.

Electron 允许开发者使用 HTML5 Notification API 发送通知, 并使用当前操作系统的原生通知 API 来显示.

注意: 由于这是一个 HTML5 API, 它只能在渲染器进程中使用.

在浏览器中查看完整 API 文档 .

基本通知

支持: Win 7+, macOS, Linux (支持 libnotify) | 进程: 渲染器

此示例演示了一个基本的通知. 只含有文字.

渲染器进程

const notification = {
  title: '基本通知',
  body: '短消息部分'
}
const notificationButton = document.getElementById('basic-noti')

notificationButton.addEventListener('click', function () {
  const myNotification = new window.Notification(notification.title, notification)

  myNotification.onclick = () => {
    console.log('Notification clicked')
  }
})

附带图像的通知

支持: Win 7+, macOS, Linux (支持 libnotify) | 进程: 渲染器

此示例演示了一个基本的通知. 同时含有文字和图像.

渲染器进程

const path = require('path')

const notification = {
  title: '附带图像的通知',
  body: '短消息附带自定义图片',
  icon: path.join(__dirname, '../../../assets/img/programming.png')
}
const notificationButton = document.getElementById('advanced-noti')

notificationButton.addEventListener('click', function () {
  const myNotification = new window.Notification(notification.title, notification)

  myNotification.onclick = () => {
    console.log('Notification clicked')
  }
})

如果这边文章对您有帮助, 感谢下方点赞或 Star GitHub: electron-api-demos-Zh_CN 支持, 谢谢.