Electron 原理浅析

1. 架构组成

Electron 主要由三部分组成：

• 主进程：负责管理应用的生命周期，创建和控制窗口，处理与操作系统的交互。主进程运行在 Node.js 环境中，允许直接使用 Node.js 的 API。

• 渲染进程：每个窗口有自己的渲染进程，用于显示用户界面。基于 Chromium，支持标准 Web API，运行环境隔离，无法直接与主进程的 Node.js API 交互。

• IPC：主进程与渲染进程通过 IPC 通信，允许发送消息和数据，提升应用结构清晰度与安全性。

2. 渲染流程

• Chromium 引擎：负责渲染 HTML、CSS 和 JavaScript 为用户界面，每次加载新网页或界面时创建新渲染进程。

• Web API：渲染进程中支持 DOM 操作、XHR 请求等 Web API，可通过 Electron API 访问系统功能。

3. 事件驱动

Electron 基于事件驱动模型，使用 Node.js 事件机制处理异步操作，开发者可注册监听器响应事件。

4. 安全性

Electron 提供以下安全机制：

• 上下文隔离：防止网页直接访问 Node.js API。

• 内容安全策略：控制资源加载方式，降低 XSS 攻击风险。

• 权限控制：应用可设置权限，保护敏感数据和系统功能。

5. 打包与分发

• 使用 Electron Forge 等工具打包应用，生成跨平台安装文件。

• 打包内容：HTML、CSS、JavaScript 和静态资源。

• 确保目标平台支持 Chromium 和 Node.js 运行时环境。

6. 原生模块拓展

原生模块拓展基于 Node 环境，而 Node 对于宿主系统级的拓展可以通过 C++ 实现，最靠谱的方案是：node-gyp 和 node-pre-gyp，构建 C++ 模块从而支持更多原生能力。

https://www.electronjs.org/docs/latest/tutorial/using-native-node-modules
https://github.com/nodejs/node-gyp

7. 增量更新实现

为了更新能够最小化下载内容，我们需要考虑增量更新机制。

https://github.com/electron-userland/electron-builder/blob/b06c5effd35051c6b953696aec90b68a67456bed/packages/electron-updater/src/AppUpdater.ts#L738

要深入了解 Electron 的增量更新过程，特别是与 electron-builder 和 electron-updater 相关的内容生成和下载机制，我们可以从以下几个方面进行详细分析：

7.1. 更新的基本流程

在 Electron 应用中，更新的基本流程如下：

• 版本检查：应用启动时，autoUpdater 会检查远程版本。

• 增量包生成：如果发现有新版本，将生成增量更新包。

• 下载更新：将差异包下载到本地。

• 安装更新：下载完成后，用户会被提示重启应用以应用更新。

7.2. 增量更新包的生成

增量更新包的生成主要是通过 electron-builder 中的 build 功能实现的。具体来说，增量更新的包生成通常使用以下步骤：

• 比较版本：在新版本构建时，electron-builder 会比较旧版本和新版本的文件差异。

• 生成差异文件：使用工具生成只包含变化部分的差异文件。

在 GitHub 的 electron-builder 源码中，相关的差异文件生成逻辑是在 publish 和 update 事件触发时实现的。在构建新版本时，electron-builder 会自动计算出需要下载的文件和差异。

以下是 electron-updater 中生成增量更新的相关逻辑示例：

private async generateDiffs(oldVersion: string, newVersion: string): Promise<void> {
    const diffFiles = await this.createDiffFiles(oldVersion, newVersion);
    // 将生成的差异文件进行处理，例如上传到服务器
}

这个方法会调用 createDiffFiles，并传入旧版本和新版本的文件列表，从而生成需要的差异包。

7.3. 下载增量更新

在用户接受更新后，autoUpdater 会负责下载新版本或差异包。具体过程如下：

• 下载管理：通过 HTTP 请求下载文件。electron-updater 使用 electron-builder 提供的功能来管理下载。

• 进度监控：在下载过程中，可以通过事件监听来获取下载进度。

以下是下载和安装增量更新的关键逻辑：

autoUpdater.on('update-downloaded', async (info) => {
    // 下载完成后，提示用户重启
    const response = await dialog.showMessageBox({
        type: 'info',
        title: 'Update Available',
        message: 'A new version has been downloaded. Restart now?'
    });

    if (response.response === 0) {
        autoUpdater.quitAndInstall(); // 安装更新并重启
    }
});

8. 执行流程时序图