大家好。
在上一篇文章中，我试图解释**"如何用React构建和发布一个电子应用？"** 如果你还没有读过，你可以在这里找到它。
在这篇文章中，我将继续在同一个项目上工作。我将整合electron自动更新器。如果你已经有一个电子项目，那么你可以跳过前面的文章，从这篇文章继续。
在开始开发之前，我想先解释一下流程。有了自动更新器，应用程序将每10分钟检查一次Github的更新*（我用的是10分钟，但也可以改变）。*如果有新的版本，应用程序将下载更新的版本，并期待用户通过对话框进行确认，如果用户同意，应用程序将更新并重新启动。
让我们开始开发吧!
作为第一步，我通过以下命令将electron-updater库安装到项目中。有些版本可能会抛出404错误。正因为如此，我宁愿使用版本 4.6.5*.*这个库希望你的系统里有GH_TOKEN环境变量。
npm i electron-updater@4.6.5
然后为了能够监听和下载更新，我必须在electron.js中做一些改变。作为第一个改动，我在文件的顶部定义了autoUpdater对象。(GitHub electron.js/第4行)
const { autoUpdater } = require(“electron-updater”);
正如我之前提到的，应用程序将每10分钟检查一次更新，我使用了setInterval 方法 。我在文件的顶部将我的实例定义为空。(GitHub electron.js/第6行)
let updateInterval = null;
我把它定义为null，因为这个方法应该在应用程序启动时开始检查更新，在更新下载/安装过程中，应用程序应该停止检查新的更新，直到这个过程结束。为了开始检查更新，我必须做以下改变。
之前。
app.whenReady().then(createWindow);
之后（GitHub electron.js/第30行至第33行）。
app.whenReady().then(() => {
createWindow();
updateInterval = setInterval(() => autoUpdater.checkForUpdates(), 600000);
});
在这个改动之后，应用程序能够检查更新了。现在，我必须为更新过程的管理做几个更新。在这一点上，我将使用两个不同的事件。可以使用更多，但对于本教程来说，这两个已经足够了。要查看所有的事件，可以使用这个链接。
- 更新识别
- 更新下载
让我们继续从更新识别开始。我在更新识别事件中使用了下面的代码块。基本上，当一个新的更新可用时，应用程序将显示一个信息对话框。如果你不想显示对话框，你需要改变粗体部分。如果你想使用像教程中那样的对话框，你必须像下面这样更新第一行，并将对话框对象纳入electron.js。
之前。
const { app, BrowserWindow } = require(‘electron’);
之后（GitHub electron.js/第1行）。
const { app, BrowserWindow, dialog } = require(‘electron’);
然后（GitHub electron.js/第47行至第57行）。
autoUpdater.on("update-available", (_event, releaseNotes, releaseName) => {
const dialogOpts = {
type: 'info',
buttons: ['Ok'],
title: 'Update Available',
message: process.platform === 'win32' ? releaseNotes : releaseName,
detail: 'A new version download started. The app will be restarted to install the update.'
};
dialog.showMessageBox(dialogOpts);
updateInterval = null;
});
作为最后一步，我将通知用户已经完成的下载。为了能够做到这一点，我使用了以下事件。当下载完成后，系统会触发下面的事件，这个事件会像前面的事件一样显示一个信息对话框。但是这一次，系统会倾听回答，如果用户点击重启，系统就会更新应用并重启。可以在事件中写一个不同的场景。为了能够做到这一点，应该改变粗体部分。(GitHub electron.js/第59行至第70行)
autoUpdater.on(“update-downloaded”, (_event, releaseNotes, releaseName) => {
const dialogOpts = {
type: ‘info’,
buttons: [‘Restart’, ‘Later’],
title: ‘Application Update’,
message: process.platform === ‘win32’ ? releaseNotes : releaseName,
detail: ‘A new version has been downloaded. Restart the application to apply the updates.’
};
dialog.showMessageBox(dialogOpts).then((returnValue) => {
if (returnValue.response === 0) autoUpdater.quitAndInstall()
});
});
在开始测试之前，我只有几个小改动。在第一篇文章中，我在package.json文件中增加了一个构建部分。我必须在构建部分添加几个新的字段。更新后的代码应该是这样的。(GitHub package.json/第54行至第56行)
“build”: {
“appId”: “tutorial.reactElectron”,
“productName”: “React Electron App Tutorial”,
“copyright”: “Cinarrtolga”,
“mac”: {
“publish”: {
“provider”: “github”,
“owner”: “cinarrtolga”,
“repo”: “ART-React-Electron-App”
}
},
“win”: {
“publish”: {
“provider”: “github”,
“owner”: “cinarrtolga”,
“repo”: “ART-React-Electron-App”
}
},
“files”: [
“build/**/*”,
“node_modules/**/*”
],
“publish”: {
“provider”: “github”,
“owner”: “cinarrtolga”
}
}
现在，应用程序已经准备好进行测试了。作为提醒，如果你试图使用一个私有仓库，那么你应该在package.json里有一个github访问令牌*。*我在之前的教程中提到了这一点。此外，你应该在环境变量中拥有与GH_TOKEN变量名称相同的令牌。GH_TOKEN 变量对公共资源库也是必需的。
为了能够测试更新功能，我在Github上发布了V0.1.2和V0.1.3 ，然后将V0.1.2下载到我的本地机器上，希望能看到更新弹出。
截图1：更新的软件包（V0.1.2）
更新-可用 事件看起来像。
**屏幕截图2：**更新-可用事件。
更新-下载 事件看起来像。
**屏幕截图3：**更新-下载事件。
在所有的改变之后，如果应用程序以白色的空白屏幕开始，那么下面的方法调用应该被更新。
之前（GitHub electron.js/第21行）。
win.loadURL(startUrl);
之后（GitHub electron.js/第22行）。
win.loadURL(‘file:///’ + __dirname + “/index.html”);
另外，如果你试图在本地测试自动更新器，它可能无法工作。为了能够在本地运行它，项目应该有dev-app-update.yml ，而electron.js应该有如下条件。(下面的代码只是一个例子。 该项目 并不包括它）。
if (isDevEnv) {
autoUpdater.updateConfigPath = path.join(__dirname, 'dev-app-update.yml');
}
可以创建很多不同的更新场景。为了分享这个过程的基本信息，我试着创建一个简单的场景。这里是该教程的更新源代码。希望它可能会有帮助。:)
