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

1. 添加依赖

"electron-updater": "^4.0.0"
升级的时候往往就是因为electron-updater版本不搭配，导致一些乱七八糟的问题出现，此时electron的版本是2.0.4，打包的时候如果electron-updater的版本小于4.0.0，会出现无法打包，所以修改electron-updater的版本为^4.0.0

2 配置更新程序的地址

  打开package.json文件在build标签下添加public配置，执行npm run build时，将会在build目录中生成latest.yml文件

 

这里的的url对应的是升级包的所在目录的网络地址，不用指向具体的升级包文件。

以下放一张服务器所在的升级包的目录图片，做过后台开发的小伙伴一看就懂了。

举例：

"publish": [

{ "provider": "generic",

"url": "http://119.30.229.43/app/version/p/"

}

]

url地址指向的是升级包所在目录，升级包的文件名称和yml的文件名称没有限制，可以随意命名。

3 主进程中配置升级

 新建一个checkupdate.ts文件，或者自己建立JS文件 内容如下

import { autoUpdater } from 'electron-updater'
import { ipcMain, BrowserWindow } from 'electron'
/**
 * -1 检查更新失败 0 正在检查更新 1 检测到新版本，准备下载 2 未检测到新版本 3 下载中 4 下载完成
 **/
// 负责向渲染进程发送信息
function Message(mainWindow: BrowserWindow, type: Number, data?: String) {
    const senddata = {
        state: type,
        msg: data || ''
    }
    mainWindow.webContents.send('UpdateMsg', senddata)
}
// 更新应用的方法
export default (mainWindow: BrowserWindow) => {
    // 在下载之前将autoUpdater的autoDownload属性设置成false，通过渲染进程触发主进程事件来实现这一设置(将自动更新设置成false)
    autoUpdater.autoDownload = false
    //设置版本更新地址，即将打包后的latest.yml文件和exe文件同时放在
    //http://xxxx/test/version/对应的服务器目录下,该地址和package.json的publish中的url保持一致
    // https://sm2.35dinghuo.com/download/
    autoUpdater.setFeedURL('https://sm2.35dinghuo.com/download/')
    // 当更新发生错误的时候触发。
    autoUpdater.on('error', (err) => {
        if (err.message.includes('sha512 checksum mismatch')) {
            Message(mainWindow, -1, 'sha512校验失败')
        }
    })
    // 当开始检查更新的时候触发
    autoUpdater.on('checking-for-update', (event, arg) => {
        Message(mainWindow, 0)
    })
    // 发现可更新数据时
    autoUpdater.on('update-available', (event, arg) => {
        Message(mainWindow, 1)
    })
    // 没有可更新数据时
    autoUpdater.on('update-not-available', (event, arg) => {
        Message(mainWindow, 2)
    })
    // 下载监听
    autoUpdater.on('download-progress', (progressObj) => {
        Message(mainWindow, 3, progressObj)
    })
    // 下载完成
    autoUpdater.on('update-downloaded', () => {
        Message(mainWindow, 4)
    })
    // 执行更新检查
    ipcMain.handle('check-update', () => {
        autoUpdater.checkForUpdates().catch(err => {
            console.log('网络连接问题', err)
        })
    })
    // 退出并安装
    ipcMain.handle('confirm-update', () => {
        autoUpdater.quitAndInstall()
    })

    // 手动下载更新文件
    ipcMain.handle('confirm-downloadUpdate', () => {
        autoUpdater.downloadUpdate()
    })
}

4.在main/index.js主进程中进行导入：

import Update from './checkupdate'; // 引入上面的文件
   //检测版本更新

Update(mainWindow);

5.渲染进程显示更新进度

<template>
   <div class="systemExample width100 height100">
        <main>
            <div class="right-side">
                <div class="doc">
                    <div class="title alt">您可以点击的按钮测试功能</div>
                    <el-button type="primary" round @click="CheckUpdate">检查更新, 不可用于开发环境</el-button>
                </div>
            </div>
        </main>
        <el-dialog
                title="下载进度"
                :visible.sync="dialogVisible"
                :show-close="true"
                :close-on-press-escape="false"
                :close-on-click-modal="false"
                center
                width="50%"
                top="45vh">
            <div class="conten">
                <el-progress :percentage="percentage" :color="colors" :status="progressStaus"></el-progress>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    let ipcRenderer = require("electron").ipcRenderer;
    export default {
        name: "systemExample",
        data: () => ({
            percentage: 0,
            colors: [
                { color: "#f56c6c", percentage: 20 },
                { color: "#e6a23c", percentage: 40 },
                { color: "#6f7ad3", percentage: 60 },
                { color: "#1989fa", percentage: 80 },
                { color: "#5cb87a", percentage: 100 }
            ],
            dialogVisible: false,
            progressStaus: null,
        }),
        mounted () {
            ipcRenderer.on('UpdateMsg', (event, arg) => {
                switch (arg.state) {
                    case 1:
                        this.$confirm('检查到商盟订货有新版本，是否更新?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.dialogVisible = true
                            this.$ipcApi.send("confirm-downloadUpdate")
                        })
                        break;
                    case 3:
                        this.percentage = arg.msg.percent.toFixed(1);
                        break;
                    case 4:
                        this.progressStaus = "success";
                        this.$alert("下载完成！", "提示", {
                           confirmButtonText: "确定",
                           callback: (action) => {
                           this.$ipcApi.send("confirm-update");
                          },
                        });
                        break;
                    default:
                        break;
                }
            })
        },
        methods: {
           // 下面方法点击按钮去检查，那么如果你想实现应用打开就去检查呢，你就吧此文件写在你项目的根页面，然后然后开始就去执行这个方法即可！
            CheckUpdate() {this.$ipcApi.send("check-update")},
        }
    };
</script>

6. 最后上效果图：

6.5：默认下载成功后：下载的exe文件在这个位置： C:UsersAdministratorAppDataLocalelectron-vue-seed-updaterpending

7. 注意点：不可用于本地环境去检查更新，一定是打包后的exe文件运行：不然会报错，大概就是他会把electron的版本进行比较！

Update for version 10.1.3 is not available (latest version: 2.0.0, downgrade is disallowed).

8. 如果本地测试呢你可以用express启动个服务：（你可能用不着）

const express = require('express')
const path = require('path')
const app = express()
// 下面在干嘛，你具体可看：https://www.jianshu.com/p/1d92463ebb69，大概加个路径文件
app.use(express.static(path.join(__dirname, './client')))

const server = app.listen(25565, function () {
  const host = server.address().address
  const port = server.address().port

  console.log('服务启动', host, port)
})

client目录呢就是打包后的yml,exe文件啦。

然后吧上面的那些ull替换为node服务器