用Electron创建跨平台应用(第三弹)开启系统通知

简介: 对于QQ这类实时通讯软件, 设置系统通知是非常常见的功能, 对于办公用的电子邮件服务, 收到新邮件进行通知也是非常必要的Electron适用于创建跨平台应用, 对于系统通知这类常见需求, 也提供了非常好用的api用户收到系统通知后, 往往会通过...
  • 对于QQ这类实时通讯软件, 设置系统通知是非常常见的功能, 对于办公用的电子邮件服务, 收到新邮件进行通知也是非常必要的
  • Electron适用于创建跨平台应用, 对于系统通知这类常见需求, 也提供了非常好用的api
  • 用户收到系统通知后, 往往会通过点击系统通知, 打开与通知相对应的界面, 这个功能往往也是必须的

需求: 我们需要创建一个动漫更新的系统通知, 当用户点击系统的通知, 就会打开相应的界面播放动漫, 这是一个Electron功能演示的文章, 所以并不涉及如何通过网络监听各大平台的动漫更新情况(当然实现的思路也是有的, 用一个爬虫程序, 定时去爬各个平台的动漫的标题目录的变化, 如果有更新, 则通过回调函数, 发出系统通知)

效果展示

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Electron发送系统通知</title>
</head>
<body>
    <style>
        button {
            color: #ffffff;
            background-color: #44A1F8;
            font-size: 20px;
            outline: none;
        }

    </style>
    <button id="btn1">点击我,可以触发系统通知</button>
    <script>
        const path = require('path');
        const {shell} = require('electron')

        document.getElementById("btn1").onclick = function(){

            let option = {
                title: "你订阅的《海贼王》更新了",
                body: "《海贼王》已更新至第852集 激斗开幕 路飞VS卡塔库栗",
                icon: "../static/hhw.ico",
                href: 'https://www.iqiyi.com/v_19rqz6uit0.html'
            };

            // 创建通知并保存
            let hhwNotication = new window.Notification(option.title, option);

            // 当通知被点击时, 用默认浏览器打开链接
            hhwNotication.onclick= function(){
                shell.openExternal(option.href)
            }
        }


    </script>
</body>
</html>

系统通知的图标最好是ico格式图片, 但简书不支持上传ico格式的图片, 我们可以通过http://www.bitbug.net/ 制作, 简单快捷, 下面我在源码中使用的图片资源../static/hhw.ico, 感兴趣的可以用http://www.bitbug.net/ 自己制作成ico格式的图片(自己动手, 丰衣足食)

小结:

Electron对系统通知这种常见功能封装的很好, 善用系统通知功能, 能让我们的程序更好用

用Electron创建跨平台应用是一个连载, 如果阅读本篇有困难,可以补一下前两弹的内容
用Electron创建跨平台应用(第一弹)
用Electron创建跨平台应用(第二弹)开启多窗口

目录
相关文章
|
3月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
149 3
|
28天前
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
31 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
6月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
98 2
|
2月前
|
安全 前端开发 iOS开发
揭秘 electron-builder:macOS 应用打包背后到底发生了什么?
本文详细介绍了 Electron 应用在 macOS 平台上的打包流程,涵盖配置文件、打包步骤、签名及 notarization 等关键环节。通过剖析 `electron-builder` 的源码,展示了如何处理多架构应用、执行签名,并解决常见问题。适合希望深入了解 macOS 打包细节的开发者。
72 2
|
2月前
|
监控 前端开发 安全
谈谈我做 Electron 应用的这一两年
本文首发于微信公众号“前端徐徐”,作者徐徐分享了过去一两年间开发Electron桌面应用的经验与心得。文章详细介绍了从项目启动、技术选型到具体实施的过程,并探讨了桌面端开发面临的挑战及解决方案,如软件更新、任务队列设计、性能优化等。此外,还列举了一些特殊需求的实现方法,如静默安装、进程禁用等。作者认为,尽管桌面端开发有其独特性,但通过不断探索与实践,仍能显著提升用户体验和技术水平。
158 0
谈谈我做 Electron 应用的这一两年
|
2月前
|
开发框架 JavaScript 前端开发
Electron技术深度解析:构建跨平台桌面应用的利器
【10月更文挑战第13天】Electron技术深度解析:构建跨平台桌面应用的利器
200 0
|
2月前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
161 0
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
175 0
|
4月前
|
前端开发 JavaScript API
强强联手打造桌面应用新标杆:Angular与Electron的完美融合——从环境搭建到通信机制,全面解析构建跨平台应用的最佳实践与技巧
【8月更文挑战第31天】随着Web技术的进步,开发者们越来越多地采用Web技术来构建桌面应用程序。通过结合使用开源框架Electron及前沿的前端框架Angular,开发者能充分利用JavaScript、HTML和CSS打造出高性能且易维护的跨平台桌面应用。本文将详细介绍如何搭建基于Angular与Electron的开发环境,包括创建Angular项目、安装Electron及相关依赖、配置Electron主进程以及实现Angular应用与Electron间的通信等关键步骤,并最终将应用打包成多平台可执行文件,为读者提供了一套完整的解决方案以快速入门并实践这一强大技术组合。
135 0
|
5月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十三):从理论到实践,详细对比Electron和Tauri的优劣
本文主要介绍了目前比较流行的桌面应用跨平台开发技术及其架构,并以实战的方式对比了 Electron 和 Tauri 的优势和劣势,以及桌面跨平台应用开发的技术趋势。
78 0