mac端 electron 应用自动更新

如题，需求就是要实现mac端electron应用的自动更新，因为目前也就只做了mac端。

首先要有个项目
记得搞定mac的代码签名，不然想更新？难啊。这个网上搜还挺多的，就不讲了。主要就是先成为苹果开发者，然后去帐号那边下一个证书。。。。
签名搞定了？你得保证你打包的应用在别人的电脑里也能打开，你的签名才是有效的喔。如果搞定了我们来看下一步。你需要在electron-builder的配置里面，填写publish字段，具体见官网说明，我是在package.json里面配置的：

{
   ...
   "build": {
      "publish": {
        "provider": "generic", // 普通静态资源服务器填这个就行， 其他的看官网
        "url": "服务器地址，写到路径名就行了，别加文件名"
      }
   }
}

项目中加入electron-updater, electron-log，因为electron-updater是要用在生产环境里面的，所以要在package.json的dependencies字段里面。也就是：

yarn add electron-updater, electron-log

那当然就是引入electron-updater了, 我用了官网的做法。不过加了一丢丢改动。这个部分我直接加在了electron的主进程文件里面。想做的是一旦主窗口重建就检查更新的操作。

import { autoUpdater } from "electron-updater";
import log from "electron-log";

export default class AppUpdater {
  constructor() {
    log.transports.file.level = "debug";
    autoUpdater.logger = log;
    autoUpdater.checkForUpdatesAndNotify();
  }
}

在主进程中创建主窗口的代码里新建auto-updater。

import { autoUpdater } from "electron-updater";
import log from "electron-log";
import { app, BrowserWindow } from "electron";

export default class AppUpdater {
  constructor() {
    log.transports.file.level = "debug";
    autoUpdater.logger = log;
    // 非打包情况下，下面的函数不起作用，开发环境要用checkForUpdates()，但是这个函数有点烦。
    autoUpdater.checkForUpdatesAndNotify();
  }
}

let mainWindow = null;

app.on('ready', () => {
   mainWindow = new BrowserWindow(...); // 这一堆的配置就不写了...
   mainWindow.on('ready-to-show', () => {
     mainWindow.show();
     new AppUpdater(); // 这里进行检查更新操作。
   });
});

然后为了可以在渲染进程里面显示有没有更新，更新进度等情况，需要实现electron-updater的事件响应。

import { autoUpdater } from "electron-updater";
import log from "electron-log";
import { app, BrowserWindow,  ipcMain } from "electron";

let mainWindow = null;
let appUpdater =  null;

export default class AppUpdater {
  constructor() {
    log.transports.file.level = "debug";
    autoUpdater.logger = log;
    // 关掉自动下载，如果需要也可以打开，我这里不需要
    autoUpdate.autoDownload = false;
    autoUpdater.on('update-available', () => {
      if (mainWindow && !mainWindow.isDestroyed()) {
        // 通知渲染进程有更新
        mainWindow.webContents.send('update-available');  
      }
    });
    autoUpdater.on('error', () => {
      if (mainWindow && !mainWindow.isDestroyed()) {
        // 提示更新错误
        mainWindow.webContents.send('update-error');  
      }
    });
    autoUpdater.on('download-progress', (progressInfo) => {
      if (mainWindow && !mainWindow.isDestroyed()) {
        // 通知下载进度
        mainWindow.webContents.send('download-progress', progressInfo);  
      }
    });
    autoUpdater.on('update-downloaded', () => {
      // 下载完直接安装
      autoUpdater.quitAndInstall();
    });
    // 非打包情况下，下面的函数不起作用，开发环境要用checkForUpdates()，但是这个函数有点烦。
    autoUpdater.checkForUpdatesAndNotify();
  }
  startDownload () {
    autoUpdater.downloadUpdate();
  }
}

app.on('ready', () => {
   mainWindow = new BrowserWindow(...); // 这一堆的配置就不写了...
   mainWindow.on('ready-to-show', () => {
     mainWindow.show();
     appUpdater = new AppUpdater(); // 这里进行检查更新操作。
   });
});

app.on('window-all-closed', () => {
   ipcMain.removeAllListeners();
});

const handleStartDownload = () => {
   appUpdater && appUpdater.startDownload();
};

// 这个主要是为了可以让用户手动更新。
ipcMain.on('startDownload', handleStartDownload);

好了，接下来把事件接起来写UI。在渲染进程那边用ipcRenderer.on去接入每一个事件，顺带进行更新就行。

一些坑点：

auto-updater依赖打包生成的latest-mac.yml检测有没有新的版本，如果这个文件里面的version字段大于当前使用的版本，那么会提示更新可用，所以一定要把这个文件上传到服务器，最好的话就把打包生成的整个文件夹发到服务器。
自动生成的latest-mac.yml的version，以及打包得到的包的version来自app(双package.json的会有这个文件夹，没有的忽略)的package.json的version字段，也就是为了能自动更新，你每次都要去改这个字段。
autoUpdater每次更新都会去下载zip文件，所以记得这个要上传上去。
上传到服务器的包名一定要和latest-mac.yml中包的名字是相同的，因为你上传的时候可能自己会改名字。如果通过latest-mac.yml中的包名作为路径在你服务器里面找不到的话，那更新会失败。
一定要代码签名之后才能够自动更新，别想着跳过。