[RFC] 105 - 桌面端自动更新模块

[arvinxx]

背景

本 RFC 提案旨在为我们的桌面端应用添加自动更新功能，参考 Follow RSS 阅读器 的实现方式。我们将使用 electron-updater 库实现完整的自动更新流程，并设计双层更新机制（全量应用更新和渲染层热更新）以提高更新效率和用户体验。

设计目标

1. 用户体验优先：更新流程应该对用户友好，提供清晰的更新通知和选项
2. 灵活的更新策略：支持完整应用更新和渲染层热更新两种模式
3. 可靠性与安全性：确保更新过程安全可靠，避免中断用户工作
4. 多平台支持：支持 Windows、macOS 和 Linux 平台的自动更新
5. 可配置性：允许用户自定义更新行为（自动检查、自动下载等）

技术实现

1. 核心更新模块架构

创建一个专门的更新管理模块 UpdaterManager，负责处理自动更新相关的所有逻辑：

apps/desktop/src/main/
  └── core/
      └── UpdaterManager.ts    # 更新管理器
  └── services/
      └── UpdaterSrv.ts        # 更新服务，提供 IPC 接口给渲染进程
  └── modules/
      └── updater/
          ├── configs.ts       # 更新相关配置
          ├── render-hot-updater.ts  # 渲染层热更新实现
          ├── utils.ts         # 更新相关工具函数
          └── github-provider.ts  # 自定义 GitHub Provider（可选）

2. 更新流程设计

2.1 更新初始化

在应用启动时初始化更新管理器：

// apps/desktop/src/main/core/App.ts
export class App {
  // ...现有代码...
  updaterManager: UpdaterManager;

  constructor() {
    // ...现有代码...
    this.updaterManager = new UpdaterManager(this);
    // ...
  }

  bootstrap = async () => {
    // ...现有代码...
    // 初始化更新管理器
    await this.updaterManager.initialize();
    // ...
  };
}

2.2 更新配置

创建更新配置文件：

// apps/desktop/src/main/modules/updater/configs.ts
import { isDev } from '@/const/env';

// GitHub 仓库信息
export const GITHUB_OWNER = 'lobehub';
export const GITHUB_REPO = 'lobe-chat';

// 更新频道（stable, beta, alpha 等）
export const UPDATE_CHANNEL = process.env.UPDATE_CHANNEL || 'stable';

export const updaterConfig = {
  // 是否启用渲染层热更新
  enableRenderHotUpdate: !isDev,
  // 是否启用应用更新
  enableAppUpdate: !isDev,

  // 应用更新配置
  app: {
    // 是否自动检查更新
    autoCheckUpdate: true,
    // 是否自动下载更新
    autoDownloadUpdate: true,
    // 检查更新的时间间隔（毫秒）
    checkUpdateInterval: 60 * 60 * 1000, // 1小时
  },
};

2.3 更新管理器实现

// apps/desktop/src/main/core/UpdaterManager.ts
import { autoUpdater } from 'electron-updater';
import { app, dialog } from 'electron';
import { join } from 'path';
import { mainLogger as logger } from '@/utils/logger';
import {
  GITHUB_OWNER,
  GITHUB_REPO,
  UPDATE_CHANNEL as channel,
  updaterConfig,
} from '@/modules/updater/configs';
import { checkRenderUpdate, updateRender } from '@/modules/updater/render-hot-updater';
import { shouldUpdateApp } from '@/modules/updater/utils';
import type { App } from './App';

export class UpdaterManager {
  private app: App;
  private checking: boolean = false;
  private downloading: boolean = false;
  private updateAvailable: boolean = false;

  constructor(app: App) {
    this.app = app;
  }

  public initialize = async () => {
   
  };

  /**
   * 检查更新
   */
  public checkForUpdates = async () => {
    
  };

  /**
   * 下载更新
   */
  public downloadUpdate = async () => {
    
  };

  /**
   * 安装更新
   */
  public quitAndInstall = () => {
    
  };

  private registerEvents() {
    
    });

    // 更新错误事件
    autoUpdater.on('error', (error) => {
    
    });
  }
}

3. 渲染层热更新实现

// apps/desktop/src/main/modules/updater/render-hot-updater.ts
import { app } from 'electron';
import { join } from 'path';
import fs from 'fs-extra';
import { https } from 'follow-redirects';
import { Extract } from 'unzipper';
import { URL } from 'url';
import { mainLogger as logger } from '@/utils/logger';
import { GITHUB_OWNER, GITHUB_REPO, UPDATE_CHANNEL } from './configs';

// 渲染层热更新 manifest 文件网址
const MANIFEST_URL = `https://raw.githubusercontent.com/${GITHUB_OWNER}/${GITHUB_REPO}/${UPDATE_CHANNEL}/release/render/manifest.json`;

// 渲染层资源包网址模板
const RENDER_ARCHIVE_URL = `https://github.com/${GITHUB_OWNER}/${GITHUB_REPO}/releases/download/v{version}/render-{version}.zip`;

interface RenderManifest {
  version: string;
  mainHash: string;
  commit: string;
}

/**
 * 获取最新的渲染层 manifest
 */
const getLatestRenderManifest = async (): Promise<RenderManifest | null> => {
  
};

/**
 * 检查渲染层是否需要更新
 */
export const checkRenderUpdate = async (): Promise<boolean> => {
  
};

/**
 * 下载并更新渲染层
 */
export const updateRender = async (): Promise<boolean> => {
  
};

4. 更新辅助函数

// apps/desktop/src/main/modules/updater/utils.ts
import semver from 'semver';

/**
 * 判断是否需要应用更新而非仅渲染层更新
 * @param currentVersion 当前版本
 * @param nextVersion 新版本
 * @returns 是否需要应用更新
 */
export const shouldUpdateApp = (currentVersion: string, nextVersion: string): boolean => {
  // 如果版本号包含 .app 后缀，强制进行应用更新
  if (nextVersion.includes('.app')) {
    return true;
  }
  
  try {
    // 解析版本号
    const current = semver.parse(currentVersion);
    const next = semver.parse(nextVersion);
    
    if (!current || !next) return true;
    
    // 主版本号或次版本号变更时，需要进行应用更新
    if (current.major !== next.major || current.minor !== next.minor) {
      return true;
    }
    
    // 仅修订版本号变更，优先进行渲染层热更新
    return false;
  } catch (error) {
    // 解析失败时，默认进行应用更新
    return true;
  }
};

5. IPC 服务实现

// apps/desktop/src/main/services/UpdaterSrv.ts
import { IPCEvent } from '@lobechat/electron-server-ipc';
import { mainLogger as logger } from '@/utils/logger';
import type { App } from '@/core/App';

export default class UpdaterService {
  private app: App;

  constructor(app: App) {
    this.app = app;
  }

  /**
   * 检查更新
   */
  @IPCEvent('updater:check-update', 'client')
  async checkForUpdates() {
    logger.info('[UpdaterSrv] Check for updates requested');
    await this.app.updaterManager.checkForUpdates();
    return { success: true };
  }

  /**
   * 下载更新
   */
  @IPCEvent('updater:download-update', 'client')
  async downloadUpdate() {
    logger.info('[UpdaterSrv] Download update requested');
    await this.app.updaterManager.downloadUpdate();
    return { success: true };
  }

  /**
   * 安装更新
   */
  @IPCEvent('updater:install-update', 'client')
  quitAndInstall() {
    logger.info('[UpdaterSrv] Install update requested');
    this.app.updaterManager.quitAndInstall();
    return { success: true };
  }

  /**
   * 关闭应用并安装更新
   */
  @IPCEvent('updater:quit-and-install', 'client')
  quitAndInstallUpdate() {
    logger.info('[UpdaterSrv] Quit and install update requested');
    this.app.updaterManager.quitAndInstall();
    return { success: true };
  }
}

6. 渲染进程更新 UI 组件

在渲染进程中，需要创建更新通知和进度展示组件。

发布和构建配置

需要更新 electron-builder 配置文件，添加自动更新相关设置：

// apps/desktop/electron-builder.js
module.exports = {
  // ...现有配置...
  
  // 应用程序 ID，需要保持一致
  appId: 'com.lobehub.lobehub-desktop',
  
  // 发布配置
  publish: [
    {
      provider: 'github',
      owner: 'lobehub',
      repo: 'lobe-chat',
      releaseType: 'release',
    },
  ],
  
  // 构建配置
  mac: {
    // ...现有配置...
    // 公证配置
    hardenedRuntime: true,
    gatekeeperAssess: false,
    entitlements: 'build/entitlements.mac.plist',
    entitlementsInherit: 'build/entitlements.mac.plist',
  },
  
  // Windows 配置
  win: {
    // ...现有配置...
    // 为 Windows 设置自动更新
    publisherName: ['LobeHub'],
  },
  
  // Linux 配置
  linux: {
    // ...现有配置...
  },
  
  // 自动更新配置
  // https://www.electron.build/configuration/configuration#configuration
  afterSign: 'scripts/notarize.js',  // macOS 公证脚本
};

渲染层热更新的实现

为了支持渲染层热更新，我们需要在构建流程中生成渲染层资源包和 manifest 文件：

1. 添加构建脚本，在发布时创建渲染层资源包
2. 生成 manifest.json 文件，包含版本、哈希等信息
3. 在 GitHub Release 中上传资源包

实施计划

1. 阶段一：基础更新功能

   • 实现 UpdaterManager 类
   • 添加 IPC 通信接口
   • 实现基本的更新通知 UI

2. 阶段二：渲染层热更新

   • 实现渲染层更新逻辑
   • 更新构建脚本生成渲染资源包
   • 添加版本号判断逻辑

3. 阶段三：测试和优化

   • 多平台测试更新流程
   • 优化用户体验
   • 完善错误处理

[Sun-drenched]

话说以后桌面端和Web端bug修补和新功能推送会保持一致吗？

[arvinxx]

是的，现在已经能做到一次发布，docker、desktop 都会按最新版做构建和发布。

所以为了解决频繁发布带来的反复下载安装包的糟糕体验，这个自动更新模块就要实现点一下就能更新的效果