electron-builder+electron-updater实现应用自动更新过程

任磊abc 发布时间：2020-10-25 18:15:33 ，浏览量：5

autoUpdater:使应用程序能够自动更新 ipcMain:用于从主进程到渲染进程的异步通信。 ipcRenderer:用于从渲染器进程到主进程的异步通信。更多api在electron官网(中文)

介绍

接上篇electron将vue项目打包成桌面应用继续介绍一下在electron-builder打包基础下怎么使用electron-updater实现应用自动监测版本以及更新的。主要包括：

electron应用自动更新、主线程与渲染线程之间通信
本地临时服务器搭建
过程中的常见问题

electron应用自动更新具体实现流程图

electron应用自动更新过程.png

electron应用自动更新具体实现步骤

1.添加 electron-updater 包模块依赖

npm install electron-updater --save

2.在package.json文件增加 publish 配置，打包时可生成latest.yml，用于自动更新的配置信息latest.yml文件是打包过程生成的文件，为避免自动更新出错，打包后禁止对latest.yml文件做任何修改！ publish中url是安装包和latest.yml的服务器地址。这里我是配置的在本地临时搭建的服务期地址，下面我会介绍。

"build": {
    "appId": "com.electron.app",
    "copyright": "Copyright ***",
    "productName": "Electron",
    "publish": [
      {
        "provider": "generic",
        "url": "http://192.168.100.***:8000/"  //放置安装包和latest.yml的服务器地址
      }
    ],
    "files": [
      "!dist/**/*"
    ],
    "mac": {
      "icon": "build/icon.png", // 应用程序图标
      "category": "public.app-category.productivity",
      "artifactName": "${productName}_${version}.${ext}", // 应用程序包名
      "target": [
        "dmg",
        "zip"
      ]
    },
    "win": {
      "icon": "build/icon.png",
      "artifactName": "${productName}_${version}.${ext}",
      "verifyUpdateCodeSignature": false,
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "nsis": { 
      "oneClick": false, // 是否一键安装
      "createDesktopShortcut": "always", // 是否添加桌面快捷方式
      "allowToChangeInstallationDirectory": true,// 允许修改安装目录
    },
    "extends": null
  }

build中可以适当增加nsis配置，可以优化用户体验，比如是否允许用户一键安装、自定义安装位置、是否添加桌面快捷方式、安装完成是否立即启动、配置安装图标等等。更多详细参数配置可参见官方文档 nsis配置。

3.在主进程main.js文件中引入 electron-updater,ipcMain添加自动更新检测、事件监听、

const { app, BrowserWindow, ipcMain } = require('electron') // ipcMain 主线程
const { autoUpdater } = require('electron-updater')
const uploadUrl = 'http://192.168.100.***:8000/Desktop/download/' // 安装包helatest.yml所在服务器地址
// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
function updateHandle () {
  let message = {
    error: {status: -1, msg: '检测更新查询异常'},
    checking: {status: 0, msg: '正在检查更新...'},
    updateAva: {status: 1, msg: '检测到新版本,正在下载,请稍后'},
    updateNotAva: {status: 2, msg: '您现在使用的版本为最新版本,无需更新!'},
  }
let versionInfo = ''
  autoUpdater.setFeedURL(uploadUrl)
// 检测更新查询异常
  autoUpdater.on('error', function (error) {
    sendUpdateMessage(message.error)
  })
// 当开始检查更新的时候触发
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  })
// 当发现有可用更新的时候触发，更新包下载会自动开始
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  })
// 当发现版本为最新版本触发
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  })
  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
 // 包下载成功时触发
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
 // 收到renderer进程确认更新
    ipcMain.on('updateNow', (e, arg) => {
      console.log('开始更新')
      autoUpdater.quitAndInstall() // 包下载完成后，重启当前的应用并且安装更新
    })
 // 主进程向renderer进程发送是否确认更新
    mainWindow.webContents.send('isUpdateNow', versionInfo)
  })

关注

打赏

1656830895

查看更多评论

electron-builder+electron-updater实现应用自动更新过程

最近更新

热门博客

[ 申请 ]友情链接：