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

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

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

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

注意: 由于这是一个 HTML5 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 支持, 谢谢.