Electron 集成自动更新功能,进度条用ProgressBar简化,代码复制可用!

1,247 阅读1分钟

此篇文章需要的基础,是会用electron-builder进行app 打包操作。

第一步:打包生成打包文件

image.png

第二步:上传文件到OSS

image.png

第三步:修改package.json -> build -> publish 字段

"publish": {
  "provider": "generic",
  "url": "https://oss-cdn/path/"
}

第四步:安装electron-updater

npm i electron-updater --save 
or
yarn install electron-updater

第五步:在main.js 中添加如下代码

import { app, BrowserWindow, ipcMain, shell, dialog } from 'electron';
import { autoUpdater } from 'electron-updater';

let mainWindow: BrowserWindow | null = null;


export default class AppUpdater {
    constructor() {
        if (!process.env.WEBPACK_DEV_SERVER_URL) {
            autoUpdater.autoDownload = false

            autoUpdater.signals.updateDownloaded(() => {
            })
            autoUpdater.on('error', (error) => {
                log.log('检查更新失败: ' + error == null ? 'unknown' : (error.stack || error).toString())
            })
            autoUpdater.on('checking-for-update', (info) => {
                log.log('开始检查更新', info)
            })
            autoUpdater.on('update-not-available', (info) => {
                log.log('没有可用更新', info)
            })

            autoUpdater.on('update-available', (info) => {
                dialog.showMessageBox(mainWindow!,{
                    type: 'info',
                    title: '更新提示',
                    message: '软件需要更新,您是否立即更新?',
                    buttons: ['取消', '后台更新']
                }).then((res) => {
                    log.warn('index:' + res.response)
                    if (res.response === 1) {
                        log.warn('选择升级')
                        autoUpdater.downloadUpdate().then(r => {}).catch(e => console.log(e))
                    } else {
                        log.warn('选择不升级:')
                        app.quit();
                    }
                })
            })

            autoUpdater.on('download-progress', function (progressObj) {
                log.log('下载进度信息', progressObj)
                mainWindow!.setProgressBar(progressObj.percent / 100);
            })

            // 安装更新
            autoUpdater.on('update-downloaded', (res) => {
                log.warn('下载完毕!提示安装更新')

                dialog.showMessageBox(mainWindow!,{
                    type: 'info',
                    title: '升级提示!',
                    message: '已自动升级为最新版,请等待程序安装完成并重启应用!',
                }).then((res) => {
                    log.warn('确认安装')
                    setImmediate(() => autoUpdater.quitAndInstall(true, true))
                })
            })
        }
    }

    checkForUpdates() {
        console.log("检查更新")
        return autoUpdater.checkForUpdates()
    }
}

第六步:在mainWindow 创建以后,启动更新检查

let appUpdater = new AppUpdater();
appUpdater.checkForUpdates().then().catch(e=>console.log(e))