import { dialog, shell, app } from "electron"
import semver from "semver" // 引入 semver 库用于版本比较
import fetch from "node-fetch" // 假设使用 node-fetch 发送网络请求
 
// 从 package.json 获取当前应用版本
const currentVersion = app.getVersion()
// 定义软件发布页面的 URL
const releasePageUrl = "https://yourapp.com/releases/latest"
// 定义获取最新版本信息的 API 地址
const latestVersionApi = "https://api.yourapp.com/latest-version"
 
// 检查更新函数
async function checkAppUpdate() {
  try {
    // 1. 从服务器获取最新版本信息
    const response = await fetch(latestVersionApi)
    if (!response.ok) {
      throw new Error(`Failed to fetch latest version info: ${response.statusText}`)
    }
    const latestVersionInfo = await response.json()
    const latestVersion = latestVersionInfo.version
 
    // 2. 比较版本号
    if (semver.gt(latestVersion, currentVersion)) {
      // 3. 如果有新版本，提示用户
      const { response: userChoice } = await dialog.showMessageBox({
        type: "info",
        title: "发现新版本",
        message: `我们发布了新版本 ${latestVersion}，是否立即前往下载？`,
        buttons: ["立即更新", "稍后提醒"],
        defaultId: 0,
        cancelId: 1
      })
 
      // 4. 如果用户选择更新，则打开下载页面
      if (userChoice === 0) {
        await shell.openExternal(releasePageUrl)
      }
    }
  } catch (error) {
    console.error("检查更新失败:", error)
    // 在生产环境中，可以考虑加入更完善的错误处理和日志记录
  }
}
 
// 在应用启动并准备就绪后执行检查
app.whenReady().then(() => {
  checkAppUpdate()
})

// vue.config.js 或 electron-builder.json5
{
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // ... 其他配置
        extraResources: [{
          // from: 源文件或目录
          // to: 目标目录（相对于 resources 目录）
          // filter: 过滤规则，! 表示排除
          from: "dist_electron/bundled", // 将渲染进程的构建输出目录
          to: "app.asar.unpacked",     // 复制到 app.asar.unpacked 目录
          filter: [
            "!**/icons",         // 排除 icons 目录
            "!**/preload.js",    // 排除 preload 脚本
            "!**/node_modules",  // 排除 node_modules
            "!**/background.js"  // 排除主进程入口文件
          ]
        }],
        // files 字段用于指定哪些文件需要被打包到 app.asar 中
        files: [
          "**/icons/*",
          "**/preload.js",
          "**/node_modules/**/*",
          "**/background.js"
        ]
      },
    }
  }
}

app.asar.unpacked
├── css
│   └── index.b2d625b8.css
├── index.html
├── js
│   ├── chunk-vendors.96b10160.js
│   ├── chunk-vendors.96b10160.js.map
│   ├── index.cfe3540f.js
│   └── index.cfe3540f.js.map
└── package.json

// background.js
import { createProtocol } from "vue-cli-plugin-electron-builder/lib"
 
// ...
if (process.env.WEBPACK_DEV_SERVER_URL) {
  // 开发环境
  await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
} else {
  // 生产环境
  createProtocol("app")
  win.loadURL("app://./index.html")
}

// background.js
import { app, BrowserWindow, protocol } from "electron"
import path from "path"
 
const isDevelopment = process.env.NODE_ENV !== "production"
 
// ...
 
async function createWindow() {
  const win = new BrowserWindow(/* ... */)
 
  if (isDevelopment) {
    // 开发环境：直接加载 dev server
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
  } else {
    // 生产环境：加载外置的渲染进程文件
    const indexPath = path.join(
      process.resourcesPath,
      "app.asar.unpacked",
      "index.html"
    )
    win.loadFile(indexPath)
  }
}

import download from "download"
import path from "path"
import fs from "fs-extra" // 使用 fs-extra 增强文件操作能力
 
// 远程资源包的 URL
const remotePackageUrl = "https://your-server.com/latest-renderer.zip"
// 定义解压的目标路径，即渲染进程资源目录
const targetPath = path.join(process.resourcesPath, "app.asar.unpacked")
// 临时下载目录
const tempDir = path.join(app.getPath("temp"), "update-package")
 
async function applyUpdate() {
  try {
    // 1. 清空临时目录和目标目录
    await fs.emptyDir(tempDir)
 
    // 2. 下载资源包到临时目录
    await download(remotePackageUrl, tempDir, {
      extract: true // download 库支持直接解压
    })
 
    // 3. 将解压后的文件移动到目标目录
    // 注意：这里需要根据实际的压缩包结构调整
    const sourceDir = path.join(tempDir, "dist") // 假设 zip 包内有个 dist 文件夹
    await fs.copy(sourceDir, targetPath, { overwrite: true })
 
    // 4. 清理临时文件
    await fs.remove(tempDir)
 
    // 5. 提示用户重启应用
    dialog
      .showMessageBox({
        type: "info",
        title: "更新完成",
        message: "新版本已准备就绪，请重启应用以体验。"
      })
      .then(() => {
        app.relaunch()
        app.exit()
      })
  } catch (error) {
    console.error("增量更新失败:", error)
    // 此处应有错误处理和回滚机制
  }
}

// vue.config.js 或 electron-builder.json5
{
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        asar: false, // 完全禁用 asar 打包
        // ... 其他配置
      },
    }
  }
}

resources/
└── app/
    ├── background.js
    ├── index.html
    ├── package.json
    ├── preload.js
    └── renderer/
        ├── css/
        └── js/

// package.json 或 electron-builder.json5
{
  "build": {
    "publish": [
      {
        "provider": "github",
        "owner": "your-github-username",
        "repo": "your-repo-name"
      }
    ],
    // ...
  }
}

{
  "build": {
    "publish": [
      {
        "provider": "generic",
        "url": "https://your-update-server.com/downloads/"
      }
    ],
    // ...
  }
}

version: 1.2.3
files:
  - url: MyApp-1.2.3.exe
    sha512: ...
    size: ...
path: MyApp-1.2.3.exe
sha512: ...
releaseDate: "2023-12-25T12:00:00.000Z"

// 切换到 beta 渠道来检查测试版更新
autoUpdater.channel = "beta"
autoUpdater.checkForUpdates()

version: 1.2.4
files:
  # ...
path: MyApp-1.2.4.exe
sha512: ...
releaseDate: "2023-12-26T10:00:00.000Z"
releaseInfo:
  stagedRollout: 25 # 将此更新推送给 25% 的用户

// src/main/updater.js
import { autoUpdater } from "electron-updater"
import { app, dialog, BrowserWindow } from "electron"
 
class AppUpdater {
  constructor() {
    // 配置 autoUpdater
    this.configure()
    // 注册事件监听
    this.registerEvents()
  }
 
  configure() {
    // 禁用自动下载，改为手动触发，给用户更多控制权
    autoUpdater.autoDownload = false
    // 退出时自动安装更新
    autoUpdater.autoInstallOnAppQuit = true
 
    // 在开发模式下，可能需要设置一些模拟更新的路径
    if (process.env.NODE_ENV === "development") {
      autoUpdater.updateConfigPath = path.join(__dirname, "dev-app-update.yml")
    }
  }
 
  registerEvents() {
    // 1. 检查更新出错
    autoUpdater.on("error", (error) => {
      console.error("更新失败", error)
      dialog.showErrorBox(
        "更新失败",
        error.message || "检查更新时发生未知错误，请稍后重试。"
      )
    })
 
    // 2. 正在检查更新
    autoUpdater.on("checking-for-update", () => {
      console.log("正在检查更新...")
      // 可以向渲染进程发送消息，在界面上显示提示
      this.sendUpdateMessage({ event: "checking-for-update" })
    })
 
    // 3. 检测到新版本
    autoUpdater.on("update-available", (info) => {
      console.log(`发现新版本: ${info.version}`)
      this.sendUpdateMessage({ event: "update-available", data: info })
 
      // 提示用户是否下载更新
      dialog
        .showMessageBox({
          type: "info",
          title: "应用更新",
          message: `发现新版本 ${info.version}，是否立即下载？`,
          buttons: ["立即下载", "稍后"],
          defaultId: 0,
          cancelId: 1
        })
        .then(({ response }) => {
          if (response === 0) {
            autoUpdater.downloadUpdate()
          }
        })
    })
 
    // 4. 未发现新版本
    autoUpdater.on("update-not-available", (info) => {
      console.log("当前已是最新版本。")
      this.sendUpdateMessage({ event: "update-not-available", data: info })
    })
 
    // 5. 下载进度
    autoUpdater.on("download-progress", (progressObj) => {
      this.sendUpdateMessage({ event: "download-progress", data: progressObj })
    })
 
    // 6. 下载完成
    autoUpdater.on("update-downloaded", (info) => {
      console.log("新版本下载完成，将在退出时自动安装。")
      this.sendUpdateMessage({ event: "update-downloaded", data: info })
      dialog
        .showMessageBox({
          title: "安装新版本",
          message:
            "更新已下载完成，应用将在退出后自动安装。是否立即重启以完成更新？",
          buttons: ["立即重启", "稍后重启"],
          defaultId: 0,
          cancelId: 1
        })
        .then(({ response }) => {
          if (response === 0) {
            // 调用 quitAndInstall 会关闭所有窗口，然后自动安装并重启应用
            autoUpdater.quitAndInstall()
          }
        })
    })
  }
 
  // 外部调用的检查更新方法
  checkForUpdates() {
    autoUpdater.checkForUpdates()
  }
 
  /**
   * @description 向渲染进程发送消息
   * @param {object} message - 要发送的消息体，通常包含事件名称和数据
   */
  sendUpdateMessage(message) {
    // BrowserWindow.getAllWindows() 获取当前所有打开的窗口
    BrowserWindow.getAllWindows().forEach((win) => {
      // win.webContents.send 是主进程向特定渲染进程发送消息的方法
      win.webContents.send("update-message", message)
    })
  }
}
 
export default AppUpdater

// background.js
import { app } from "electron"
import AppUpdater from "./updater"
 
// ... 创建窗口等逻辑
 
app.whenReady().then(() => {
  // ...
  const updater = new AppUpdater()
  // 在合适的时机（例如，用户点击菜单或应用启动后）检查更新
  updater.checkForUpdates()
})

// background.js
const win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, "preload.js")
    // contextIsolation: true, // 默认开启，为了安全
    // nodeIntegration: false, // 默认关闭，为了安全
  }
})

// preload.js
const { contextBridge, ipcRenderer } = require("electron")
 
contextBridge.exposeInMainWorld("electronAPI", {
  // 监听来自主进程的更新消息
  onUpdateMessage: (callback) => {
    ipcRenderer.on("update-message", (event, message) => {
      callback(message)
    })
  }
})

// renderer.js (例如，在一个 React 组件中)
import React, { useEffect, useState } from "react"
 
function UpdateNotification() {
  const [message, setMessage] = useState("")
  const [progress, setProgress] = useState(null)
 
  useEffect(() => {
    // 通过 preload 暴露的 API 监听消息
    window.electronAPI.onUpdateMessage((msg) => {
      console.log("收到主进程消息:", msg)
      switch (msg.event) {
        case "checking-for-update":
          setMessage("正在检查更新...")
          break
        case "update-available":
          setMessage(`发现新版本 ${msg.data.version}，等待用户确认...`)
          break
        case "update-not-available":
          setMessage("当前已是最新版本。")
          // 短暂显示后可以隐藏消息
          setTimeout(() => setMessage(""), 3000)
          break
        case "download-progress":
          setMessage("正在下载更新...")
          setProgress(msg.data.percent.toFixed(2))
          break
        case "update-downloaded":
          setMessage(
            "更新下载完成！将在您重启应用后自动安装。或者点击下方按钮立即重启。"
          )
          // 可以在此显示一个“立即重启”的按钮
          break
        case "error":
          setMessage(`更新出错: ${msg.data.message}`)
          break
      }
    })
  }, [])
 
  if (!message) return null
 
  return (
    <div className="update-notification">
      <p>{message}</p>
      {progress && <progress value={progress} max="100"></progress>}
    </div>
  )
}
 
export default UpdateNotification

 
通过这种方式，你可以灵活地控制哪些版本需要强制更新，确保所有用户都能及时获得关键修复。
 
### 4.5 优缺点分析与适用场景
 
`electron-updater` 提供了一套功能完备、高度集成的自动更新解决方案，是目前社区的主流选择。
 
- **优点**：
  - **用户体验极佳**：支持后台静默下载、增量更新（在支持的平台上），对用户的干扰降到最低。
  - **功能强大**：内置了对多平台、代码签名、发布渠道、分阶段发布等高级功能的支持。
  - **集成度高**：与 `electron-builder` 无缝集成，配置简单，开箱即用。
  - **社区活跃**：拥有庞大的用户基础和活跃的社区支持，遇到问题容易找到解决方案。
 
- **缺点**：
  - **灵活性受限**：高度封装也意味着定制化能力相对较弱。对于需要深度自定义更新流程（例如，更新非 `asar` 内的文件）的场景，可能需要更底层的方案。
  - **依赖构建工具**：强依赖 `electron-builder`，如果你的项目使用其他构建工具，集成会比较困难。
  - **问题排查可能复杂**：由于内部逻辑复杂，一旦出现问题，排查错误的根本原因可能需要对 `electron-updater` 的工作原理有较深的理解。
 
- **适用场景**：
  - **所有面向普通用户的桌面应用**：无论是商业软件还是免费工具，只要希望提供流畅、无感的更新体验，`electron-updater` 都是首选。
  - **需要快速迭代和高更新率的项目**：自动更新机制能确保大部分用户始终使用最新版本，便于新功能的推广和旧问题的修复。
  - **追求开发效率的团队**：相比于自研更新方案，`electron-updater` 能节省大量的开发和维护成本。
 
## 总结
 
本小节我们详细介绍了 Electron 常见的三种更新方式：手动更新、覆盖式更新、自动更新。
 
手动更新又称全量更新，是一种比较传统的更新方式，其优势是稳定、简单。缺点就是过程繁琐、慢、影响使用、更新率低。适用于低频更新、用户粘性高、作为各种升级技术的降级方案。
 
覆盖式更新（增量更新）其优势就是更新速度快，但是实现比较复杂、稳定性差、写文件容易失败，比较适合 `hotfix` 打补丁式的发布更新。
 
自动更新比较稳定、快、而且对用户的打扰少，但是整体实现稍微复杂，一般适用于高频更新软件、体验要求高的场景。
 
至此，我们探讨了从简单的手动全量更新，到灵活的文件覆盖式增量更新，再到体验最佳的 `electron-updater` 自动更新方案。选择哪种策略取决于你的应用类型、迭代频率、团队资源和对用户体验的追求。一个健壮的更新系统是桌面应用成功的关键一环，希望本章的内容能为你构建可靠的应用更新机制提供坚实的基础。
 
## 5. 差量更新
 
差量更新（Delta Update）是一种高级的更新策略，它只下载新旧版本之间的差异部分，而不是完整的安装包。这可以显著减少下载量，提升更新速度，特别适合频繁更新的大型应用。
 
### 5.1 工作原理
 
```mermaid
flowchart LR
    A[旧版本 v1.0.0] --> B[差分算法]
    C[新版本 v1.1.0] --> B
    B --> D[差量包 delta]
    D --> E[客户端下载]
    A --> F[本地应用]
    E --> F
    F --> G[合并补丁]
    G --> H[新版本 v1.1.0]

# electron-builder.yml
nsis:
  differentialPackage: true  # 启用差量更新

MyApp-1.0.0-to-1.1.0-full.nupkg      # 完整包
MyApp-1.0.0-to-1.1.0-delta.nupkg     # 差量包

mac:
  target:
    - target: zip    # 用于差量更新
      arch:
        - x64
        - arm64
    - target: dmg    # 用于首次安装

// 使用 electron-differential-updater
const { MacUpdater } = require('electron-differential-updater')
 
class MacDifferentialUpdater {
  constructor() {
    this.updater = new MacUpdater()
    this.configureUpdater()
  }
 
  configureUpdater() {
    this.updater.logger = log
    this.updater.autoDownload = false
 
    this.updater.on('update-available', async (info) => {
      // 检查是否可以差量更新
      const canDelta = await this.checkDeltaAvailability(info)
      if (canDelta) {
        await this.updater.downloadDelta()
      } else {
        await this.updater.downloadUpdate()
      }
    })
  }
}

import { createHash } from 'crypto'
import fetch from 'node-fetch'
import fs from 'fs-extra'
import path from 'path'
 
class DeltaUpdater {
  constructor(options) {
    this.manifestUrl = options.manifestUrl
    this.deltaUrl = options.deltaUrl
    this.appPath = options.appPath
  }
 
  // 生成文件清单（包含文件路径和 MD5）
  async generateManifest(dir) {
    const files = await this.walkDir(dir)
    const manifest = {}
 
    for (const file of files) {
      const content = await fs.readFile(file)
      const hash = createHash('md5').update(content).digest('hex')
      manifest[path.relative(dir, file)] = hash
    }
 
    return manifest
  }
 
  // 比较本地和服务端清单，获取需要更新的文件列表
  async getChangedFiles() {
    const localManifest = await this.generateManifest(this.appPath)
    const response = await fetch(this.manifestUrl)
    const remoteManifest = await response.json()
 
    const changedFiles = []
    const deletedFiles = []
    const addedFiles = []
 
    // 检查修改和删除
    for (const [file, hash] of Object.entries(localManifest)) {
      if (!remoteManifest[file]) {
        deletedFiles.push(file)
      } else if (remoteManifest[file] !== hash) {
        changedFiles.push(file)
      }
    }
 
    // 检查新增
    for (const file of Object.keys(remoteManifest)) {
      if (!localManifest[file]) {
        addedFiles.push(file)
      }
    }
 
    return { changedFiles, deletedFiles, addedFiles }
  }
 
  // 下载并应用更新
  async applyDelta() {
    const { changedFiles, deletedFiles, addedFiles } = await this.getChangedFiles()
 
    // 删除已移除的文件
    for (const file of deletedFiles) {
      await fs.remove(path.join(this.appPath, file))
    }
 
    // 下载变更的文件
    const filesToDownload = [...changedFiles, ...addedFiles]
    for (const file of filesToDownload) {
      const url = `${this.deltaUrl}/${file}`
      const response = await fetch(url)
      const buffer = await response.buffer()
      await fs.ensureDir(path.dirname(path.join(this.appPath, file)))
      await fs.writeFile(path.join(this.appPath, file), buffer)
    }
 
    console.log(`更新完成: ${changedFiles.length} 个文件修改, ${addedFiles.length} 个文件新增, ${deletedFiles.length} 个文件删除`)
  }
 
  // 递归遍历目录
  async walkDir(dir, fileList = []) {
    const files = await fs.readdir(dir)
    for (const file of files) {
      const filePath = path.join(dir, file)
      const stat = await fs.stat(filePath)
      if (stat.isDirectory()) {
        await this.walkDir(filePath, fileList)
      } else {
        fileList.push(filePath)
      }
    }
    return fileList
  }
}
 
export default DeltaUpdater

class HybridUpdater {
  constructor() {
    this.primaryUpdater = new ElectronUpdater()
    this.fallbackUrl = 'https://example.com/downloads'
  }
 
  async checkAndUpdate() {
    try {
      // 尝试自动更新
      await this.primaryUpdater.checkForUpdates()
    } catch (error) {
      console.error('自动更新失败，提供手动下载')
      // 显示手动下载对话框
      await this.showManualDownloadDialog()
    }
  }
 
  async showManualDownloadDialog() {
    const { response } = await dialog.showMessageBox({
      type: 'info',
      title: '更新可用',
      message: '检测到新版本，是否前往下载页面？',
      buttons: ['前往下载', '稍后提醒'],
      defaultId: 0
    })
 
    if (response === 0) {
      shell.openExternal(this.fallbackUrl)
    }
  }
}

// 添加详细日志
autoUpdater.logger = require('electron-log')
autoUpdater.logger.transports.file.level = 'debug'
 
// 检查配置
console.log('Update config path:', autoUpdater.updateConfigPath)
console.log('Current version:', app.getVersion())
 
// 手动检查更新
autoUpdater.checkForUpdates().catch(err => {
  console.error('Check failed:', err)
})

// 实现断点续传
autoUpdater.on('download-progress', (progress) => {
  // 保存进度
  store.set('updateProgress', {
    transferred: progress.transferred,
    total: progress.total,
    percent: progress.percent
  })
})
 
// 恢复下载
autoUpdater.on('error', async (error) => {
  if (error.message.includes('DOWNLOAD_INTERRUPTED')) {
    const savedProgress = store.get('updateProgress')
    // 尝试重新下载
    await autoUpdater.downloadUpdate()
  }
})

// 确保 hardenedRuntime 启用
mac:
  hardenedRuntime: true
  gatekeeperAssess: false
  entitlements: "build/entitlements.mac.plist"
  entitlementsInherit: "build/entitlements.mac.plist"
 
// 确保完成公证
afterSign: "scripts/notarize.js"

win:
  target: nsis
  signingHashAlgorithms:
    - sha256
  certificateFile: path/to/cert.pfx
  certificatePassword: ${env.CERT_PASSWORD}
  rfc3161TimeStampServer: http://timestamp.digicert.com
  publisherName: "Your Company Name"

// 在 latest.yml 中设置回滚版本
// latest-rollback.yml
version: 1.0.0  # 回滚到的版本
rollbackFrom: 1.1.0  # 从哪个版本回滚
 
// 实现回滚逻辑
async function rollbackToVersion(targetVersion) {
  const downloadUrl = `https://example.com/downloads/app-${targetVersion}.exe`
  // 下载旧版本安装包
  await download(downloadUrl, tempDir)
  // 执行安装
  shell.openPath(installerPath)
  // 退出当前应用
  app.quit()
}