到达目的地-应用程序发布 #

前言 #

至此，我们的工作已经完成了 100%，只要你保证不做更改，那么自动更新就没必要。但，你能确保真不做任何修改吗？

如果有一天，你期望如下图一样，发布了最新版本，用户能收到更新提示，那自动更新就必须得整了。

流程 #

按照我的理解，应用程序的安装包存放在某台云服务器上，里面存放的是新版本的应用程序。

当我安装的应用程序运行时，会进行自动检测，检测到本地的应用程序与线上服务器的应用程序，版本不一致时，发现有新版本，那么就需要提示，告知有新版本，是否进行更新。

那么如何实现自动更新呢？

1. 纯云端化 #

可能有人不太理解，我来细说一哈～

我说 electron 就是套个壳，应该没人反驳我吧？假设我们现在不需要用到任何原生能力，就纯粹的使用 electron 套个壳，通过 webview 的方式加载一个云端链接。如果你想实现内容最新，那么只需要保证云端服务器上的代码是最新的即可，不需要进行应用发版。

说的通俗点，我在 electron 中通过 webview 的方式加载 https://juejin.cn，这时候排版有些问题，更改了一小部分代码，讲道理我需要应用程序发版吗？不需要！

2. electron-updater #

网上很多自动更新配置的文章，大家可以自行前往查询一下，下面给大家摘抄一部分组内项目的自动更新的代码（脱敏过的），或者小伙伴们可以看看 electron-builder 文档

在 package.json 中，我们配置一下 publish

{
  "build": {
    "publish": [
      {
        "provider": "generic",
        "url": "http://xxxxxx/download/",
      }
    ]
  }
}

然后我们去应用程序主进程代码中，调用 electron-updater 模块检测更新

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

function checkVersionUpdate() {
  autoUpdater.autoDownload = false; // 将自动下载包设置为false

  //检测更新
  autoUpdater.checkForUpdates();

  //监听'error'事件
  autoUpdater.on('error', (err) => {});

  // 检查更新是否已开始时发出
  autoUpdater.on('checking-for-update', () => {});

  // 检测有可更新的应用包
  autoUpdater.on('update-available', (info) => {});

  // 检测没有可用更新时发出
  autoUpdater.on('update-not-available', (info) => {});

  // 下载可更新的安装包
  autoUpdater.on('update-downloaded', (info) => {});

  // 监听下载进度
  autoUpdater.on('download-progress', (info) => {});
}

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

应用更新的依据是 .yml 文件，由于 autoUpdater 的一些方法是只能在打包 release 时才会触发，也就是你想调试一下样式或者自测，你每次改完代码都需要 build 一下，极度蛋疼，所以我们可以在本地建一个测试用的 .yml。

这也就是为什么你常会看到这样的一段代码

export function isDev() {
  return process.env.NODE_ENV === 'development';
}

app.on('ready', () => {
  if (isDev()) {
    autoUpdater.updateConfigPath = path.join(__dirname, '../dev-update.yml');
  }
  checkVersionUpdate();
});

这里的 dev-update.yml 就是我们默认创建用于调试的 .yml

自动更新的方式有许多种，你可以自己搭一个服务器放安装包，也可以基于 github 方案实现，小伙伴可以私下研究一波，有问题可在群里提问～

本地化+云端化结合 #

一般来讲，我们的应用很复杂，模块很多，那么势必会存在一些模块不常更新，一些模块经常更新。

怎么理解呢，我举个小例子，你现在在做一个音乐播放器应用。你的用户模块不常变化，而歌单模块经常迭代更新。每次更新，意味着要发版本，发版本意味着用户又要更新，用户频繁更新应用，就会吐槽，吐槽多了，你就被骂，被骂多了，你上班就不快乐，上班不快乐你就没心思打工...

那么如何解决呢？其实可以采用本地化+云端化的方式，将频繁更改迭代的模块找出来，做成云端化，也就是将歌单模块，做成 web 端，部署在云端，在 electron 中，通过 iframe / webview 的形式加载歌单模块的链接。如下图所示

A、B、C、用户模块都是不常变的，而歌单模块是频繁迭代的，所以我们将它抽离出去，变成一个独立的应用，开发完毕之后，部署在服务器上，我们在应用中通过 iframe / webview 的形式加载进来。

在下次迭代更新时，我们只需要开发歌单模块，然后部署线上即可，应用加载的始终是线上链接，这样就不需要发版了。

你可能会疑惑，如果歌单模块需要用到 electron 本地原生能力呢？比如你用的是 iframe，那么你可以通过 postMessage 进行通信。总之都有方法能够解决。

最后 #

本章节更多的是讲解自动更新的思路和核心步骤，还是希望小伙伴们能结合文档和自行查询文章去动手操作。

如果对本章节存在疑问，欢迎在评论区留言。如果觉得阿宽哪里表达错误，可指出，虚心请教～