手撸Electron自动更新，再繁琐也要搞懂它

大家好，我是杨成功。

创新互联公司长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为石家庄企业提供专业的成都做网站、网站制作，石家庄网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

Electron 的自动更新不会像 React Native 一样直接下载 Web 代码静默更新，因为它还有主进程（Node.js）代码，因此需要走安装流程。

在 Electron 中，使用第三方包 electron-updater 来实现自动更新的功能。

为什么不用 autoUpdater？

如果细看 Electron 文档，会发现官方提供了一个 autoUpdater 功能来实现自动更新，如图：

相比 autoUpdater，第三方包 electron-updater 有以下优势：

• 不需要搭建专门的更新服务（如 Hazel、Nuts 等）。
• 同时支持 macOS 和 Windows 签名。
• 支持获取下载进度，等等。

最主要的优势还是支持自定义更新服务。将新包上传到自己的静态服务器，比专门搭建一个更新服务更方便。

当然获取下载进度也很重要，否则用户干等着，体验非常差。后面我们会实现下载进度提示。

接入 electron-updater

安装 electron-updater，命令如下：

$ yarn add electron-updater

新建 update.js 文件，在该文件中编写更新逻辑。

定义一个 checkUpdate() 方法，在该方法中执行 checkForUpdatesAndNotify() 来检测是否有新版本。

当更新完成后，执行 quitAndInstall() 方法来安装更新后的应用包。代码如下：

const { autoUpdater } = require('electron-updater');
var mainWin = null;

const checkUpdate = (win, ipcMain) => {
  autoUpdater.autoDownload = true; // 自动下载
  autoUpdater.autoInstallOnAppQuit = true; // 应用退出后自动安装
  mainWin = win;
  // 检测是否有更新包并通知
  autoUpdater.checkForUpdatesAndNotify().catch();
  // 监听渲染进程的 install 事件，触发退出应用并安装
  ipcMain.handle('install', () => autoUpdater.quitAndInstall());
};

module.exports = checkUpdate;

上方代码中，我们通过监听渲染进程的 install 事件来安装新包。目的是在下载完新包后先提醒用户是否安装，用户确认安装后才执行安装，强制安装会影响用户使用。

在主进程中检测更新，并通知用户。

检测更新是在主进程中执行的，因此在主进程中调用 checkUpdate() 方法。

checkUpdate() 方法接收两个参数，分别是渲染进程实例和主进程 IPC。主进程代码如下：

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const preload = path.join(__dirname, './preload.js');
const checkUpdate = require('./update.js');

app.whenReady().then(() => {
  // 创建浏览器窗口（渲染进程）
  let win = new BrowserWindow({
    width: 600,
    height: 600,
    webPreferences: {
      contextIsolation: false,
      preload,
    },
  });
  checkUpdate(win, ipcMain);
});

上方代码中创建了一个浏览器窗口，并绑定了预加载脚本（preload.js）。预加载脚本负责主进程与渲染进程之间的通信。

现在，客户检测更新的逻辑已经基本实现了。但是有新版本的判断依据是什么呢？又从哪里下载新版本呢？

下面我们编写服务器的逻辑。

客户端打包，上传服务器

检测更新的原理，一定是本地应用版本和线上版本的对比，因此需要将应用打包并上传到服务器。

应用打包使用 electron-builder 实现。

安装 electron-builder 模块：

$ yarn add electron-builder

根目录下创建 electron-builder.json5 配置文件：

{
  ...
  "publish": [
    {
      "provider": "generic",
      "url": "https://xxx/updater/ele-app"
    }
  ]
}

配置文件的可选项有很多，publish 选项是自动更新配置。

其中 url 属性最重要，是线上版本和安装包的地址，检测更新就是通过这个地址检测。

打包之后，我们就要将新的安装包和配置上传到服务器，并通过这个地址访问。

应用打包，生成安装包和版本配置。

应用的版本号取自 package.json 文件中的 version 选项。

假设当前版本号是 0.1.7，我们首先更新版本号为 0.1.8，然后使用以下命令打包：

$ electron-builder --win --x64  # 打包 Windows
$ electron-builder --mac --universal # 打包 Mac Intel
$ electron-builder --mac --arm64 # 打包 Mac M1

以 Window 平台为例，打包后会生成多个文件，以下两个需要上传：

• xxx_0.1.8.exe（安装包）
• latest.yml（版本配置）

上传到服务器后，需要通过 publish 中配置的地址访问到，最终访问地址如下：

• https://xxx/updater/ele-app/xxx_0.1.8.exe：下载安装包。
• https://xxx/updater/ele-app/latest.yml：检测版本更新。

可见，latest.yml 文件用于检测更新，发现有更新后才会下载对应的安装包。

配置 nginx 使访问地址生效。

我们将上一步的两个文件上传到服务器的 /data/updater/ele-app 目录下，然后在 nginx 配置中添加一个 location 如下：

location /updater {
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Credentials true;
   add_header Access-Control-Allow-Methods GET,POST;
   alias /data/updater;
   sendfile on;
   autoindex on;
}

使用 "nginx -s reload" 重新加载配置，访问文件的地址便生效了。

将下载进度通知给用户

在客户端的 update.js 文件中，我们触发了检测更新，可以添加事件监听检测结果，如下：

autoUpdater.on('update-available', (info) => {
  console.log('有新版本需要更新');
});
autoUpdater.on('update-not-available', (info) => {
  console.log('无需更新');
});

当有新版本时，应用后台会自动下载（因为我们配置了 autoDownload = true），此时监听下载进度并传给渲染进程，用于将其展示到用户界面上。代码如下：

autoUpdater.on('download-progress', (prog) => {
  mainWin.webContents.send('update', {
    speed: Math.ceil(prog.bytesPerSecond / 1000), // 网速
    percent: Math.ceil(prog.percent), // 百分比
  });
});
autoUpdater.on('update-downloaded', (info) => {
  mainWin.webContents.send('downloaded');
  // 下载完成后强制用户安装，不推荐
  // autoUpdater.quitAndInstall();
});

上面代码中，主进程向渲染进程发送了 update 和 downloaded 事件，这些事件需要经过预加载脚本转发。渲染进程发送的 install 事件同理。

因此，在预加载脚本 preload.js 中添加代码如下：

const { ipcRenderer } = require('electron');

window.elecAPI = {
  toInstall: () => ipcRenderer.invoke('install'),
  onUpdate: (callback) => ipcRenderer.on('update', callback),
  onDownloaded: (callback) => ipcRenderer.on('downloaded', callback),
};

现在，在浏览器窗口加载的 HTML 页面中，我们可以直接使用上述代码中的三个方法。

注意：在预加载脚本中使用 window.elecAPI 的前提是禁用上下文隔离，即配置 contextIsolation: false，否则会报错。

显示下载进度，完成后提示安装

在 JavaScript 中调用预加载脚本中的定义方法，即可获取到安装进度，并主动触发安装。

var update_info = null; // 更新信息

window.elecAPI.onUpdate((_event, info) => {
  update_info = info;
});
window.elecAPI.onDownloaded(() => {
  update_info = null;
  let res = confirm('新版本已下载，是否立即安装？');
  if (res) {
    window.elecAPI.toInstall();
  }
});

如果你使用 Vue 或 React 框架，直接将 update_info 定义为状态，即可在页面中以任意方式显示新应用的下载进度了。

比如下图，是我的更新提醒页面：

下载完成后会弹框询问是否安装，确认后应用会退出并安装；如果取消，下一次打开应用后还会继续询问，直到用户安装。

总结

经过上述的好几个步骤，现在要发布新版本，只需要执行 2 个步骤。

• 更新版本号，打包。
• 上传到服务器。

现在用户重新打开应用程序，新包就会自动下载，并看到下载进度啦！

分享文章：手撸Electron自动更新，再繁琐也要搞懂它
文章路径：http://www.36103.cn/qtweb/news25/28525.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联