关于前端:🔥基于GitHub的Electron自动发布与更新🔥

前言

公众号：【可乐前端】，分享前端面试与 web 实战常识

在后面曾经实现了咱们本人的 Markdown 编辑软件，首次装置必定是要手动下载安装的，然而在后续的迭代更新中，如果还须要一次次的去手动下载安装替换的话，那么体验必定是不太好的。

本文介绍了如何在 Electron 中主动公布到 GitHub 以及自动更新的实现计划，话不多说，让咱们立即开始。

主动公布

咱们能够依靠 GitHub 作为安装包的托管平台，对于每一次的版本公布，都能够在对应的仓库里新建一个 release，并把对应的安装包资源传输到 release 中。

打包的时候能够应用 electron-builder 这个库，在根目录下创立 electron-builder.yml 配置文件。写入如下配置：

publish:
  provider: github
  owner: '你的账户名'
  repo: '你的仓库名'
  token: '你的 token' 
  releaseType: 'release'

如何生成 GitHub Token 曾经在上一期文章中介绍过，感兴趣的同学能够在下面链接中点开查看。而后批改打包的命令如下：

"build:mac": "npm run build && electron-builder --mac --config --publish always"

这样在咱们在咱们执行完打包命令之后，会主动把产物推送到 GitHub 对应的 release 中。这里须要留神的一点是，版本号都是基于 package.json 的 version 字段，所以在每一次打包公布之前记得先批改这里的值。

能够看到在打包实现之后，会主动把产物推送到 GitHub 中，咱们能够在 GitHub 对应的公布分支上看到对应的内容。

publish 中 provider 的可选值

在 electron-builder 中，publish 局部的 provider 字段用于指定公布提供者。以下是一些常见的 provider 取值：

GitHub (github):

应用 GitHub 来公布应用程序。设置 provider: github 时，须要提供 GitHub 仓库的相干信息，例如 repo、owner 和 GitHub Personal Access Token。

    publish:
      provider: github
      repo: owner/repo
      owner: owner
      token: $GITHUB_TOKEN

Generic (generic):

应用通用的公布提供者，这通常用于自定义或公有的公布流程。须要指定公布的指标地址、协定等信息。

    publish:
      provider: generic
      url: "https://your-custom-publish-server.com"
      channel: "latest"

当应用通用公布模式时（例如 https://your-custom-publish-server.com），那么这个自定义服务器应该反对以下几个路由：

• /update/${platform}/${arch}/${version}:

  • ${platform}: 平台，例如 win, mac, 或 linux。
  • ${arch}: 架构，例如 x64 或 arm64。
  • ${version}: 版本号，例如 1.0.0。

  该路由用于获取应用程序更新信息，返回一个 JSON 对象，其中蕴含更新的版本号、下载地址等信息。

  示例响应：

  {
    "name": "YourApp",
    "notes": "Release notes for version 1.1.0",
    "pub_date": "2024-02-25T12:00:00Z",
    "url": "https://your-custom-publish-server.com/downloads/YourApp-1.1.0.zip",
    "version": "1.1.0"
  }

• /download/${version}/${filename}:

  • ${version}: 版本号，例如 1.0.0。
  • ${filename}: 文件名，例如 YourApp-1.0.0.zip。

  该路由用于提供应用程序的下载文件，返回文件的二进制内容。

• /latest:

  该路由用于获取最新版本的应用程序信息，返回一个 JSON 对象，其中蕴含最新版本的版本号、下载地址等信息。

  示例响应：

  {
    "name": "YourApp",
    "notes": "Release notes for latest version",
    "pub_date": "2024-02-25T12:00:00Z",
    "url": "https://your-custom-publish-server.com/downloads/YourApp-latest.zip",
    "version": "latest"
  }

Bintray (bintray):

应用 Bintray 提供者，这通常用于公布到 JCenter 仓库。须要提供 Bintray 仓库的相干信息，例如 owner、package、repo 等。

publish:
  provider: bintray
  owner: bintray-owner
  package: bintray-package
  repo: bintray-repo
  user: bintray-username
  token: $BINTRAY_API_KEY   

S3 (s3):

应用 Amazon S3 提供者，用于将应用程序公布到 Amazon S3 存储桶。须要提供 S3 存储桶的相干信息。

    publish:
      provider: s3
      bucket: your-s3-bucket
      acl: public-read

自动更新

主动公布解决完之后，接下来介绍自动更新。自动更新能够应用 electron-updater 这个库。首先在利用初始化的时候，须要查看以后利用是否有新版本可用，即是否须要自动更新；如果以后有新版本可用，则下载新版本的资源，下载完之后就能够重启利用了。

介绍一下用到 electron-updater 中的 API：

• checkForUpdates：查看是否有新更新可用
• downloadUpdate：下载更新
• quitAndInstall：装置更新

• on：监听事件

  • checking-for-update：查看更新中
  • update-available：有新版本可用
  • update-not-available：没有新版本可用
  • error：谬误事件
  • update-downloaded：更新下载结束

  • download-progress：下载事件，其中包含总下载量、已下载量等属性

    • total：下载的文件的总字节数
    • delta: 示意自上次进度事件以来已下载的字节数
    • transferred: 示意自下载开始以来曾经传输的字节数
    • percent: 示意下载实现的百分比
    • bytesPerSecond: 示意以后下载速度，即每秒传输的字节数

理解了下面的常识之后，能够实现一个监听更新的函数 listenAutoUpdate，在 app ready 时调用。

import {autoUpdater} from 'electron-updater'
import {COMMON_ERROR_LOG} from '../event'
import {app, dialog} from 'electron'
export default (mainWindow) => {const sendStatusToWindow = (text) => {mainWindow.webContents.send(COMMON_ERROR_LOG, `update msg:${text}`)
  }
  autoUpdater.checkForUpdates()
  autoUpdater.autoDownload = false
  autoUpdater.autoInstallOnAppQuit = true
  autoUpdater.on('checking-for-update', () => {sendStatusToWindow('Checking for update...')
  })

  autoUpdater.on('update-available', (info) => {
    // 当有新版本可用时，弹窗提醒用户
    dialog
      .showMessageBox({
        type: 'info',
        title: '新版本可用',
        message: '有一个可用的新版本，要更新吗',
        buttons: ['是', '否']
      })
      .then((result) => {if (result.response === 0) {
          // 用户抉择更新，触发下载和装置
          autoUpdater.downloadUpdate()}
      })
  })

  autoUpdater.on('update-not-available', (info) => {sendStatusToWindow('Update not available.')
  })

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

  autoUpdater.on('update-downloaded', () => {
    // 解决下载实现的状况
    dialog
      .showMessageBox({
        type: 'info',
        title: '更新下载实现',
        message: '点击确定重启获取最新内容',
        buttons: ['确定']
      })
      .then(() => {
        // 调用 quitAndInstall 来装置更新
        autoUpdater.quitAndInstall()})
  })
  autoUpdater.on('download-progress', (progressObj) => {sendStatusToWindow(JSON.stringify(progressObj))
  })
}

下面的代码次要做了如下的事件：

• 查看是否有更新。
• 监听自动更新的不同阶段的事件，包含查看更新、更新可用、更新未可用、下载进度以及下载实现。
• 依据不同事件的触发，执行相应的操作，例如弹出提醒用户更新的对话框、显示下载进度等。

在 Mac 中须要留神的坑：

1. 在一些脚手架生成的代码中会有这么一段代码：

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

   这样资源占用导致自动更新失败，须要把这个 if 去掉

2. 在 macOS 上，应用程序必须失去签名后能力自动更新。这是 Squirrel.Mac 的要求。

最初

以上就是本文的所有内容，介绍了 Electron 中主动公布与更新的一些办法。如果你感觉有意思的话，点点关注点点赞吧～