使用 electron-updater 自動更新應用

Mcbai發表於2018-12-16

前端工程師可以使用 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。

  1. 然後對 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 等進行免費託管，詳細參考文件。

  1. 建立檔案服,測試環境可以直接用 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/ 就行。

  1. 最後，檢查更新的程式碼

程式碼我就不寫了，百度和文件裡都有，這個比較簡單，你想要自動檢查更新還是使用者手動檢查更新，都看你心情。

相關文章