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文件，所以记得这个要上传上去。
    •