更新-全量更新

更新

electron的更新一般来说有两种形式，全量和增量，顾名思义全量就是下载咱们打包好的exe文件或者zip文件，进行全面替换。咱们之前说过electron就是用浏览器关上咱们的页面，很多时候咱们的更新可能只会批改渲染过程，那么咱们把咱们的渲染过程的文件给替换了不久更新吗，也就是说增量实际上是替换打包好的html，js等文件。那么更新的形式如下：

主过程批改：全量更新
渲染过程批改：全量或增量更新

增量更新放到下一期来说，本篇是讲全量更新的事，本文旨在对全量更新进行具体的阐明，包含主过程的更新流程和渲染过程展现等以及更新问题如何排查。

更新流程

咱们这里先阐明一下咱们的解决流程：

咱们的渲染过程申请接口，接口返回了更新信息，拿到更新信息进行版本比照以及更新逻辑判断。
渲染过程全量更新通过，把信息传递给主过程
主过程拿到信息实现更新，把更新信息推送给渲染过程
渲染过程进行更新状态以及进度的显示，实现更新

electron-updater

全量更新咱们应用的是electron-updater这个包，进入咱们的我的项目：

npm i -D electron-updater

electron-updater更新只须要把一个url传入，而后它会主动查找${url}/xxx.yml文件，依据这个yml文件检测更新及下载，咱们能够通过其各种事件拿到对应的更新状态，下载实现之后调用autoUpdater.quitAndInstall()重启以后的利用并且装置更新
这个url下是放动态资源的，简略来说就是这个链接相似拜访一个目录，这个目录下须要有更新的文件以及检测更新的文件。
须要哪些货色呢：

win: latest.yml，exe文件
mac：latest-mac.yml，zip文件

总的来说咱们就是要一个url实现更新，先让渲染过程把这个url传过来吧，咱们先模仿一下更新申请。

更新申请

模仿更新申请

一般来说，更新都是调用后端接口，下面说了更新须要一个url，那么咱们这里就用json文件模仿申请以及模仿更新文件的地址

npm i -g  http-server
新建一个目录server
http-server ./ -p 4000   // 启一个4000端口的服务http://127.0.0.1:4000
server下新建一个index.json来当接口返回数据
{
  "code": 200,
  "success": true,
  "data": {
    "forceUpdate": false, // 是否强制更新
    "fullUpdate": true, // 是否全量更新
    "upDateUrl": "http://127.0.0.1:4000/", // electron-updater传入的url
    "restart": true,  // 增量更新是否重启
    "message": "我要升级成0.0.2", // 更新阐明
    "version": "0.0.2" // 版本号
  }
}
浏览器关上http://localhost:4000/，看是否有index.json。

咱们在渲染过程用申请获取index.json的数据（这里是我本人做的api申请封装）
const api = proxy.$api
api('http://localhost:4000/index.json', {}, { method: 'get' }).then(res => {
  console.log(res)
})

打高版本包

而后咱们打一个高版本包，这里是打dev包，批改.env.dev的VUE_APP_VERSION为0.0.2

npm run build:dev:win64
mac同理，将打包好的文件放入server目录
win：latest.yml，0.0.2的exe
mac：latest-mac.yml，0.0.2的zip（留神是zip不是dmg）

跨域解决

不出预料的话会报一个跨域的谬误，毕竟咱们的端口号不同，在electron中咱们的权限要比浏览器中大得多，
咱们能够把同源策略敞开，就不会呈现跨域的问题了，能够失去返回了。

BrowserWindow的
webPreferences: {
  .....
  webSecurity: false
}

补充：当然还有其余跨域的解决形式，想理解的话能够看一下我对跨域的阐明链接

渲染过程检测更新

检测更新

以后咱们的版本号的话，是在.env外面设置的，不晓得的可看搭建篇环境变量阐明。开发时不必检测版本更新，所以有个判断。
isClick是自动检测的话没有message提醒，手动有。

<template>
  <div class="update">
    <div class="version">以后版本为：{{ config.VUE_APP_VERSION }}</div>
    <a-button type="primary" @click="upDateClick(true)">检测更新</a-button>
  </div>
</template>

<script>
import cfg from '@/config'
import update from '@/utils/update'
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      visible: false,
      upDateData: {},
      upDateProgress: {
        show: false,
        percent: 0
      }
    })
    const { proxy } = getCurrentInstance()
    const config = cfg
    const api = proxy.$api
     function upDateClick(isClick) {
      api('http://localhost:4000/index.json', {}, { method: 'get' }).then(res => {
        console.log(res)
        if (cfg.NODE_ENV !== 'development') {
          update(config.VUE_APP_VERSION, res).then(() => {
            state.upDateData = res
            if (res.fullUpdate) {
              updateNotice(isClick)
            } else {
              console.log()
            }
          }).catch(err => {
            if (err.code === 0) {
              isClick && message.success('已为最新版本')
            }
          })
        } else {
          message.success('请在打包环境下更新')
        }
      })
    }
    return {
      config,
      upDateClick
    }
  }
})
</script>

版本比照

这里用以后版本与接口版本进行比照，向主过程发送告诉（更新message弹窗）。

/utils/update.js

export default (version, data) => {
  return new Promise((resolve, reject) => {
    const isUpdate = data ? versionCompare(data.version, version) : 0
    switch (isUpdate) {
      case 0:
        console.log('不更新')
        reject({ code: isUpdate })
        break;
      case 1:
        if (data.fullUpdate) {
          console.log('全量更新')
          resolve()
        } else {
          console.log('增量更新')
        }
        break
      case -1:
        console.log('降级')
        reject({ code: isUpdate })
        break
    }
  })
}


// 1为以后版本比更新版本低，0为版本统一，-1为以后版本比更新版本高
function versionCompare(stra, strb) {
  const straArr = stra.split('.')
  const strbArr = strb.split('.')
  const maxLen = Math.max(straArr.length, strbArr.length)
  let result
  let sa
  let sb
  for (let i = 0; i < maxLen; i++) {
    sa = ~~straArr[i]
    sb = ~~strbArr[i]
    if (sa > sb) {
      result = 1
    } else if (sa < sb) {
      result = -1
    } else {
      result = 0
    }
    if (result !== 0) {
      return result
    }
  }
  return result
}

更新弹窗

检测到更新后咱们显示更新弹窗，依据forceUpdate判断如果是强制更新的话咱们把弹窗的敞开除去，只能点确定。如果不是的话，那么点击勾销后，咱们记录一个更新版本号的localStorage，下次再检测更新时如果有值的话，更新弹窗将不会呈现

<a-modal
  v-model:visible="visible"
  title="更新"
  @ok="upDateOk"
  @cancel="upDateCancel"
  :closable="!upDateData.forceUpdate"
  :maskClosable="false"
  :keyboard="!upDateData.forceUpdate"
  :destroyOnClose="true"
>
  <p v-html="upDateData.message"></p>
  <template #footer v-if="upDateData.forceUpdate">
    <div class="footer">
      <a-button type="primary" @click="upDateOk">确定</a-button>
    </div>
  </template>
</a-modal>

调用updateNotice(isClick)，这里是按钮点击检测更新，当然你也能够程序自动检测更新，放在App.vue中被动调用updateNotice(false)

function updateNotice(isClick) {
  if (LgetItem(UPDATE_LIST) && LgetItem(UPDATE_LIST)[state.upDateData.version] && !isClick) { // 用户手动点击检测的话呈现弹窗
    return
  }
  state.visible = true
}
function upDateOk() {
  state.visible = false
  window.ipcRenderer.invoke('win-update', {...state.upDateData})
}
function upDateCancel() {
  if (!LgetItem(UPDATE_LIST)) {
    LsetItem(UPDATE_LIST, {})
  }
  LsetItem(UPDATE_LIST, { ...LgetItem(UPDATE_LIST), [state.upDateData.version]: true })
}

主过程解决更新

咱们向主过程推送了更新信息win-update

ipcMain.js接管渲染过程的更新信息

import checkUpdate from './checkUpdate'

ipcMain.handle('win-update', (_, data) => {
  checkUpdate(data)
})

下面说了electron-updater须要一个url，咱们这里实现一下其更新逻辑，electron-updater有各种更新状态，咱们把这些状态推送renderer-updateMsg给渲染过程，让其有对应的提醒或者进度，autoUpdater.quitAndInstall()被调用后会主动装置重启。

新建checkUpdate.js
import { autoUpdater } from 'electron-updater'
import log from '../config/log.js'
import global from '../config/global'
autoUpdater.logger = log
/**
 * -1 查看更新失败 0 正在查看更新 1 检测到新版本，筹备下载 2 未检测到新版本 3 下载中 4 下载实现
 **/
function Message(type, data) {
  const sendData = {
    type,
    data
  }
  global.sharedObject.win.webContents.send('renderer-updateMsg', sendData)
}

// 当更新产生谬误的时候触发。
autoUpdater.on('error', (err) => {
  log.info('更新呈现谬误')
  log.info(err.message)
  if (err.message.includes('sha512 checksum mismatch')) {
    Message(-1, 'sha512校验失败')
  }
})

// 当开始查看更新的时候触发
autoUpdater.on('checking-for-update', () => {
  log.info('开始查看更新')
  Message(0)
})

// 发现可更新数据时
autoUpdater.on('update-available', () => {
  log.info('有更新')
  Message(1)
})

// 没有可更新数据时
autoUpdater.on('update-not-available', () => {
  log.info('没有更新')
  Message(2)
})

// 下载监听
autoUpdater.on('download-progress', (progressObj) => {
  Message(3, progressObj)
})

// 下载实现
autoUpdater.on('update-downloaded', () => {
  log.info('下载实现')
  Message(4)
  setTimeout(() => { // 重启更新提醒1秒后在进行重启装置
    global.willQuitApp = true
    autoUpdater.quitAndInstall()
  }, 1000)
})

export default function (data) {
  log.info('Update', data)
  autoUpdater.setFeedURL(data.upDateUrl)
  autoUpdater.checkForUpdates().catch(err => {
    log.info('网络连接问题', err)
    Message(5, err.code)
  })
}

渲染过程显示更新状态

在下面的更新弹窗中新增更新进度，其实就是接管主过程的更新状态做个展现：

<a-modal
  v-model:visible="upDateProgress.show"
  title="下载中"
  :closable="false"
  :maskClosable="false"
  :keyboard="false"
  :destroyOnClose="true"
  :footer="null"
>
  <a-progress :percent="upDateProgress.percent" status="active" />
</a-modal>

const message = proxy.$message
onMounted(() => {
  window.ipcRenderer.on('renderer-updateMsg', (_, data) => {
    switch (data.type) {
      case -1:
        message.error(data.data)
        break
      case 0:
        message.info('正在查看更新')
        break
      case 1:
        message.destroy()
        message.success('已查看到新版本，开始下载')
        state.upDateProgress.show = true
        break
      case 2:
        message.destroy()
        message.success('无新版本')
        break
      case 3:
        state.upDateProgress.percent = data.data.percent.toFixed(1)
        break
      case 4:
        state.upDateProgress.show = false
        message.loading('重启更新中...', 1)
        break
      case 5:
        message.destroy()
        message.warning(data.data)
        state.upDateProgress.show = false
        break
      default:
        break
    }
  })
})
onUnmounted(() => {
  window.ipcRenderer.removeListener('renderer-updateMsg')
})

开发实现后咱们打个0.0.1版本的dev包（下面咱们放入server文件夹的是0.0.2的dev包），而后检测更新，更新重启后看打印的config是否是0.0.2。

补充

通过下面的步骤，咱们的一个全量更新的流程就算实现了，这里对一些常见问题进行补充。

申请缓存

咱们的申请是一个json文件，咱们可能会批改其中的参数，有时候发现返回还是没变，请将控制台的Network的Disable cache勾上（申请缓存常见解决形式）

下载缓存

在开发时咱们可能会做开发调试，比方看下载进度呀什么的，先打了一个高版本的放在近程地址，本地反复装置低版本的看更新成果，然而在第一次更新实现后，前面的更新都是霎时实现了，看不到进度，这里是因为electron-updater在更新时会检测本地是否下载过这个高版本，有的话间接用本地的进行装置，咱们能够把这个缓存文件删除掉。AppData这个文件夹呢可能是处于暗藏的，前面挺多中央会用到这个的，能够在顶端查看中勾选暗藏的我的项目让其显示，具体的话百度吧。

electronvuedev这个是你设置的name（本框架在vue.config.js中）
win：C:\Users\Administrator（你的用户）\AppData\Local\electronvuedev-updater
mac：~/Library/Application Support/Caches/electronvuedev-updater

更新谬误检测

有时候咱们更新时会遇到问题，比方检测出更新，然而下载却不动，或是更新实现后并没有装置重启，这里先说一下比拟常见的几个可能会引发的问题

mac端下载进度不动：mac端打包会呈现三个文件，dmg安装包，dmg的zip压缩包以及yml件，比win多一个zip压缩包，mac更新下载的是zip文件，很多同学认为和win的exe一样放（win是exe和yml），把dmg文件放到更新地址下，没有zip文件，这会导致检测到更新，但下载进度却不动。
更新下载后没有重启，关上软件版本也没有变：之前咱们在做窗口敞开时说过，能够在某些事件里用e.preventDefault()阻止窗口的敞开，比方咱们在第二期里应用了：

win.on('close', (e) => {
  console.log('close', global.willQuitApp)
  if (!global.willQuitApp) {
    win.webContents.send('renderer-close-tips', { isMac })
    e.preventDefault()
  }
})

针对于本我的项目，咱们在调用重启更新时，因为咱们设置了这个可能会引起窗口敞开的失败，这里咱们在敞开前设置willQuitApp，让其失常敞开：

global.willQuitApp = true
autoUpdater.quitAndInstall()

其余起因排查：当然不可能只有下面几种起因的，那么咱们如何进行排查呢:

后端谬误收集：autoUpdater的error事件，能够在这个事件中把错误信息传递给后端接口。
增加谬误日志：如果只能本人调试的话，能够用electron-log这个包把autoUpdater的error收集到本地日志中：

npm i electron-log

新建log.js
import log from 'electron-log'

log.transports.file.level = 'silly'
log.transports.console.level = false // 禁用console输入

export default log

在咱们的checkUpdate.js更新中应用
import log from '../config/log.js'
autoUpdater.logger = log

autoUpdater.on('error', (err) => {
  log.info('更新呈现谬误')
  log.info(err.message)
})

当更新呈现问题后查看对应的log文件

win：C:\Users\Administrator（你的用户）\AppData\Roaming\<app name>\logs
mac: ~/Library/Logs/<app name>

本系列更新只有利用周末和下班时间整顿，比拟多的内容的话更新会比较慢，心愿能对你有所帮忙，请多多star或点赞珍藏反对一下

本文地址：链接
本文github地址：链接

关于前端:从零开始的electron开发更新全量更新

更新-全量更新

更新

更新流程

electron-updater

更新申请

模仿更新申请

打高版本包

跨域解决

渲染过程检测更新

检测更新

版本比照

更新弹窗

主过程解决更新

渲染过程显示更新状态

补充

申请缓存

下载缓存

更新谬误检测

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:从零开始的electron开发更新全量更新

更新-全量更新

更新

更新流程

electron-updater

更新申请

模仿更新申请

打高版本包

跨域解决

渲染过程检测更新

检测更新

版本比照

更新弹窗

主过程解决更新

渲染过程显示更新状态

补充

申请缓存

下载缓存

更新谬误检测

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复