electron-updater实现自动更新

electron-updater 是一个专为 Electron 应用设计的自动更新工具,能够帮助开发者轻松实现跨平台的自动更新功能。它支持 Windows、macOS 和 Linux 系统,通过简单的配置即可集成到 Electron 应用中,自动检查应用的最新版本并在后台完成更新。electron-updater 提供了灵活的更新策略,比如自动下载更新、静默安装,以及在下次启动时应用更新,从而确保用户始终使用最新版本的应用程序。

安装依赖

bash 复制代码
npm install electron-updater --save

配置 package.json

在 package.json 中添加 build 配置,指定更新服务器的地址:

bash 复制代码
{
  "build": {
    "nsis": {
      "allowElevation": true,
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "build/icon.ico",
      "uninstallerIcon": "build/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "differentialPackage": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://your-update-server-url/",
        "useMultipleRangeRequest": false
      }
    ]
  }
}

这里的 url 是更新服务器地址,可以是本地服务器或远程服务器。

主进程代码

在主进程中配置 autoUpdater 模块,监听更新事件并处理更新逻辑:

javascript 复制代码
const { app, BrowserWindow } = require('electron');
const { autoUpdater } = require('electron-updater');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    mainWindow.loadURL('http://localhost:9080');
}

autoUpdater.allowPrerelease = true;    //允许更新到预发布版本
autoUpdater.allowDowngrade = true;     //允许应用从高版本降级到低版本
autoUpdater.forceDevUpdateConfig = true;    //强制使用开发环境的更新配置
autoUpdater.useMultipleRangeRequest = false;    //是否使用多个范围请求(Range Requests)来下载更新包
autoUpdater.differentialPackage = false;        //是否使用差异更新包
autoUpdater.setFeedURL({
    provider: 'generic',
    url: 'http://your-update-server-url/'
});

// 配置自动更新
autoUpdater.on('checking-for-update', () => {
    console.log('Checking for updates...');
});

autoUpdater.on('update-available', () => {
    console.log('Update available');
});

autoUpdater.on('update-not-available', () => {
    console.log('No updates available');
});

autoUpdater.on('error', (error) => {
    console.error('Error in auto-updater', error);
});

autoUpdater.on('download-progress', (progressObj) => {
    console.log(`Download progress: ${progressObj.percent}%`);
});

autoUpdater.on('update-downloaded', (info) => {
    console.log('Update downloaded');
    autoUpdater.quitAndInstall();
});

app.whenReady().then(() => {
    createWindow();
    // 检查更新
    autoUpdater.checkForUpdates();
});

打包应用

使用 electron-builder 打包应用:

bash 复制代码
npm run build
electron-builder

这会生成一个 .exe 安装包以及相关的元数据文件(如 latest.yml),这些文件用于更新检测。

部署更新

将生成的 .exe 文件和 latest.yml 文件上传到更新服务器中。latest.yml 文件中包含版本信息,用于判断是否有新版本可用。

测试更新

安装生成的 .exe 文件后,启动应用。应用会自动检查更新,如果有新版本,会下载并提示用户重启以完成更新。

注意事项

  • 确保更新服务器的地址和配置正确。

  • 如果需要自定义更新逻辑,可以监听 autoUpdater 的事件并实现相应的处理。

  • 在开发环境中,可以通过模拟更新服务器来测试更新流程。

  • 生产环境:保持默认值(allowPrerelease = false,allowDowngrade = false)以确保稳定性。

  • 测试环境:启用 allowPrerelease = true 和 allowDowngrade = true 以方便测试。

  • 开发环境:启用 forceDevUpdateConfig = true 以调试更新流程。

相关推荐
一拳不是超人4 分钟前
一个没测暗色模式的 Bug,吃掉了我一半 谷歌扩展用户
前端·javascript·程序员
速易达网络1 小时前
用 Three.js 打造一座会呼吸的海岛:海风之屿飞艇巡航的技术实现
开发语言·javascript·ecmascript
八荒启·交互动画2 小时前
Web特效01—什么是渲染
前端·javascript·网页特效·八荒启-交互动画
南京兴帝文化传媒有限公司2 小时前
基于地图平台的本地商户信息优化:药店夜间服务标注与客户转化实操
前端·javascript·数据库·人工智能·geo 优化·geo优化避坑·ai搜索获客
八荒启_交互动画2 小时前
Web特效03——像素VS顶点:图形处理的的两种基本单位
javascript
雪芽蓝域zzs2 小时前
第四十二节:全局字典封装(后端字典,下拉选择复用)
开发语言·前端·javascript
样子20182 小时前
Js 之根据白名单过滤 HTML(防止 XSS 攻击)
android·前端·javascript·html·xss
尘世中一位迷途小书童3 小时前
在 Cesium 上画全球网格:我们怎么把 GeoSOT 接到瓦片调度上
前端·javascript·前端框架
CoderYanger3 小时前
Java EE 进阶:2.3 JavaScript
java·开发语言·前端·javascript·css·职场和发展·java-ee
岁岁种桃花儿3 小时前
Vue组件化编程第二篇:非单位件组件
前端·javascript·vue.js