使用 electron-updater 自动更新应用

[spivet]

前端工程师可以使用 Electron 非常方便的编写出 PC 端应用，而应用更新的方式也有很多，详细可见更新应用程序。

我的项目是基于 electron-vue 搭建的，构建打包生成安装包，则用的是 electron-builder，所以更新自然选择 electron-updater。

1. 要实现自动更新，首先需要安装 electron-updater 包：

yarn add electron-updater@3.1.5 -D

这里有个坑，如果你跟我一样使用的 electron-vue 搭建的项目，那 electron 的版本应该也是 2.x，截止到 2018-12-16，electron-vue 使用的依然是 "electron": "^2.0.4"，如果你直接安装最新的 electron-updater，那你的更新程序是会报错的。

所以这里有两个方案，一个是升级你的 electron，还有一个是安装 3.x 的 electron-updater。

2. 然后对 package.json 做一点小改动：

  ...
  "build": {
    "productName": "xingsanhao",
    "appId": "com.example.yourapp",
    "directories": {
      "output": "build"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://10.0.1.42:88/"
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],
    ...

build 里的内容是 electron-builder 打包需要的配置，现在我们需要在里面加入 electron-updater 需要的配置 publish， 我这里选用的是普通服务器，当然你也可以使用 GitHub 等进行免费托管，详细参考文档。

3. 创建文件服,测试环境可以直接用 express 快速搭建：

// app.js

var express = require('express')
var fs = require('fs')
const path = require('path')
var app = express()

app.use(express.static(path.join(__dirname, './client')))

var server = app.listen(88, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

打包生成的安装包和 latest.yml 文件就放在 client 这个文件夹里，这样我们就可以通过 http://10.0.1.42:88/latest.yml 访问到 latest.yml 这个文件。

所以在 package.json 里的配置中，publish 下的 url 项就直接写 http://10.0.1.42:88/ 就行。

4. 最后，检查更新的代码

代码我就不写了，百度和文档里都有，这个比较简单，你想要自动检查更新还是用户手动检查更新，都看你心情。