electron打包-更新流程

web与electron窗口通信

// main.js
import {ipcMain } from 'electron'

// electron窗口接收web传来的消息
ipcMain.on('methods', (e, data) => {
	// code..
})

//app.vue
import { ipcRenderer } from 'electron'
// web向electron窗口发送消息
ipcRenderer.send('methods', data)

window打包

//pageage.json
  "build": {
    "productName": "productName",
    "appId": "appId",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:5500"
      }
    ],
    "mac": {
      "icon": "build/icons/icon.icns",
    },
    "win": {
      "icon": "build/icons/icon.ico",
      "target": [
        {
          "target": "nsis"
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": false,
      "installerIcon": "build/icons/icon.ico",
      "uninstallerIcon": "build/icons/icon.ico",
      "installerHeaderIcon": "build/icons/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  },
  

build中的win为window配置 icon为安装包logo target使用nsis进行安装

mac打包

build中的mac为mac配置 icon为安装包logo

mac打包需要证书签名

申请证书签名参考

electron MAC代码签名

更新失败 Error: Could not get code signature for running application

证书一定要选 developer ID Application类型 !!!

自动更新 electron-updater

1. 安装依赖

   npm i electron-updater

2. 引入依赖

// main.js
import { autoUpdater } from 'electron-updater'

3. 触发更新

    // main.js
export function upgradeAutoUpdaterHandle (feedUrl) {
  autoUpdater.setFeedURL(feedUrl)
  autoUpdater.checkForUpdates()
}
export function initAutoUpdaterHandle (window, settings, feedUrl) {
  mainWindow = window
  globalSettings = settings
  // 设置更新包的地址
  autoUpdater.setFeedURL(feedUrl)
  autoUpdater.on('error', (error) => {
    sendUpdateMessage({
      cmd: 'error',
      message: error
    })
  })
  // 监听开始检测更新事件
  autoUpdater.on('checking-for-update', (message) => {
    sendUpdateMessage({
      cmd: 'checking-for-update',
      message
    })
  })
  // 监听发现可用更新事件
  autoUpdater.on('update-available', (message) => {
    sendUpdateMessage({
      cmd: 'update-available',
      message
    })
  })
  // 监听没有可用更新事件
  autoUpdater.on('update-not-available', (message) => {
    sendUpdateMessage({
      cmd: 'update-not-available',
      message
    })
  })

  // 更新下载进度事件
  autoUpdater.on('download-progress', (progressObj) => {
    sendUpdateMessage({
      cmd: 'download-progress',
      message: progressObj
    })
  })
  // 监听下载完成事件
  autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
    sendUpdateMessage({
      cmd: 'update-downloaded',
      message: {
        releaseNotes,
        releaseName,
        releaseDate,
        updateUrl,
        quitAndUpdate
      }
    })
  })

  // 开始更新安装
  ipcMain.on('upgradeVersion', () => {
    globalSettings.willQuitApp = true
    autoUpdater.quitAndInstall()
  })

  if (!globalSettings.isDevelopment) {
    autoUpdater.checkForUpdates()
  }
  // // 接收渲染进程消息，开始检查更新
  ipcMain.on('checkForUpdate', () => {
    // 执行自动更新检查
    // sendUpdateMessage({cmd:'checkForUpdate',message:arg})
    logger.info('check for update');
    autoUpdater.checkForUpdates();
  });
}
// 网页端向electron进程发送消息
ipcMain.on('update', (event, data) => {
    // yml存放文件夹地址
    const feedUrl = "http://127.0.0.1:5500"
    globalSettings.uploaderInited = false
    if (!globalSettings.uploaderInited) {
        initAutoUpdaterHandle(mainWindow, globalSettings, feedUrl)
        globalSettings.uploaderInited = true
    } else {
        upgradeAutoUpdaterHandle(feedUrl)
    }
})

配置文件 latest.yml

electron 打包时会生成yml文件和安装包 yml中的安装包路径可以更改 只需要能访问即可 yml中的version需要比当前版本高才会更新

window 会生成yml和exe文件

mac端会生成yml dmg和zip yml中对应dmg zip文件路径