Codes►前端

03 electron更新

03 electron更新

一、用户如何获取到实际软件，这应出于实际项目出发，考虑如何分发软件安装包给用户，
如，用户从官网下载，或者各类途径分享可下载此软件安装包的链接，可以参考常见的应用如：QQ、微信、百度网盘等。
二、项目更新，可有多种实现手段，如请求某个接口，对比用户本地版本和服务器端最新版本，
如有不同，那么提示用户升级，同样应处于实际项目出发，如拥有云服务器，可将新版本放置服务器指定路径，
根据指定规则进行升级。或使用现成的electron官方的 update-electron-app 工具
如没有自己的服务器，可以考虑 update-electron-app + github 仓库的解决方案，
但是需要注意的是，如果使用 update-electron-app + github的方案，
要考虑到部分地区、部分运营商、部分场景下的用户会有无法访问 github的情况。
由于 update-electron-app 实现 应用程序的更新需要较多流程和技术手段，同学可参考electron官方提供的文档
https://www.electronjs.org/zh/docs/latest/tutorial/更新

Electron

要实现 Electron 应用的打包和发布更新，可以按照以下步骤进行：

1. 打包应用

使用 Electron 打包工具（如 electron-builder 或 electron-forge）将应用打包为可安装的格式。确保在打包配置中正确设置应用的版本号和其他必要信息。

2. 选择更新服务器

根据你的需求选择更新服务器：

  • 使用公开的 GitHub 仓库：如果你的应用是开源的，可以使用 update.electronjs.org 提供的免费更新服务。
  • 私有更新服务器：如果你的应用是私有的，或者需要更复杂的更新管理，可以部署自己的更新服务器，例如使用 Hazel、electron-release-server 或其他自定义解决方案。

3. 发布更新

使用 GitHub Releases

  1. 配置 GitHub Publisher：
    • 安装 @electron-forge/publisher-github 插件。
    • 在 forge.config.js 中配置发布目标。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    module.exports = {
      publishers: [
        {
          name: '@electron-forge/publisher-github',
          config: {
            repository: {
              owner: 'github-user-name',
              name: 'github-repo-name'
            },
            prerelease: false,
            draft: true
          }
        }
      ]
    }
  2. 生成 GitHub 访问令牌：创建一个个人访问令牌（PAT），并将其存储在环境变量 GITHUB_TOKEN 中。
  3. 运行发布命令：
    JSON复制 
    1
    2
    3
    "scripts": {
      "publish": "electron-forge publish"
    }
    运行 npm run publish 将打包后的应用发布到 GitHub Releases。

使用自定义更新服务器

  1. 上传更新文件：将打包后的安装包和更新元数据（如 latest.yml 或 RELEASES 文件）上传到你的服务器。
  2. 配置更新路径：在应用的主进程中设置 autoUpdater 的更新源。 
    1
    2
    3
    4
    const { app, autoUpdater } = require('electron');
    const server = 'https://your-update-server.com';
    const url = `${server}/update/${process.platform}/${app.getVersion()}`;
    autoUpdater.setFeedURL({ url });

4. 配置自动更新

在应用的主进程中使用 autoUpdater 模块来检查和应用更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
autoUpdater.on('checking-for-update', () => console.log('Checking for update...'));
autoUpdater.on('update-available', () => console.log('Update available.'));
autoUpdater.on('update-not-available', () => console.log('No update available.'));
autoUpdater.on('update-downloaded', () => {
  // 提示用户重启应用以安装更新
  dialog.showMessageBox({
    type: 'info',
    buttons: ['Restart', 'Later'],
    message: 'Update downloaded. Restart to apply.'
  }).then((response) => {
    if (response.response === 0) autoUpdater.quitAndInstall();
  });
});
// 定期检查更新
setInterval(() => autoUpdater.checkForUpdates(), 60000);

5. 测试更新流程

在非开发环境下运行应用，模拟更新过程以确保一切正常。这包括检查更新、下载更新和安装更新等步骤。

注意事项

  • 安全性：确保使用 HTTPS 进行通信，并对更新包进行签名验证。
  • 用户体验：尽量使更新过程对用户透明且无缝。
  • 签名：在 macOS 上，应用必须签名后才能使用自动更新功能。
    通过以上步骤，你可以实现 Electron 应用的打包、发布和自动更新功能。