Electron自动更新

注：本文使用的是 electron-builder 配合 electron-updataer 实现自动更新效果。该方案仅在 Windows环境中适用，Mac环境比本文多一步安装证书，需要自行解决，Linux环境请直接跳过本文。

---

更新流程

• 使用 electron-builder 构建生成 latest.yml (mac软件是latest-mac.yml)以及安装包等文件；
• 将 latest.yml 以及生成的安装包放在一个静态资源服务器上，指向这些文件的根路径；
• 项目启动后 electron-updataer 检查更新，若有新版本自动更新；

electron-builder 构建程序

1、安装 electron-builder

npm install electron-builder --save-dev

npm install module-name --save 自动把模块和版本号添加到dependencies部分
npm install module-name --save-dev 自动把模块和版本号添加到devDependencies部分

2、配置package.json

package.json文件中的 version 值，控制着打出来包的版本。

 在package.json文件中把下面的打包配置写在和 scripts 配置同级的地方。

"build": {
    "productName":"xxxx",       //项目名 这也是生成的exe、dmg文件的前缀名
    "appId": "com.xxx.xxxxx",   //包名   打包mac时写成自己应用的appId，打包Windows随意添写  
    "copyright":"xxxx",         //版权信息  安装好后出品公司显示的就是该内容
    "directories": {            //打包输出位置的文件夹
      "output": "./out"
    }, 
    "nsis": {   //nsis相关配置，打包方式为nsis时生效
      "oneClick": false,                                //是否一键安装
      "allowElevation": true,                           //允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true,       //允许修改安装目录
      "installerIcon": "./aa.ico",                      //安装图标
      "uninstallerIcon": "./aa.ico",                    //卸载图标
      "installerHeaderIcon": "./aa.ico",                //安装时头部图标
      "createDesktopShortcut": true,                    //创建桌面图标
      "createStartMenuShortcut": true,                  //创建开始菜单图标
      "shortcutName": "xxxx",                           //图标名称
    },
    "publish": [
      {
        "provider": "generic",      //服务器提供商，也可以是GitHub、自己服务器等，全部都在这个值就行
        "url": "http://xxxxx/"      //服务器地址  里面可以访问到 latest.yml 以及生成的安装包
      }
    ],
    "files": [  //打包后需要使用的h5相关文件 
      "./css", 
      "./html",
      "./js",
      "./index.html"
    ],
    "dmg": {     //macOSdmg 打包mac软件使用的，这个可以不动
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "win": {
      "icon": "./aims.ico",      //软件图标
      "target": [
        {
          "target": "nsis",      //使用nsis打成安装包，"portable"打包成免安装版，默认使用niss，win平台一般也是用这个
          "arch": [              //打包出来的安装包是64位还是32位，推荐使用32位，这样的包比较小
            "ia32"              //32位 
          ]
        }
      ]
    },
    "mac": {                    //软件图标
      "icon": "./icon.icns"
    },
    "linux": {
      "icon": "./icons"
    }
  }

3、打包生成软件

 在package.json文件scripts 配置中加上下面两行

"scripts": {
    "start": "electron-forge start", 
    "buildwin": "electron-builder --win",  //这行
    "buildmac": "electron-builder --mac"   //这行
},

打包生成windos安装包

npm run buildwin

 打包生成mac安装包（mac这一步需要配置证书，我没搞mac的软件，这步请自行解决）

npm run buildmac

electron-updater 更新程序

1、将更新文件放到服务器

将 latest.yml (mac软件是latest-mac.yml)以及安装包放到一个可以访问的地方，可以是GitHub、自己服务器等，只要你上面打包的路径能访问到就行。

2、安装 electron-updater

npm install electron-updater --save

3、安装 electron-log

安装这个依赖包是为了看更新进度

npm install electron-log --save

注意:项目运行中的用到依赖包，除了 electron 包，其他的都要在package.json文件 dependencies 配置中写上包名和依赖名称，我们用到了 electron-updater 、electron-log 所以写法如下图：

4、在main.js中写软件更新代码

const {app, Menu, BrowserWindow, dialog} = require('electron');
const {autoUpdater} = require('electron-updater');
const path = require('path');
const logger = require("electron-log");
 
//打印log到本地
logger.transports.file.maxSize = 1002430; // 10M
logger.transports.file.format = "[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}]{scope} {text}";
logger.transports.file.resolvePath = () => "./operation.log"; //打印在你安装的软件位置，
 
 
//每次启动自动更新检查 更新版本 --可以根据自己方式更新，定时或者什么
autoUpdater.checkForUpdates();
 
autoUpdater.autoDownload = false;//这个必须写成false，写成true时，我这会报没权限更新，也没清楚什么原因
autoUpdater.on('error', (error) => {
    logger.error(["检查更新失败", error])
})
//当有可用更新的时候触发。 更新将自动下载。
autoUpdater.on('update-available', (info) => {
    logger.info('检查到有更新，开始下载新版本')
    autoUpdater.downloadUpdate()
})
//当没有可用更新的时候触发。
autoUpdater.on('update-not-available', () => {
    logger.info('没有可用更新')
})
//在更新下载完成的时候触发。
autoUpdater.on('update-downloaded', (res) => {
    logger.info('下载完毕！提示安装更新')
    //dialog 想要使用，必须在BrowserWindow创建之后
    dialog.showMessageBox({
        title: '升级提示！',
        message: '已为您下载最新应用，点击确定马上替换为最新版本！'
    }).then((index) => {
        logger.info('退出应用，安装开始！')
        //重启应用并在下载后安装更新。 它只应在发出 update-downloaded 后方可被调用。
        autoUpdater.quitAndInstall()
    });
})