前言

对于用户来说，桌面端应用在版本更新后，能够自动检测到更新，然后询问用户是否要更新到最新版，是非常重要的用户体验。electron 是当前前端开发桌面端应用，非常重要、通用的一项技术。 那么搭配 electron，来做好应用的自动更新，是非常有必要的一个问题。但坑还是挺多的。。

正文

相关配置

安装依赖

yarn add --dev electron-builder
yarn add electron-updater

配置 package.json

//package.json

{
    //...
    "scripts": {
        //...
        "publish:win:setup": "electron-builder -w=nsis --x64 -p always",
        "publish:mac:dmg": "electron-builder -m=dmg -p always", 
        "publish:linux:deb": "electron-builder -l=deb --x64 -p always", 
    },
    "build": {
        //...
        "publish": [
          {
            "provider": "github",
            "repo": <your repo>,
            "owner": <repo owner>
          }
        ],
    }
}

添加函数

在 main.js 中添加自动更新的函数

//...
const { autoUpdater } = require('electron-updater');


function checkUpdate(){
  autoUpdater.checkForUpdates()

  autoUpdater.on('error', (err) => {
    console.log(err)
  })

  autoUpdater.on('update-available', () => {
    console.log('found new version')
  })


  autoUpdater.on('update-downloaded', () => {
    // eslint-disable-next-line more/no-then
    dialog.showMessageBox({
      type: 'info',
      title: '应用更新',
      message: '发现新版本，是否更新？',
      buttons: ['是', '否'],
    }).then((buttonIndex) => {
      if(buttonIndex.response === 0) {
        autoUpdater.quitAndInstall()
        app.quit()
      }
    })
  })
}

app.on('ready', () => {
  checkUpdate()
})

workflow 文件

在根目录下创建一个 .github 的文件夹，然后在这个文件夹下创建一个 workflows 的文件夹，然后创建一个 release.yml 的文件

name: Release
on:
  push:
    branches:
      - main  //只要提交到 main 分支时，才会触发这个流水线
      
# Workflow's jobs
jobs:
  release:
    name: build and release electron app

    runs-on: ${{ matrix.os }}   //流水线会跑在哪些操作系统中

    strategy:
      fail-fast: false
      matrix:
        os: [windows-latest, macos-latest, ubuntu-latest]  // 流水线将分别触发在 windows、macos、ubuntu 三个系统中

    steps:
      # step1: check out repository
      - uses: actions/checkout@v2   //检测你的 repository

      # step2: install node
      - uses: actions/setup-node@v2  //安装 node 的依赖，根据项目需求修改版本
        with:
          node-version: '14.16.0'
      - run: npm install -g yarn@1.22.10

      # step2: cache node_modules
      - name: Cache Desktop node_modules
        id: cache-desktop-modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.os }}-${{ hashFiles('yarn.lock', 'patches/**') }}
      
      # step3: install node_modules
      - name: Install node_modules 
        if: steps.cache-desktop-modules.outputs.cache-hit != 'true'
        run: yarn install 
        
      # step4: cleanup artifacts in dist_electron
      - name: build artifacts for windows
        run: yarn build
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      # step5: clea nartifacts
      - name: cleanup artifacts for windows
        if: matrix.os == 'windows-latest'
        run: |
          npx rimraf "release/!(*.exe)"

      # step6: upload artifacts
      - name: Release windows package
        if: matrix.os == 'windows-latest'
        run:
          yarn publish:win:setup
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      
      - name: Release mac package
        if: matrix.os == 'macos-latest'
        run:
          yarn publish:mac:dmg
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          
      - name: Release linux package
        if: matrix.os == 'ubuntu-latest'
        run:
          yarn publish:linux:deb
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

如何触发？

在每次 commit 提交代码后，使用 git tag 对当前代码打一个标签，然后上传代码

git push origin xx --tags

存在问题

1. 目前测试在 windows 系统上自动更新没有问题，linux 和 mac 系统的自动更新尚未测试
2. 目前测试公开的 github 仓库没有问题，private 的仓库还无法成功自动更新，还需要继续测试