electron-updater软件自动检测更新 +无服务器本地测试

devtools/2024/11/30 1:36:25/

大家好,我是小黄。

今天分享一下如何0基础实现electron自动检测更新功能。

electron-updater%20%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0">一. 安装 electron-updater 实现自动更新

安装依赖 electron-updater

npm install electron-updater

 二. 修改package.josn

 "publish": {"provider": "generic","url": "http://127.0.0.1:8080"  }

 url为你的服务器地址。

三.修改main.js

注:代码不完整(完整版请关注小黄回复关键字:electron打包  获取)

const { app, BrowserWindow, ipcMain, dialog } = require('electron'); 
const { autoUpdater } = require('electron-updater');
const logger = require('electron-log');// 设置日志记录
logger.transports.file.maxSize = 1002430; // 10M
logger.transports.file.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}]{scope} {text}';
logger.transports.file.resolvePath = () => './operation.log';
autoUpdater.autoDownload = false; // 设置为 false,防止自动下载let progressWin = null;function createWindow() {let mainWin = new BrowserWindow({show: false,width: 1200,height: 1000,autoHideMenuBar: true,resizable: true,minHeight: 200,minWidth: 300,title: 'test',webPreferences: {enableWebSQL: false,webSecurity: false,spellcheck: false,nativeWindowOpen: true,nodeIntegration: true,contextIsolation: false,},});mainWin.loadFile('./test.html');// 调试窗口// mainWin.webContents.openDevTools();// 延迟 1 秒后检查更新setTimeout(() => {checkForUpdates(mainWin);}, 1000);function checkForUpdates(win) {const updateUrl = 'http://127.0.0.1:8080';autoUpdater.setFeedURL(updateUrl);// 检查更新autoUpdater.checkForUpdates();// 更新错误事件autoUpdater.on('error', (error) => {console.error('检查更新出错:', error);});// 检查更新事件autoUpdater.on('checking-for-update', () => {console.log('正在检查更新...');});// 发现新版本autoUpdater.on('update-available', (info) => {const choice = dialog.showMessageBoxSync(win, {type: 'info',buttons: ['更新', '稍后'],title: '发现新版本',message: `检测到新版本 ${info.version},是否立即更新?`,});if (choice === 0) {// 用户选择更新,创建进度弹窗createProgressWindow();autoUpdater.downloadUpdate();}});// 当前版本为最新版本autoUpdater.on('update-not-available', () => {console.log('当前版本已经是最新版本。');});// 下载进度事件autoUpdater.on('download-progress', (progress) => {const message = `已下载 ${Math.round(progress.percent)}% (${progress.transferred}/${progress.total})`;console.log(message);if (progressWin) {progressWin.webContents.send('progress', progress.percent);}});// 下载完成事件autoUpdater.on('update-downloaded', () => {if (progressWin) {progressWin.close();progressWin = null;}const choice = dialog.showMessageBoxSync(win, {type: 'info',buttons: ['立即安装', '稍后安装'],title: '更新完成',message: '更新包已下载完成,是否立即安装并重启应用?',});if (choice === 0) {autoUpdater.quitAndInstall(); // 安装并退出应用}});}mainWin.once('ready-to-show', () => {mainWin.show();});mainWin.on('close', (e) => {e.preventDefault();const choice = dialog.showMessageBoxSync(mainWin, {type: 'question',buttons: ['取消', '关闭'],title: '确认关闭',message: '确定要关闭应用吗?',});if (choice === 1) {mainWin.destroy();}});
}

四. 打包

 注:--publish always 表示生成 latest.yml 文件并上传到指定的发布服务器。不然打包后可能没有latest.yml

五. 本地搭建测试的服务器

安装依赖http-server 

pnpm install -g http-server

修改版本version为1.0.1再次打包

新建一个文件夹test

在文件夹下面存放打包后的exe和latest.yml

使用命令行启动服务

http-server ./test -p 8080

启动成功后我们在浏览器访问一下

http://localhost:8080/latest.yml

出现下面的就代表成功了。 

 六. 实际测试

注:更新无法再调试阶段测试,需要打包安装后进行测试。

我们直接打开1.0.0版本的安装包,这样只要读取到有更高的版本electron就会提示更新。

 下载成功后就会提示是否安装了。

 

七.总结

常用用 API 和事件

  • autoUpdater.setFeedURL(url):设置远程更新服务器的 URL,URL 指向包含更新文件的服务器。

  • autoUpdater.checkForUpdates():启动更新检查流程,自动检测是否有新版本。

  • autoUpdater.on('checking-for-update'):当检查更新时触发,通常用于显示“正在检查更新...”的提示。

  • autoUpdater.on('update-available'):当发现新版本时触发,通常会弹出更新对话框,询问用户是否进行更新。

  • autoUpdater.on('update-not-available'):当当前版本已是最新时触发。

  • autoUpdater.on('download-progress'):当更新下载进度发生变化时触发,可以获取下载进度信息,用于更新进度条。

  • autoUpdater.on('update-downloaded'):当更新包下载完成时触发,通常会提示用户安装更新。

  • autoUpdater.quitAndInstall():下载完成后,可以调用此方法退出应用并安装新版本。

各位小伙伴还在BOSS直聘hr已读不回?!试试这个宝藏小程序!大家快看这里。

创作不易,各位帅气漂亮的小伙伴点个关注再走呗!!

 


http://www.ppmy.cn/devtools/138063.html

相关文章

HTML和CSS 表单、表格练习

HTML和CSS 表格练习 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>HTML表格练习</title>…

C++设计模式——Abstract Factory Pattern抽象工厂模式

一、抽象工厂模式的定义 抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一种将相关/依赖对象组合在一起创建的方式&#xff0c;而无需指定它们的具体类。 抽象工厂模式与工厂方法模式的区别&#xff1a; 工厂方法模式将对象的创建过程延迟到子类中&#xff0c;允许用…

8 设计模式之简单工厂模式

设计模式是软件开发中的一套通用解决方案&#xff0c;而简单工厂模式则是最基础、最常用的一种创建型模式。在这篇博客中&#xff0c;我将为大家详细介绍简单工厂模式的概念、优缺点&#xff0c;以及通过一个饮料制作的案例&#xff0c;帮助大家更好地理解和应用这种模式。 一、…

数字图像处理(4):FPGA中的定点数、浮点数

&#xff08;1&#xff09;定点数&#xff1a;小数点固定在数据的某一位置的数&#xff0c;可以分为定点整数和定点小数和普通定点数。定点数广泛应用于数字图像处理&#xff08;图像滤波、图像缩放&#xff09;和数字信号处理&#xff08;如FFT、定点卷积&#xff09;中。 定…

HTML飞舞的爱心

目录 系列文章 写在前面 完整代码 代码分析 写在后面 系列文章 序号目录1HTML满屏跳动的爱心&#xff08;可写字&#xff09;2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心&#xff08;简易版&#xff09;7HTML粒子爱心8HTML蓝色…

详解RabbitMQ在Ubuntu上的安装

​​​​​​​ 目录 Ubuntu 环境安装 安装Erlang 查看Erlang版本 退出命令 ​编辑安装RabbitMQ 确认安装结果 安装RabbitMQ管理界面 启动服务 查看服务状态 通过IP:port访问 添加管理员用户 给用户添加权限 再次访问 Ubuntu 环境安装 安装Erlang RabbitMq需要…

Node报错:npm error code ETIMEDOUT

1、报错详细信息 npm error code ETIMEDOUT npm error syscall connect npm error errno ETIMEDOUT npm error network request to https://registry.npmjs.org/express failed, reason: connect ETIMEDOUT 104.16.1.35:443 npm error network This is a problem related to ne…

矩阵重新排列——flip类函数

f l i p flip flip类函数可将向量或矩阵按某个方向旋转 对于向量 a a a&#xff0c; f l i p ( a ) flip(a) flip(a)表示将向量 a a a进行翻转 向量翻转不改变方向 对于矩阵 a a a 1. f l i p ( a , 1 ) 1.flip(a,1) 1.flip(a,1)和 f l i p u d ( a ) flipud(a) flipud(a)表示按…