electron应用版本更新添加releaseNotes(更新日志)的N种方法

1,883 阅读3分钟

前言

目前electron应用一般是使用electron-builder进行打包,使用electron-updater进行版本更新,客户端检测到新版本后一般会弹窗提示用户有新版本+展示更新日志,这就需要我们打包的时候将版本更新日志(releaseNotes)添加到latest.yml或latest-mac.yml文件中,然后客户端检测到新版本后就能够获取到该更新日志并展示给用户。通过分析electron-builder源码,总结出几种添加releaseNotes的方法。

version: 1.0.0
files:
  - url: electron-start_setup_1.0.0.exe
    sha512: +yJuqcWDdhWGLvuLiJF22jFKM+uQfihiQ8FH35E7RoyyFjOiFZeGu57gE7UPlceDHfm9qyQOYmUvuEzjq/u3zw==
    size: 61383636
path: electron-start_setup_1.0.0.exe
sha512: +yJuqcWDdhWGLvuLiJF22jFKM+uQfihiQ8FH35E7RoyyFjOiFZeGu57gE7UPlceDHfm9qyQOYmUvuEzjq/u3zw==
releaseNotes: "修复断网时离开会议失败的问题\r\n修复会议中受开关麦影响听不到的问题\r\n新增动态转发功能\r\n修复Bug,优化UI"
releaseDate: '2022-05-08T13:58:15.227Z'

适用范围

  • 项目使用electron-builder打包
  • provider为generic
//package.json
{
  "build": {
    "publish": [
      {
        "provider": "generic",
        "url": "xxxxxx"
      }
    ]
  }
}

方法一: 在package.json文件build节点下添加releaseNotes信息

示例:

//package.json
{
  "build": {
    "releaseInfo":{
      "releaseNotes":"修复断网时离开会议失败的问题\r\n修复会议中受开关麦影响听不到的问题\r\n新增动态转发功能\r\n修复Bug,优化UI"
    }
  }
}

方法二: 在package.json文件build节点下添加releaseNotesFiles信息(推荐使用)

示例:

//package.json
{
  "build": {
    "releaseInfo":{
      "releaseNotesFile":"release-1.0.0.md"
    }
  }
}

releaseNotesFile字段指定更新日志文件为release-1.0.0.md,其内容如下:

修复断网时离开会议失败的问题
修复会议中受开关麦影响听不到的问题
新增动态转发功能
修复Bug,优化UI

使用这种方法添加releaseNotes,可自定义更新日志文件名称,如每发布一个版本就添加一个更新日志文件(release-1.0.0.md,release-1.0.1.md...),便于以后查看每一个版本更新日志。

方法三:在打包输出目录下创建文件release-notes.md

如指定了输出目录为build,则在build目录下创建名称为release-notes.md的文件。

可取的文件名为:

  • release-notes.md
  • release-notes-(mac|windows|linux).md
  • .....

方法四:直接修改打包生成的latest.yml或latest-mac.yml,添加releaseNotes字段(不建议使用)

客户端实现

使用electron-updater检查更新获取更新日志,弹窗提示用户有新版本

const { autoUpdater } = require('electron-updater')

//检测到新版本时触发
autoUpdater.on('update-available', function (info) {

    //获取更新日志
    var releaseNotes=info.releaseNotes
    
    //弹窗提示用户
    const dialogOpts = {
        type: 'info',
        buttons: ['立即下载','稍后'],
        title: '版本更新',
        textWidth: 250,
        message: '发现新版本'+info.version+"("+(info.files[0].size/1024/1024).toFixed(2)+"MB)"+"\r\n\r\n"+releaseNotes,
        cancelId: 1
      }

    dialog.showMessageBox(dialogOpts).then((returnValue) => {
        if (returnValue.response ===0) {
           autoUpdater.downloadUpdate();
        }
    })
});

实现效果如下:

macOS系统Windows系统
mac.pngwindows.png

相关源码分析

electron-builder打包时获取releaseNotes对应的代码文件为packages/app-builder-lib/src/publish/updateInfoBuilder.ts,具体代码如下:

async function getReleaseInfo(packager: PlatformPackager<any>) {
  const releaseInfo: ReleaseInfo = { ...(packager.platformSpecificBuildOptions.releaseInfo || packager.config.releaseInfo) }
  if (releaseInfo.releaseNotes == null) {
    const releaseNotesFile = await packager.getResource(
      releaseInfo.releaseNotesFile,
      `release-notes-${packager.platform.buildConfigurationKey}.md`,
      `release-notes-${packager.platform.name}.md`,
      `release-notes-${packager.platform.nodeName}.md`,
      "release-notes.md"
    )
    const releaseNotes = releaseNotesFile == null ? null : await readFile(releaseNotesFile, "utf-8")
    // to avoid undefined in the file, check for null
    if (releaseNotes != null) {
      releaseInfo.releaseNotes = releaseNotes
    }
  }
  delete releaseInfo.releaseNotesFile
  return releaseInfo
}
  • 优先从releaseInfo.releaseNotes字段中取值(方法一)
  • 如果releaseInfo.releaseNotes未定义,则从releaseInfo.releaseNotesFile取值(方法二)
  • 如果releaseInfo.releaseNotesFile未定义,则从资源目录下的指定文件(如release-notes.md)中取值(方法三)

参考资源