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

使用 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 支持, 谢谢.