--- theme: juejin --- ![app-upgrade.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77cfcbcd85cc48f48e3c0246bda14e92~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=800&h=600&s=73355&e=png&b=ffffff) ## 前言最近团队接到一个新需求要用到 Electron 相关的技术开发端上应用（Windows 和 Linux），然后笔者选择的就是自己比较熟悉的技术栈 `React + Electron` 来进行项目开发。开发过程中其实就是纯 Web 体验，然后在迭代了几个版本之后，用户就反馈`“能不能增加自动更新功能？”`因为现在每次都是将安装包放到一个 CDN 上然后告诉用户下载重新安装替换原来的版本，原本我觉得自动更新是 Electron 的一个很简单的配置，应该花费不了太多时间，但是事与愿违，在查看了文档以及各种网上资料过后，磕磕绊绊的终于实现了 Windows 和 Linux 下应用自动更新的功能，在这里就把整个过程记录下来，帮助后续有需要的朋友。 > 需要强调一下，可能 Electron 自动更新**真的是一个简单的功能**，但是从网上能查到的资料来看，大家真的对新手不负责，对自己写的文章不负责，基本上 10 篇文章都说能自动更新，9 篇文章的代码更新不了无法使用甚至是根本运行不了，笔者相信他们自己是会自动更新的，但是他们写出来的东西真的不是为了告诉别人怎么实现自动更新的，应该单纯就是凑篇文章吧。咱就说也不是啥重要的内容，藏着掖着真没必要。 ## 更新前准备本文主要是讲 Electron 的自动更新，因此核心是自动更新的逻辑，所以无论你是原生 Electron 还是 React/Vue 的 Electron 大前端开发，本文只集中在核心的自动更新逻辑部分，并且因为前面提到过，笔者对 Electron 也不是很熟悉，所以不会讲过多内部源码细节，你就算问我也不会其实😄。 ### Electron 代码仓库笔者这边使用的是一个通用的脚手架来做示例代码的，脚手架地址[electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate)，还是那句话既然你看这篇文章了，那么说明至少你和我一样是接触过前端正在搞 Electron 的，更多基础的东西我就不介绍了。 > 本文所有代码均在本地真实地运行跑通过，所有的截图均来自 [electron-react-auto-update](https://github.com/luffyZh/electron-react-auto-update) 代码仓库。 ### 更新服务器通常官方文档提供的更新示例都是极简的，比如写一个简单的脚手架然后推到 Github 上，通过 Github 的 Releases 服务进行更新，因此他们的服务配置一般来说都是这样： ```json { ... "build": { ..., "publish": { "provider": "github", "owner": "electron-react-boilerplate", "repo": "electron-react-boilerplate" } } } ``` 这里的 Provider 比较重要，简单来说就是表示以何种方式进行应用的升级，以下是一些可能的 `provider` 值及其含义（我觉得必要的知识还是需要介绍大家了解一下的）： * `github`: 使用 GitHub Releases 作为更新源。 * `gitlab`: 使用 GitLab Releases 作为更新源。 * `s3`: 使用 Amazon S3 或兼容 S3 的存储作为更新源。 * `spaces`: 使用 DigitalOcean Spaces 作为更新源。 * `generic`: 使用一个通用的 HTTP 服务器作为更新源。这时，你需要手动上传更新文件到你指定的服务器，并确保访问 URL 正确。官方文档这么介绍没问题，因为官方需要保证通用性简便性，但是其实 90% 的应用场景肯定都是私有化部署升级，因此我这边只介绍 `generic` 这种方式，也就是使用 HTTP 服务器作为更新源来升级，这样的话就需要文件服务器，因此在实现代码更新之前各位开发者需要准备一个文件服务器。为了简单，我为大家实现了一个简易的本地离线文件服务器，并作了如下约定： 1. 目前仓库代码开发模式版本为 v0.1.0 2. 我已经提前打包好了 v0.3.6 的版本更新所需的内容放到了本地服务器 3. 服务器地址就是仓库下 `file-server` 文件夹 4. `npm install` 之后在根目录下运行 `npm run start:file-server` 即可启动服务器文件服务器启动效果如下图： ![服务器Vscode启动.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8128c7e91a54bd29acaed509c849d32~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1200&h=446&s=37917&e=png&b=282a36) ![服务器启动-浏览器.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fa5b3a447f14789a3d521b78b0c4edd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=820&h=361&s=38445&e=png&b=ffffff) 至此，前期准备工作完成，也就是说开发者将仓库代码 Clone 到本地（直接下载也可以）之后，本地的代码就是 `0.1.0` 的版本（这里的当前版本脚手架读取的是 `/release/app/package.json` 里面的 `version` 字段），然后如果想查看更新效果，运行本地的文件更新服务器，打包之后就可以实现自动更新功能的试用。废话不多说，接下来直接进行应用更新代码部分的讲解，我会非常详细的为大家讲解 Electron 应用自动更新的步骤。 ## 简单的自动更新 > **需要注意的是，在开发模式下是无法预览自动更新的，网上有很多办法说可以，我试了一圈都不行，是我自己太菜的问题，所以我建议大家在生产模式下进行验证。** 对于我提供的示例代码，大家只需要执行如下几步: 1. Clone 代码到本地（直接下载也可以） 2. `npm install` 安装必要依赖 3. `npm run package` 打包应用 4. 访问生产包，路径：`/release/build/xxxx.exe`（Windows）或者 `/release/build/xxxx.AppImage`（Linux）执行完上述操作过后，再根据前面的步骤把文件服务器启动起来，点击打开应用，就能查看应用的自动更新效果。 * Windows 下的自动更新 ![windows-update.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f16a584a4ee34d608003cd2e9383ec0e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1653&h=868&s=4973637&e=gif&f=262&b=fbfafa) * Linux 下的自动更新 ![linux-update.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f12c5c5abf394121b34a7578e46e7171~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2560&h=1440&s=2142240&e=gif&f=144&b=3f043d) 从上面两个效果图可以看的出，在 Linux 和 Windows 系统下面均实现了应用的自动更新功能，虽然略显粗糙但是毕竟是可用的。**既然这里已经证明了方案的可行性，那么接下来的所有代码和示例截图我就都使用 Windows 系统来进行了！** 因为双系统切换截图还是比较麻烦的。 ### 核心代码讲解接下来，我们进行核心代码的讲解。Electron 的自动更新逻辑还是比较简单的，我这边分为两部分，一部分是更新逻辑，一部分是主线程逻辑，简单的更新逻辑并不需要渲染线程，完全托管在 Electron 原生里面。具体代码如下： * 更新逻辑核心代码 ```js // src/main/auto-update.ts export async function autoUpdateApp() { // 等待 3 秒再检查更新，确保窗口准备完成，用户进入系统 await sleep(3000); // 每次启动自动更新检查更新版本 autoUpdater.checkForUpdates(); autoUpdater.logger = logger; autoUpdater.disableWebInstaller = false; // 这个写成 false，写成 true 时，可能会报没权限更新 autoUpdater.autoDownload = false; autoUpdater.on("error", (error) => { logger.error(["检查更新失败", error]); }); // 当有可用更新的时候触发。更新将自动下载。 autoUpdater.on("update-available", (info) => { logger.info("检查到有更新，开始下载新版本"); const { version } = info; logger.info(`最新版本为： ${version}`); // 这里做的是检测到更新，直接就下载 autoUpdater.downloadUpdate(); }); // 当没有可用更新的时候触发，其实就是啥也不用做 autoUpdater.on("update-not-available", () => { logger.info("没有可用更新"); }); // 下载更新包的进度，可以用于显示下载进度与前端交互等 autoUpdater.on("download-progress", async (progress) => { logger.info(progress); }); // 在更新下载完成的时候触发。 autoUpdater.on("update-downloaded", (res) => { logger.info("下载完毕, 提示安装更新", res); // 这里需要注意，Electron.dialog 想要使用，必须在 BrowserWindow 创建之后 dialog .showMessageBox({ title: "更新应用", message: "已为您下载最新应用，点击确定马上替换为最新版本！", }) .then(() => { logger.info("退出应用，安装开始！"); // 重启应用并在下载后安装更新，它只应在发出 update-downloaded 这个事件后方可被调用。 autoUpdater.quitAndInstall(); }); }); } ``` * 主线程逻辑 ```js // src/main/main.ts import { autoUpdateApp } from './app-update'; ... app .whenReady() .then(() => { // 创建窗口 createWindow(); // 检查更新 autoUpdateApp(); app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (mainWindow === null) createWindow(); }); }) .catch(console.log); ``` 从上面的代码来看，真的非常简单，封装好自动更新逻辑之后，只需要在窗口准备完成之后调用方法即可实现自动更新~ > 此部分的代码我更新到了仓库的 [electron-react-auto-update_feature/easy-upgrade 分支](https://github.com/luffyZh/electron-react-auto-update/tree/feature/easy-upgrade)，大家可以进行查看。别人的文章可能会给你讲为什么用第三方包 `electron-updater` 而不是原生的 `Electron.autoUpdater`，优势好处之类的，在本文里是不会讲的，因为两方面： > > 1. 我个人不擅长 Electron，写这篇文章就是踩坑记录帮助别人 > 2. 明明有 100 分的答案，为啥还要去告诉别人 60 分的答案？对比了你也不会去用的，意义不大。 ## 前端自定义展示的自动更新经过上面的步骤，相信大家都已经完成了示例应用的自动更新，那么接下来讨论的就是精益求精，让**应用自动更新**这个产品需求变得更完美。前面的更新步骤完全是通过 Electron 原生能力进行更新的，我个人觉得存在如下几个可以优化的地方： * 不同系统版本的更新配置比较繁琐 ```json "build"： { ... "publish": { "provider": "generic", "url": "http://localhost:8099/packages/win32/" } } ``` 上面是示例应用自动更新的核心配置项 `publish`，这里在不同系统内会有一个问题，我在 windows 打包设置当前这个地址，但是我如果在 linux 打包的时候，需要变更这个地址打包才可以，要不然应用其实检测不到对的版本对的安装包。 * 更新是一个完全自主行为不可控前面编写的代码检测到更新就直接给用户下载安装了，其实从 UX 的角度来说这一点是值得商榷的，应该更优雅的提示用户。 * 更新效果粗糙，原生能力有限对于应用自动更新来说，Electron 的原生效果体验并不是很好，这也不能怨它，因为它负责提供基础的更新能力，所有底层都开放出来了，开发者自行优化就可以了。那么既然是套壳的前端应用，无论是 React.js 还是 Vue.js 应该都能从前端的角度将整个更新过程美化，让用户得到更好的体验。上面是针对当前版本的示例应用我感知到的三个问题，接下来就一一解答并附上核心代码。 ### 细化配置，实现不同系统自主更新前面说了，不同系统之间更新配置需要频繁切换 `publish.url` 地址然后再重新打包才可以，那么有没有办法一次性配置好，根据系统版本进行打包呢？答案是有的，`publish` 字段表示的就是如何发布自动更新，如果这个字段在最外层，那么就只能有一种写法，但是其实这个字段还可以配置到系统打包参数里，比如下面这样： ```js "build": { ... "win": { "target": [ "nsis" ], "publish": { "provider": "generic", "url": "http://localhost:8099/packages/win32/" } }, "linux": { "target": [ "AppImage" ], "category": "Development", "publish": { "provider": "generic", "url": "http://localhost:8099/packages/linux/" } }, ... "publish": { "provider": "generic", "url": "http://localhost:8099/packages/linux/" } }, ``` 上面配置完成之后，在不同系统的打包参数里我们都指定了 `publish` 的详细更新参数，这里的优先级是高于外层的，这样就避免了不同系统需要修改参数再打包的窘境了~ 比如将外层的 `publish` 参数改成 `/linux` 路径的更新地址，然后在 Windows 系统内进行打包，打包过后会发现更新地址正确的替换成了 `/win32`，这里如果想要查看具体地址的话，文件位置在 `/release/build/win-unpacked/resources/app-update.yml`。 ![windows-publish-config.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e58d67abc4814787af542a4820f46739~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1312&h=490&s=41940&e=png&b=282a36) 前面已经说过了，已经验证完成了 Windows 系统和 Linux 系统的兼容性，后续就不一一介绍，只介绍 Windows 下的各类情况，Linux 部分笔者也全部测试过，是没问题的。 ### 更新自主可控前面的效果大家应该已经看到了，应用启动检测发现新版本就直接提示用户更新，点完就更新完了，完全没给用户机会，万一用户不想更新怎么办，这里其实可以在更新代码处增加用户交互限制，比如提供跳过此版本更新，取消更新的服务，比如下面这样： ```js // src/main/main.ts import { app, dialog, BrowserWindow, MessageBoxOptions, MessageBoxReturnValue, } from "electron"; import { join } from "path"; import { autoUpdater } from "electron-updater"; import logger from "electron-log"; import Store from "electron-store"; const store = new Store(); async function sleep(ms: number) { return new Promise((resolve) => { const timer = setTimeout(() => { resolve(true); clearTimeout(timer); }, ms); }); } /** * 用户确定是否下载更新 */ export function downloadUpdate() { autoUpdater.downloadUpdate(); } /** * 自动更新的逻辑 * @param mainWindow */ export async function autoUpdateApp(mainWindow: BrowserWindow) { // 等待 3 秒再检查更新，确保窗口准备完成，用户进入系统 await sleep(3000); // 每次启动自动更新检查更新版本 autoUpdater.checkForUpdates(); autoUpdater.logger = logger; autoUpdater.disableWebInstaller = false; // 这个写成 false，写成 true 时，可能会报没权限更新 autoUpdater.autoDownload = false; autoUpdater.on("error", (error) => { logger.error(["检查更新失败", error]); }); // 当有可用更新的时候触发。更新将自动下载。 autoUpdater.on("update-available", (info) => { logger.info("检查到有更新，开始下载新版本"); logger.info(info); downloadUpdate(); }); // 当没有可用更新的时候触发，其实就是啥也不用做 autoUpdater.on("update-not-available", () => { logger.info("没有可用更新"); }); // 下载更新包的进度，可以用于显示下载进度与前端交互等 autoUpdater.on("download-progress", async (progress) => { logger.info(progress); }); // 在更新下载完成的时候触发。 autoUpdater.on("update-downloaded", (info) => { // 检查是否用户已经跳过了当前版本 const skippedVersion = store.get("skippedVersion"); logger.info("下载完毕！提示安装更新"); logger.info(info); // 如果当前下载的版本就是设置的跳过的版本，那么就不提示用户安装 if (info.version === skippedVersion) return; // 定义 Dialog 参数 const dialogOpts: MessageBoxOptions = { type: "info", buttons: ["取消", "跳过版本", "更新"], title: "升级提示", message: "已为您下载最新应用!", detail: "点击“更新”马上替换为最新版本，点击“跳过版本”不再接收当前版本更新。", }; // dialog 想要使用，必须在 BrowserWindow 创建之后 dialog .showMessageBox(dialogOpts) .then((returnVal: MessageBoxReturnValue) => { const { response } = returnVal; if (response === 2) { logger.info("退出应用，安装开始！"); // 安装的时候如果设置过 skkipVersion, 需要清除掉 store.delete("skippedVersion"); // 走默认的自动更新逻辑 autoUpdater.quitAndInstall(); } else if (response === 1) { // 如果用户选择跳过版本，我们储存这个版本号到 electron-store store.set("skippedVersion", info.version); } else { logger.info("用户点击了取消，本次不进行升级"); } }); }); } ``` 上面代码我写了丰富的注释，就不过多进行讲解了，详细的代码放到了仓库[feature/control-update 分支](https://github.com/luffyZh/electron-react-auto-update/tree/feature/control-update)，感兴趣的自行查看，实际的效果如下面所示： * 本次不更新，但是下一次打开应用依然会提示更新 ![cancel-update.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31f1fc459257492ebe52efa00c7aad82~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1316&h=814&s=5064654&e=gif&f=224&b=fdfdfd) * 跳过本次更新，直到下次有更高的版本之后再提示 ![skip-update.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c06ea605db6e473f8752b7ad6d9e6a19~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1286&h=795&s=5103449&e=gif&f=286&b=fcfcfc) ### 前端精致化显示更新进度前面两步基本上完成了一整套更新流程，但是更新效果比较粗糙，因为用的是 Electron 原生提供的交互能力，在实现的过程中让我怀念起了大学期间写 C# 的时光，不过既然是一个套壳前端应用，作为一个纯正的前端，肯定是希望能把页面做的尽量酷炫的，**饱暖思淫欲**，在基本需求满足之后还是希望效果能变得更加精致，用户体验更好，比如下面的交互： ![fe-optimize.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f333ec53b404d4887798fc7037e4869~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1280&h=791&s=4471002&e=gif&f=356&b=fbfafa) 其实体验可能也没有好那么多，因为只是一个简易版前端 Demo，但是虽然简单，所有的细节都是由前端来操控实现的，我这边就抛砖引玉，有兴趣的读者可以自己去实现一个炫酷炸天的更新页面。接下来主要给大家讲解一下核心的代码细节： * 自动更新的逻辑代码 ```js // 这里主要负责获取更新的细节，将信息回传渲染线程，不做任何逻辑处理 // src/main/autoUpdater.js import { app, BrowserWindow } from 'electron'; import { autoUpdater } from 'electron-updater'; /** * 用户确定是否下载更新 */ export function downloadUpdate() { autoUpdater.downloadUpdate(); } /** * 退出并安装更新 */ export function installUpdate() { autoUpdater.quitAndInstall(); } /** * 自动更新的逻辑 * @param mainWindow */ export async function autoUpdateApp(mainWindow: BrowserWindow) { // 等待 3 秒再检查更新，确保窗口准备完成，用户进入系统 await sleep(3000); // 每次启动自动更新检查更新版本 autoUpdater.checkForUpdates(); autoUpdater.logger = logger; autoUpdater.disableWebInstaller = false; // 这个写成 false，写成 true 时，可能会报没权限更新 autoUpdater.autoDownload = false; autoUpdater.on('error', (error) => { logger.error(['检查更新失败', error]); }); // 当有可用更新的时候触发。更新将自动下载。 autoUpdater.on('update-available', (info) => { logger.info('检查到有更新'); logger.info(info); // 检查到可用更新，交由用户提示是否下载 mainWindow.webContents.send('update-available', info); }); // 下载更新包的进度，可以用于显示下载进度与前端交互等 autoUpdater.on('download-progress', async (progress) => { logger.info(progress); // 计算下载百分比 const downloadPercent = Math.round(progress.percent * 100) / 100; // 实时同步下载进度到渲染进程，以便于渲染进程显示下载进度 mainWindow.webContents.send('download-progress', downloadPercent); }); // 在更新下载完成的时候触发。 autoUpdater.on('update-downloaded', (res) => { logger.info('下载完毕！提示安装更新'); logger.info(res); // 下载完成之后，弹出对话框提示用户是否立即安装更新 mainWindow.webContents.send('update-downloaded', res); }); } ``` 这里大部分的代码和之前的更新逻辑都是一样的，核心关注的就是之前检测到更新，下载更新以及安装更新都是原生进行的，而现在通过 `mainWindow.webContents.send()`方法发送给前端，由前端来控制交互。 * 主线程 ```js // 主线程用于接收渲染线程的消息，是否下载，是否更新 import { autoUpdateApp, installUpdate, downloadUpdate } from './app-update'; // 下载更新 ipcMain.on('download-update', async () => { downloadUpdate(); }); // 安装更新 ipcMain.on('install-update', async () => { installUpdate(); }); app .whenReady() .then(() => { // 创建窗口 createWindow(); // 检查更新 autoUpdateApp(mainWindow as BrowserWindow); app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (mainWindow === null) createWindow(); }); }) .catch(console.log); ``` 主线程逻辑和之前不同的地方在于**除了检查更新之外，还需要接收渲染线程的消息，用来处理下载更新以及安装更新的操作。** * 渲染线程 ```js // 渲染线程，也就是前端，进行逻辑交互 import { useEffect, useState } from 'react'; import { Button, Progress } from 'antd'; import styled from 'styled-components'; const Container = styled.div` position: relative; height: 100%; width: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; h1 { margin-top: 20px; font-size: 40px; color: #333; letter-spacing: 10px; } `; export default function Upgrade() { const [progress, setProgress] = useState(0); useEffect(() => { // 跳转到此页面，立刻开始下载 window.electron.ipcRenderer.sendMessage('download-update'); // 同时同步监听下载进度 window.electron.ipcRenderer.on('download-progress', (prog: any) => { setProgress(prog); }); // 监听下载完成 window.electron.ipcRenderer.on('update-downloaded', (info) => { // 提示用户安装更新 console.log('update-downloaded: ', info); // 下载完成设置 progress 为 100 setProgress(100); }); }, []); // 安装更新 const installupdate = () => { window.electron.ipcRenderer.sendMessage('install-update'); }; return ( {progress >= 100 ? (

应用下载完成

) : (

正在下载更新...

)} ); } ``` 渲染线程就是前端实现控制更新提示、下载更新、显示更新进度以及安装更新，完全的前端代码，相信各位前端大佬都能明白。 > 这部分的代码已经合并到了[electron-react-auto-update_feature/fe-optimize 分支](https://github.com/luffyZh/electron-react-auto-update/tree/feature/fe-optimize)，感兴趣的朋友可以自行查看。 ## 总结至此，Electron 应用的自动更新逻辑就讲解完成了，还是那句话，笔者对于这块知识点也是初学探索中，因此有讲解不到的地方大家体谅，有不懂的可以留言交流，目的就是标题 — **希望通过详细的源码以及示例帮助开发者简单的实现 Electron 应用自动推送更新的功能~**

应用下载完成 退出并安装更新

正在下载更新...

应用下载完成