分享下我近期研究, Electron 的自动更新机制

简介: Electron的自动更新机制并不算复杂,但团队内似乎没有相关文档,正好笔者搞明白了,就简单说明一下,以MacOS的arm平台为例说明,具体代码可以参考Postcat的相关配置,本篇文章就不以具体代码举例了。

Electron的自动更新机制并不算复杂,但团队内似乎没有相关文档,正好笔者搞明白了,就简单说明一下,以MacOS的arm平台为例说明,具体代码可以参考Postcat的相关配置,本篇文章就不以具体代码举例了。


这里是以Mac arm平台为例,对于不同平台,包名不一样、更新文件名不一样、压缩包后缀不一样,但总体上都是围绕这三样东西。


配置了自动更新后,构建后,会有以下几个关键文件:

    • 安装包:Postcat-1.0.0-arm64.dmg
    • 更新/指引文件:latest-mac.yml
    • 压缩包:Postcat-1.0.0-arm64-mac.zip

    三者是对应的,要顺利完成自动更新,三者缺一不可。当运行Postcat时,应用程序会尝试访问更新文件,从更新文件中获取最新的版本号和一个相对路径,相对路径指向.zip压缩包。


    如果更新文件latest.yml中的最新版本号和当前运行的应用程序版本号一致,则不会再去访问压缩包。

    如果不一致,则回去尝试访问压缩包,去将压缩包下载到本地,自动进行更新(更新过程是自动的,笔者也不了解内部运行的机理)。


    待下一次重启应用时,运行的即是最新的应用程序,大致流程模型如下:


    image.gif编辑


    由此可知,latest.yml文件的位置是相当重要的,它必须始终指向最新的压缩包,因为在每一次发布新版本后,需要将latest.yml文件替换掉。关于这一点,Github平台已经帮我们做得很好了,但如果你的安装包需要发布在其他平台上,这一步操作需要加入到标准流程中。


    当然,由于我们有自己的需求,因此在中间加了一层Nginx,Electron关于自动更新对外的访问,都会经过Nginx,由此变成:


    image.gif编辑


    需要注意的是,更新文件latest.yml中的路径是相对路径,而Electron访问压缩包时走的是http协议,绝对路径,因此当自动更新出现问题时,可以查看latest.yml中的相对路径是否正确。


    这个机制我有应用到目前我参与的开源项目中,Postcat 开源的 API 管理工具,纯国产,免费的,主打插件生态,适合中小团队以及个人开发者使用,有 API 相关的核心功能。


    目前在 Github 上 1.3k star,如果你觉得这个项目还不错的话,不妨点个 star 支持一下~


    Github:

    https://github.com/Postcatlab/postcat

    Demo:

    https://postcat.com/zh/?utm_source=al&utm_campaign=gf&utm_content=Electron

    zhongwen.png

    相关文章
    |
    20天前
    |
    缓存 安全 前端开发
    Electron on macOS: 揭秘 MacUpdater 如何实现无缝自动更新?
    本文首发于微信公众号“前端徐徐”,详细探讨了 Electron 应用在 macOS 平台上的更新原理。文章分析了 `MacUpdater` 类的实现,包括与 Electron 原生更新器的集成、更新检测和下载、代理服务器管理、环境适配、安全性保障、错误处理和日志记录、更新安装流程控制以及缓存管理等关键功能。通过这些技术细节,展示了如何在 macOS 上实现高效、安全的 Electron 应用更新。
    32 0
    Electron on macOS: 揭秘 MacUpdater 如何实现无缝自动更新?
    |
    20天前
    |
    前端开发 开发者 UED
    你真的了解 Electron 的自动更新吗?揭秘AppUpdater 类的内部工作原理
    本文由前端徐徐首发,深入探讨了 Electron 的自动更新工作原理,特别是 `electron-builder` 中 `AppUpdater` 类的源码分析,涵盖配置更新源、检查更新、下载更新、安装更新及事件通知等核心功能,帮助开发者更好地理解和使用 Electron 的自动更新机制。
    45 0
    你真的了解 Electron 的自动更新吗?揭秘AppUpdater 类的内部工作原理
    |
    9天前
    |
    JSON JavaScript 前端开发
    开发桌面程序-Electron入门
    【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
    开发桌面程序-Electron入门
    |
    3月前
    |
    JavaScript 开发工具
    Electron 开发过程中主进程的无法看到 console.log 输出怎么办
    Electron 开发过程中主进程的无法看到 console.log 输出怎么办
    |
    4月前
    |
    前端开发
    PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
    PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
    PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
    |
    6月前
    |
    移动开发 开发框架 JavaScript
    Vue3 Vite electron 开发桌面程序
    Vue3 Vite electron 开发桌面程序
    335 0
    |
    前端开发 算法 JavaScript
    从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(下)
    从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(下)
    167 0
    |
    存储 Web App开发 JavaScript
    从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(上)
    从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(上)
    235 0
    |
    Web App开发 资源调度 前端开发
    基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
    基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
    137 0
    |
    前端开发 JavaScript API
    React使用Electron开发桌面端
    React是一个流行的JavaScript库,用于构建Web应用程序。结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序。以下是使用React和Electron开发桌面应用程序的步骤:
    React使用Electron开发桌面端