electron-updater使用整理

这篇具有很好参考价值的文章主要介绍了electron-updater使用整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考文章:

  1. 手撸 Electron 自动更新,再繁琐也要搞懂它 - 掘金 (juejin.cn)
  2. Electron 自动更新,绕过 latest.yml 使用自定义接口 - 掘金 (juejin.cn)
  3. electron-updater实现热更新完整流程 - 掘金 (juejin.cn)

一、 配置

1. 安装electron-updater
npm install electron-updater
2. 配置electron-builder

修改electron-builder.json,增加以下内容

"publish": [
    {
        "provider": "generic",
        "url": "你的更新地址,可以是oss"
    }
]

二、具体操作

1. 代码部分

在主进程文件夹创建update.ts文件:

import { autoUpdater } from "electron-updater";
import { BrowserWindow, ipcMain, app } from 'electron'
import log from "electron-log" // 如果没有自己封装
import path from "path"

let mainWindow: BrowserWindow
// 封装更新相关的进程通信方法
const sendUpdateMessage = (opt: { cmd: string, data: any }) => {
    mainWindow.webContents.send(opt.cmd, opt.data)
}
export const checkUpdate = (win: BrowserWindow) => {
    mainWindow = win 
    // 关闭自动更新
    autoUpdater.autoDownload = false  
    // 开启开发环境调试,后边会有说明
    autoUpdater.forceDevUpdateConfig = true
    // 日志记录设置
    log.transports.file.level = "debug"
    autoUpdater.logger = log
    // 开发环境下的配置,详细参考后续说明
    // 方法3:以下整个if都不需要
    // if(!app.isPackaged){
    //   // 方法1: 项目根目录创建dev-update.yml
    //     autoUpdater.updateConfigPath = path.join(__dirname, "../dev-update.yml")
    //   // 方法2:
    //     autoUpdater.setFeedURL('http://127.0.0.1:5173/release')
    // }
    // 监听升级失败事件
    autoUpdater.on("error", (error) => {
        sendUpdateMessage({
            cmd: 'update-error',
            data: error
        })
    })
    //监听发现可用更新事件
    autoUpdater.on('update-available', (message) => {
        sendUpdateMessage({
            cmd: 'update-available',
            data: message
        })
    })
    //监听没有可用更新事件
    autoUpdater.on('update-not-available', (message) => {
        sendUpdateMessage({
            cmd: 'update-not-available',
            data: message
        })
    });

    // 更新下载进度事件
    autoUpdater.on('download-progress', (progressObj) => {
        sendUpdateMessage({
            cmd: 'download-progress',
            data: progressObj
        })
    });
    //监听下载完成事件
    autoUpdater.on('update-downloaded',(releaseObj) => {
        sendUpdateMessage({
            cmd: 'update-downloaded',
            data: releaseObj
        })
        //退出并安装更新包
        autoUpdater.quitAndInstall()
    });
    
    //接收渲染进程消息,开始检查更新
    ipcMain.on("check-update", (event) => {
        //执行自动更新检查
        console.log("检查更新")
        autoUpdater.checkForUpdates()
    })

    // 触发更新
    ipcMain.on("update-app",(event) => {
        autoUpdater.downloadUpdate()
    })
}

main.ts中配置如下:

...
import { checkUpdate } from './update'
...

const win = new BrowserWindow({
    ...
})
try {
    checkUpdate(win)
} catch (error) {
    logger.error(error)
}

我这里h5部分采用的vue,对应的使用如下:

<script lang="ts" setup>
// 百分比进度
const progress = ref("")
const init = () => {
    // 这里对ipcRenderer进行了简单封装,参考ipc.ts
    ipc.checkUpdate()
    ipc.on("update-available",(event:any, msg:any)=>{
        // 有更新
    })
    ipc.on("update-not-available",(event:any, msg:any)=>{
        // 没有更新
    })
    ipc.on("download-progress",(event:any, msg:any)=>{
        // 下载更新进度
        progress.value = `${Math.ceil(msg.percent)}%`
    })
    ipc.on("update-downloaded",(event:any, msg:any)=>{
        // 更新下载完成
    })
    ipc.on("update-error", (event:any, msg:any)=>{
        // 更新失败
        logger.log("update-error")
        logger.log(msg)
    })
}
const confrimUpdate = () => {
    ipc.updateApp()
}
</script>

封装的ipc.ts的部分内容:

/**
 * 监听主进程通信
 * @param title 
 * @param callback 
 */
on(title: string, callback: Function){
    ipcRenderer.on(title, callback)
}
// 软件更新相关
/**
 * 检查更新
 */
checkUpdate = () => {
    ipcRenderer.send('check-update')
}
/**
 * 执行更新
 */
updateApp = () => {
    ipcRenderer.send('update-app')
}
2. 打包

项目打包后会在指定的打包目录下(我这里是release文件夹)生成对应exe安装包和latest.yml文件,将这两个文件上传到最开始配置的url对应的路径内

三、关于开发环境下调试配置

一般情况下开发环境下直接调试会报错Skip checkForUpdates because application is not packed and dev update config is not forced,包括参考文章在内的绝大部分文章关于这块的解决方案是将app.isPackaged改为true

if (!app.isPackaged) { 
    Object.defineProperty(app, 'isPackaged', { 
        get: () => true, 
    }); 
}

这样确实可以做到开发环境中调试,但是可能会影响到其他地方的功能配置,可以在update.ts中配置以下代码,并且不需要修改app.isPackaged

autoUpdater.forceDevUpdateConfig = true

以下为调试方法

方法1:

  1. 在根目录创建一个yml文件,名称自定义,这里我的是dev-update.yml,内容如下
provider: generic
updaterCacheDirName: dev-updater
url: "http://127.0.0.1:5173/release"

说明:

updaterCacheDirName 定义下载目录,全路径是C:\Users\用户名\AppData\Local\dev-updater,不配置则在C:\Users\用户名\AppData\Local下自动创建文件夹,开发环境下为项目名,生产环境下为项目名-updater

url 更新地址,指向latest.yml。不配置有时候会报错,最好配置上

  1. 上文update.ts 文件中对应位置填写如下
autoUpdater.updateConfigPath = path.join(__dirname, "../dev-update.yml")

然后就可以正常调试了。

方法2:

复制latest.yml到项目根目录,并改名为dev-app-update.yml,

update.ts中使用以下处理:

// 设置检查更新的地址为本地打包生成的latest.yml所在文件夹
autoUpdater.setFeedURL('http://127.0.0.1:5173/release')

方法3:

项目根目录创建dev-app-update.yml并填写以下内容,不需要使用autoUpdater.setFeedURL也不需要配置autoUpdater.updateConfigPath

provider: generic
updaterCacheDirName: dev-updater
url: "http://127.0.0.1:5173/release"

以上方法中也可以设置为http://127.0.0.1:5173,即项目根目录,此时需要将latest.yml和打包生成的exe文件复制到根目录,这里如果不复制exe文件会报404错误文章来源地址https://www.toymoban.com/news/detail-820769.html

到了这里,关于electron-updater使用整理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Electron学习2 使用Electron-vue和Vuetify UI库

    Electron-Vue 是一个使用 Vue.js 构建跨平台桌面应用程序的框架。它基于 Electron,一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源库。 Electron-Vue 结合了 Vue.js 的灵活性和 Electron 的跨平台能力,使得开发桌面应用程序变得更加简单和高效。以下是一些 Electron-Vue 的主要

    2024年02月11日
    浏览(34)
  • electron的使用

    参见 PPT。 2.1 常见的桌面GUI工具介绍 名称 语音 优点 缺点 QT C++ 跨平台、性能好、生态好 依赖多,程序包大 PyQT Python 底层集成度高、易上手 授权问题 WPF C# 类库丰富、扩展灵活 只支持Windows,程序包大 WinForm C# 性能好,组件丰富,易上手 只支持Windows,UI差 Swing Java 基于AWT,

    2024年02月08日
    浏览(26)
  • 安装使用electron

    运行cmd查看是否安装及版本号 npm直接安装会报错缺少什么文件,使用cnpm进行安装 直接安装cnmp后,再用cnmp命令安装可能会报错Error: Cannot find module ‘node:util’ 原因是npm版本与cnpm版本,先卸载再指定版本安装 打开淘宝镜像网站链接https://npm.taobao.org/mirrors/electron/​​ 找到对应

    2024年02月10日
    浏览(34)
  • electron使用electron-builder进行MacOS的 打包、签名、公证、上架、自动更新

    由于electron在macOS下的坑太多,本文不可能把所有的问题都列出来,也不可能把所有的解决方案贴出来;本文也不太会讲解每一个配置点为什么要这么设置的原因,因为有些点我也说不清,我尽可能会说明的。所以,你要抛弃你之前所有已经完成的东西,最好弄一个全新的系统

    2024年02月03日
    浏览(39)
  • 关于 MySQL 中 Update 使用

    Update 是 SQL 中用于更新表格中已有记录的命令。通过使用 Update 命令,您可以更新表格中的一行或多行记录,并根据需要更改它们的值。在执行 Update 命令时,务必保证更新的数据符合表格中已有的约束条件,否则将无法更新记录。 在 MySQL 中,Update 命令的基本语法如下: U

    2024年02月16日
    浏览(31)
  • React使用Electron开发桌面端

    React是一个流行的JavaScript库,用于构建Web应用程序。结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序。以下是使用React和Electron开发桌面应用程序的步骤: 1. 安装Electron 首先,你需要安装Electron。在终端中运行以下命令: 2. 创建Electron应用程序 使用Electron提供

    2024年02月09日
    浏览(32)
  • electron dialog.showMessageBox使用案例

    electron 版本:25.3.1 index.html main.js 效果展示

    2024年02月15日
    浏览(21)
  • Electron学习3 使用serialport操作串口

    本文将使用 nodejs 的 SerialPort 包来实现串口通讯功能。 Node SerialPort 是一个 JavaScript 库,用于连接到在 NodeJS 和 Electron 中工作的串行端口,以下是准备环境: Electron 开发环境 电脑有串口通讯能力,一般使用USB-串口转接板 windows 操作系统 本文操作过程来自: https://girishjoshi.i

    2024年02月11日
    浏览(34)
  • 使用angular和electron 构建桌面应用

    新建一个angular app 修改src/index.html文件内容 将绝对路径改为相对路径,加个点,使electron可以访问到angular文件资源

    2024年02月14日
    浏览(39)
  • Electron详解(二):基本使用与项目打包

    在使用Electron进行开发之前,您需要安装 Node.js,最低工作版本为 14.x,低于 14 的版本在后面的打包过程中可能会报错。 (注意,因为 Electron 将 Node.js 嵌入到其二进制文件中,所以在 electron 应用运行时的 Node.js 版本与你本地电脑中运行的 Node.js 版本无关。) (虽然您需要在

    2024年02月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包