自动更新

自动更新

使用软件的自动更新可以非常容易的对用户进行交付，使用自动更新可以修复软件的问题，让用户体验到最新的功能。自动更新过程是自动下载的，软件会向用户发送更新通知，用户确认后就可能自动安装软件的新版本了。

electron 自动更新使用是非常简单的，下面我们来学习自动更新。

自动更新需要使用 electron-build 结合 electron-builder 包完成。

打包生成的安装程序不要有空格，如果有空格需要使用 - 连接

依赖扩展

自动更新需要使用 electron-build 结合 electron-builder 包完成，执行以下脚本安装依赖包。

pnpm add electron-updater

配置文件

package.json

自动更新需要在 package.json 文件中添加 repository 配置段，指向到你的更新文件地址

{
  "name": "camera",
  "version": "1.0.0",
  "description": "方便好用的桌面摄像头软件，适合直播、录课、内容分享时使用",
  "main": "./out/main/index.js",
  "author": "斑马兽",
  "homepage": "https://www.bmcms.com",
  "repository": "https://github.com/banmawang/camera",
  ...
}

更新脚本

下面创建脚本 autoUpdater.ts 并在主进程文件中引入

import { is } from '@electron-toolkit/utils'
import { BrowserWindow, dialog, shell } from 'electron'
import { autoUpdater } from 'electron-updater'
//自动下载更新
autoUpdater.autoDownload = false
//退出时自动安装更新
autoUpdater.autoInstallOnAppQuit = false

export default (win: BrowserWindow) => {
  //检查是否有更新
  if (!is.dev) autoUpdater.checkForUpdates()

  //有新版本时
  autoUpdater.on('update-available', (_info) => {
    dialog
      .showMessageBox({
        type: 'warning',
        title: '更新提示',
        message: '有新版本发布了',
        buttons: ['更新', '取消'],
        cancelId: 1
      })
      .then((res) => {
        if (res.response == 0) {
          //开始下载更新
          autoUpdater.downloadUpdate()
        }
      })
  })

  //没有新版本时
  autoUpdater.on('update-not-available', (_info) => {
    // dialog.showMessageBox({
    //   type: 'info',
    //   message: `你已经是最新版本`
    // })
  })

  //更新下载完毕
  autoUpdater.on('update-downloaded', (_info) => {
    //退出并安装更新
    autoUpdater.quitAndInstall()
  })

  //更新发生错误
  autoUpdater.on('error', (_info) => {
    dialog
      .showMessageBox({
        type: 'warning',
        title: '更新提示',
        message: '软件更新失败',
        buttons: ['网站下载', '取消更新'],
        cancelId: 1
      })
      .then((res) => {
        if (res.response == 0) {
          shell.openExternal('https://github.com/banmawang/camera/releases')
        }
      })
  })

  // 监听下载进度
  autoUpdater.on('download-progress', (progress) => {
    win.webContents.send('downloadProgress', progress)
  })
}

安装进度

如果你想将下载进度展示给用户，需要在 autoUpdater.ts 中设置监听脚本，即在有下载事件发生时，触发渲染进程事件。

// 监听下载进度
autoUpdater.on('download-progress', (progress) => {
  win.webContents.send('downloadProgress', progress)
})

然后在 preload.js 预加载脚本中配置渲染进程事件

contextBridge.exposeInMainWorld('api', {
	//下载进度条
  downloadProgress: (callback: (progress: any) => {}) => {
    ipcRenderer.on('downloadProgress', (_event, progress) => {
      callback(progress)
    })
  }
})

然后写个 vue 组件展示下载界面，有以下几个特点说明下

• progress.percent 为下载的进度值，100即下载完成
• 使用element-ui 的进度条组件

<script setup lang="ts">
import { ref } from 'vue'

//下载进度条
const progress = ref<any>(null)
window.api.downloadProgress((_progress: any) => {
  progress.value = _progress
})
</script>

<template>
  <main
    class="p-5 w-screen h-screen absolute z-30 flex flex-col justify-center shadow-inner bg-gray-100"
    v-if="progress"
  >
    <div class="flex justify-center">
      <img
        src="../assets/hj.jpg"
        alt=""
        class="w-[80px] h-[80px] object-cover rounded-full shadow-md"
      />
    </div>
    <h1 class="py-3 text-center font-bold opacity-60 text-sm font-mono">下载更新包</h1>
    <div class="">
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="parseInt(progress.percent)"
      />
    </div>
    <div class="mt-5 flex justify-center">
      <a
        href="https://github.com/banmawang/camera/releases"
        target="_blank"
        class="bg-violet-600 py-2 px-4 rounded-md text-white text-sm hover:bg-violet-500"
        >官网下载</a
      >
    </div>
  </main>
</template>