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

大家好,我是小黄。

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

一. 安装 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已读不回?!试试这个宝藏小程序!大家快看这里。

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

相关推荐
Dxy123931021612 分钟前
JS AES加密详解
开发语言·javascript·ecmascript
FRing031 小时前
JavaScript入门到精通三十三(异常处理、call方法、apply方法、bind方法、防抖、节流)
开发语言·前端·javascript
jktantan2 小时前
(二)Vue 3 的 attrs 不是响应式:el-form 扩展属性同步的三种方案
前端·javascript·vue.js·element-plus
echome8883 小时前
JavaScript async/await 错误处理:别让 Promise 静默失败
开发语言·前端·javascript·promise
#麻辣小龙虾#4 小时前
网页布局css中flex+margin的组合布局技巧
开发语言·前端·javascript
Hello.Reader4 小时前
Three.js / Cesium 卡顿怎么办?把三维渲染搬到 GPU 服务器
服务器·开发语言·javascript
chi11304 小时前
【无标题】
前端·javascript·python
萝卜兔0085 小时前
PIKACHU_UnsafeFileUpload
javascript·php
程序员大阳17 小时前
副队长JavaScript教程(50)-DOM:网页开发的起点
javascript·dom·es·节点·概念·document·关系
甘晴void19 小时前
我给 Magpie 做了个 macOS 桌宠:106 段动画,请求一多就亮灯
macos·electron·开源·deepseek·桌面宠物·magpie