electron缺点_Electron客户端场景化更新升级方案实践

背景 

Electron 客户端是以前端技术栈为主，由于前端技术的迭代更新速度比较快，所以为了提高和优化应用的性能，我们的应用也需要不断升级。并且业务需求的不断增加，应用也会面临重新发版升级的问题。当我们发版更新比较频繁时，如果升级的方式不够友好、不够优雅，那么对用户的体验就会造成很大影响。所以要考虑各种情况，选择比较优雅的升级方法。本文主要围绕以electron-builder打包方式打包应用时，如何实现应用更新而展开，希望对大家能够有所帮助。

应用UI层更新方案

Electron应用是由主进程和渲染进程组成。主进程主要为web应用提供native能力,而渲染进程负责UI交互。在一些业务场景下主进程代码没有改动，只是渲染进程代码有更新，因此客户端只需更新渲染进程即可，也就是主进程创建的window窗口只需要重新加载新的html页面即可，具体流程如下。

更新步骤(如图1-1)

1.客户端主进程通过轮询、定时请求或者服务端推送方式接收更新通知

2.在主进程中对需要更新的渲染进程执行webContents.reloadIgnoringCache()完成页面重载     

                             图1-1

应用全量升级解决方案

当应用代码改动较大时，比如Electron版本升级、项目架构调整等，我们就可能需要用户下载全量的升级包来升级。Electron官方提供了多种应用更新方案 (https://electronjs.org/docs/tutorial/updates#implementing-updates-in-your-app)，主要包括使用Electron团队维护的update.electronjs.org实现自动更新，以及electron-builder打包方案中的electron-updater。我们下问介绍的就是使用electron-updater完成应用的全量升级。

electron-builder 打包配置

在打包配置文件中，需要配置publish选项，指定provider和url, 其中url是存放升级更新包的服务器。

a)  打包配置文件(如图 1-2)

图 1-2

打包完成之后(文件如图1-3)，我们将打包目录下生成的所有文件都放到资源服务器，给应用提供下载。

                                                  图 1-3

b)  latest-mac.yml 文件用于进行版本和包的比对更新，文件内容(如图1-4)