Electron 系统通知 Notification 实践指南

这篇具有很好参考价值的文章主要介绍了Electron 系统通知 Notification 实践指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

系统通知是桌面应用的常见功能,用于给用户发送提醒(刷下存在感 🙂),还能帮定点击事件以便后续的操作。

Electron 自带通知模块,下方代码是一个简单的示例

const { Notification } = require('electron')

const notice = (title, body)=> new Promise((ok,fail)=>{
    if(!Notification.isSupported()) fail("当前系统不支持通知")

    let ps = typeof(title) == 'object'? title : {title, body}
    let n = new Notification(ps)
    n.on('click', ok)
    n.show()
})

notice(`通知演示程序`, `程序启动完成,本次初始化耗时 ${Math.ceil(Math.random()*1000)} ms`)

我们看看运行效果(OS 为 windows 11 家庭中文版)
Electron 系统通知 Notification 实践指南,前端,electron,javascript,前端
这看起来还不错,不过在 windows 10 下会遭遇滑铁卢😂,通知无法正常显示。这是由于 OS 安全机制导致,兼容方案请看这里:关于electron的notification在win10下不显示问题

我个人觉得上述操作下来较麻烦,于是找到了node-notifier,代码改造

const { release } = require("os")

const notice = (title, body)=> new Promise((ok, fail)=>{
    notify(
        { 
        	appID: release().indexOf("10.0.1")==0? "": "演示程序", 
        	title, 
        	message: body, 
        	sound: true, 
        	wait: true, 
        	time: 30*1000 
        },
        (err, response, metadata)=>ok()
    )
})

效果如下
Electron 系统通知 Notification 实践指南,前端,electron,javascript,前端
另外,打包(此处用的是 electron-builder) node-notifier 时需添加以下配置:文章来源地址https://www.toymoban.com/news/detail-609229.html

{
	"build":{
	 	"asarUnpack": ["./node_modules/node-notifier/**/*"]
    }
}

到了这里,关于Electron 系统通知 Notification 实践指南的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite + electron 构建前端桌面应用程序

    npm yarn 选择是否继续 项目名称 选择框架 选择项目语言 项目构建成功,根据提示进入项目目录,安装依赖 electron 官网:https://www.electronjs.org/zh/docs/latest/ vite-plugin-electron :https://github.com/electron-vite/vite-plugin-electron 安装依赖(electron 安装比较慢,耐心等待即可) 编写 Electron 入

    2024年02月06日
    浏览(41)
  • 纯前端ELECTRON+VUE+FFMPEG实现多路播放RTSP流

    近期有项目需求前端播放rtsp视频流,项目是由electron+vue3搭建,没有后端,因此需要在前端实现解析rtsp流及播放,经过多方考察最后选用了ffmpeg+jsmpeg方案实现,具体实现是参考了@牧也の旅行 大佬的这篇文章 原文地址 实现的,感谢@牧也の旅行 一直在回复我的各种小白问题,

    2024年02月04日
    浏览(25)
  • 银河麒麟v10安装前端环境(Node、vue、Electron+vite)

    此帖子所提到的所有依赖包都是基于银河麒麟v10真机的arm架构包,如果是在windows上的虚拟机上 把依赖包换成x64的包即可,方法步骤都是一样 一.node安装 原始方法安装(建议用第二种nvm方法,因为更简单): 1.1nodejs官网下载基于arm架构的包 1.1.1或者打开终端使用wget方式安装

    2024年02月02日
    浏览(34)
  • web前端项目使用electron打包成跨平台桌面端程序(Windows)

    Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 在使用Electron进行开发之前,您需要安装 Node.js。 我们建

    2024年02月16日
    浏览(69)
  • Electron 系统托盘图标

    一、在入口文件electron.js中引入 Tray , Menu , nativeImage 二、在初始化完成后添加图片

    2024年02月12日
    浏览(26)
  • Electron-React18-MacOS桌面管理系统|electron27+react仿mac桌面

    基于 React18+Electron27+ArcoDesign 仿macOS桌面端系统框架 ElectronMacOS 。 electron-react-macOs 基于 electron27.x+vite4+react18+arcoDesign+zustand 等技术构建桌面版仿MacOs框架系统解决方案。支持 中英文/繁体、dark+light主题、桌面多层级路由、多窗口路由页面、动态换肤、Dock悬浮菜单 等功能。 Elec

    2024年02月05日
    浏览(26)
  • Electron-Builder Windows系统代码签名

    项目打包签名是两年前做的了,使用Electron-Bulder,打包工具版本迭代较少,倒是electron版本更新飞快,目前官方推荐使用Electron Forge进行打包,后续再对两者进行对比,重新整理现在的实现方案。 在Windows系统中,如果程序没有代码签名证书,或者代码签名授信级别较低时,系

    2024年02月06日
    浏览(23)
  • Electron 适配 Windows 7 32位操作系统

    1)electron v10.4.7 2)npm 13.14.0 Index of /download/release/v13.14.0/ 1)系统需升级为最低SP1版本的OS; 2)必须安装的.NET Framework 最低版本为4.6(本例中安装的是v4.6.2); 3)以防报错,最好安装微软常用运行库合集; 1)下载SP1升级包,并安装; 2)等待安装完成,重启计算机; 3)安装微

    2024年02月05日
    浏览(65)
  • 在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式

    在线办公协同办公过程中,对于老板给出的文档修改,如果在错别字方面都要自己一个个字去看的话也太浪费时间了,其实word上就有一个修订模式,可以帮助大家高效完成文档的修改,在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式? 第一步:下

    2024年01月21日
    浏览(40)
  • Android - app内部通知通知栏通知Notification (Kotlin)

    一、简述 先把通知权限打开 为什么写,因为在学kotlin刚好顺手写一下,整块代码在最后 图示效果:(图片来源于网络) 1、首先需要一个NotificationManager对通知进行管理,可以通过调用Context的 getSystemService()方法获取。getSystemService()方法接收一个字符串参数用于确定 获取系统的

    2024年02月08日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包