Electron应用使用electron-builder配合electron-updater实现自动更新

匿名 (未验证) 提交于 2019-12-02 21:53:52

开发客户端一定要做的就是自动更新模块,否则每次版本升级都是一个头疼的事。

下面是Electron应用使用electron-builder配合electron-updater实现自动更新的解决方案。

1.安装 electron-updater 包模块

1 npm install electron-updater --save

2.配置package.json文件

2.1 为了打包时生成latest.yml文件,需要在 build 参数中添加 publish 配置。

注意:配置了publish才会生成latest.yml文件,用于自动更新的配置信息;latest.yml文件是打包过程生成的文件,为避免自动更新出错,打包后禁止对latest.yml文件做任何修改。如果文件有误,必须重新打包获取新的latest.yml文件!!!

2.2 增加nsis配置(可省略)

nsis配置不会影响自动更新功能,但是可以优化用户体验,比如是否允许用户自定义安装位置、是否添加桌面快捷方式、安装完成是否立即启动、配置安装图标等。nsis 配置也是添加在 build 参数中。

View Code

3.配置主进程main.js文件(或主进程main中的index.js文件),引入 electron-updater 文件,添加自动更新检测和事件监听:

注意:一定要是主进程main.js文件(或主进程main中的index.js文件),否则会报错。

View Code

注意:在添加自动更新检测和事件监听之后,在主进程createWindow中需要调用一下updateHandle()。如下图所示:

4.在视图(View)层中触发自动更新,并添加自动更新事件的监听。

触发自动更新:

1 ipcRenderer.send("checkForUpdate");

监听自动更新事件:

View Code

注意:子进程中“downloadProgress”事件可能出现无法触发的问题,那是因为下载速度很快,就会跳过“downloadProgress”事件;只需要限制一下本地下载网速就好了!

为避免多次切换页面造成监听的滥用,切换页面前必须移除监听事件:

View Code

5.项目打包

执行electron-builder进行打包,windows下会生成安装包exe和latest.yml等文件,执行exe安装软件;Mac下会生成安装包dmg和latest-mac.yml文件,执行dmg安装软件。

注意:mac上不签名也可以打包成功,但是涉及到自动更新等需要身份认证的功能则不能用,也不能发布到mac app store中。所以说经过代码签名的MAC包才是完整的包。我们这里一定是经过代码签名的完整包!切记!

windows打包生成文件:

Mac打包生成文件:

6.软件升级版本,修改package.json中的version属性,例如:改为 version: “1.1.0” (之前为1.0.0);

7.再次执行electron-builder打包,将新版本latest.yml文件和exe文件放到package.json中build -> publish中的url对应的地址下;

8.在应用中触发更新检查,electron-updater自动会通过对应url下的yml文件检查更新;

更新示例:

附:项目目录层次:

文章来源: qirui
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!