自动化您的 electron 应用发布和更新：打造无缝的用户体验

2023-11-03 22:52:19

随着 electron 的日益流行，它已成为前端开发桌面端应用的重要技术。为了提供更好的用户体验，electron 应用在版本更新后，能够自动检测到更新，然后询问用户是否要更新到最新版。本文将介绍如何使用 workflow 实现 electron 应用的自动发布和自动更新，让用户体验更加流畅。

准备工作

在开始之前，你需要确保已经具备以下条件：

一个 electron 项目
一个 GitHub 仓库
一个 workflow 账号

自动发布

要实现自动发布，你需要创建一个 GitHub Actions workflow。你可以参考以下步骤：

在 GitHub 仓库中创建一个 .github/workflows 文件夹。
在该文件夹中创建一个新的 YAML 文件，命名为 main.yml。
在 main.yml 文件中，添加以下内容：

name: Release

on:
  push:
    branches:
      - main

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - uses: softprops/action-gh-release@v1
        with:
          files: 'dist/*'

自动更新

要实现自动更新，你需要在 electron 应用中添加以下代码：

const {app, BrowserWindow} = require('electron')
const {autoUpdater} = require('electron-updater')

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadFile('index.html')
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', () => {
  createWindow()
  autoUpdater.checkForUpdatesAndNotify()
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
  autoUpdater.quitAndInstall()
})