如题，需求就是要实现mac端electron应用的自动更新，因为目前也就只做了mac端。
- 首先要有个项目
- 记得搞定mac的代码签名，不然想更新？难啊。这个网上搜还挺多的，就不讲了。主要就是先成为苹果开发者，然后去帐号那边下一个证书。。。。
- 签名搞定了？你得保证你打包的应用在别人的电脑里也能打开，你的签名才是有效的喔。如果搞定了我们来看下一步。你需要在electron-builder的配置里面，填写publish字段，具体见官网说明，我是在package.json里面配置的：
{
...
"build": {
"publish": {
"provider": "generic", // 普通静态资源服务器填这个就行， 其他的看官网
"url": "服务器地址，写到路径名就行了，别加文件名"
}
}
}
- 项目中加入electron-updater, electron-log，因为electron-updater是要用在生产环境里面的，所以要在package.json的dependencies字段里面。也就是：
yarn add electron-updater, electron-log
- 那当然就是引入electron-updater了, 我用了官网的做法。不过加了一丢丢改动。这个部分我直接加在了electron的主进程文件里面。想做的是一旦主窗口重建就检查更新的操作。
import { autoUpdater } from "electron-updater";
import log from "electron-log";
export default class AppUpdater {
constructor() {
log.transports.file.level = "debug";
autoUpdater.logger = log;
autoUpdater.checkForUpdatesAndNotify();
}
}
- 在主进程中创建主窗口的代码里新建auto-updater。
import { autoUpdater } from "electron-updater";
import log from "electron-log";
import { app, BrowserWindow } from "electron";
export default class AppUpdater {
constructor() {
log.transports.file.level = "debug";
autoUpdater.logger = log;
// 非打包情况下，下面的函数不起作用，开发环境要用checkForUpdates()，但是这个函数有点烦。
autoUpdater.checkForUpdatesAndNotify();
}
}
let mainWindow = null;
app.on('ready', () => {
mainWindow = new BrowserWindow(...); // 这一堆的配置就不写了...
mainWindow.on('ready-to-show', () => {
mainWindow.show();
new AppUpdater(); // 这里进行检查更新操作。
});
});
- 然后为了可以在渲染进程里面显示有没有更新，更新进度等情况，需要实现electron-updater的事件响应。
import { autoUpdater } from "electron-updater";
import log from "electron-log";
import { app, BrowserWindow, ipcMain } from "electron";
let mainWindow = null;
let appUpdater = null;
export default class AppUpdater {
constructor() {
log.transports.file.level = "debug";
autoUpdater.logger = log;
// 关掉自动下载，如果需要也可以打开，我这里不需要
autoUpdate.autoDownload = false;
autoUpdater.on('update-available', () => {
if (mainWindow && !mainWindow.isDestroyed()) {
// 通知渲染进程有更新
mainWindow.webContents.send('update-available');
}
});
autoUpdater.on('error', () => {
if (mainWindow && !mainWindow.isDestroyed()) {
// 提示更新错误
mainWindow.webContents.send('update-error');
}
});
autoUpdater.on('download-progress', (progressInfo) => {
if (mainWindow && !mainWindow.isDestroyed()) {
// 通知下载进度
mainWindow.webContents.send('download-progress', progressInfo);
}
});
autoUpdater.on('update-downloaded', () => {
// 下载完直接安装
autoUpdater.quitAndInstall();
});
// 非打包情况下，下面的函数不起作用，开发环境要用checkForUpdates()，但是这个函数有点烦。
autoUpdater.checkForUpdatesAndNotify();
}
startDownload () {
autoUpdater.downloadUpdate();
}
}
app.on('ready', () => {
mainWindow = new BrowserWindow(...); // 这一堆的配置就不写了...
mainWindow.on('ready-to-show', () => {
mainWindow.show();
appUpdater = new AppUpdater(); // 这里进行检查更新操作。
});
});
app.on('window-all-closed', () => {
ipcMain.removeAllListeners();
});
const handleStartDownload = () => {
appUpdater && appUpdater.startDownload();
};
// 这个主要是为了可以让用户手动更新。
ipcMain.on('startDownload', handleStartDownload);
- 好了，接下来把事件接起来写UI。在渲染进程那边用ipcRenderer.on去接入每一个事件，顺带进行更新就行。
一些坑点：
- auto-updater依赖打包生成的latest-mac.yml检测有没有新的版本，如果这个文件里面的version字段大于当前使用的版本，那么会提示更新可用，所以一定要把这个文件上传到服务器，最好的话就把打包生成的整个文件夹发到服务器。
- 自动生成的latest-mac.yml的version，以及打包得到的包的version来自app(双package.json的会有这个文件夹，没有的忽略)的package.json的version字段，也就是为了能自动更新，你每次都要去改这个字段。
- autoUpdater每次更新都会去下载zip文件，所以记得这个要上传上去。
- 上传到服务器的包名一定要和latest-mac.yml中包的名字是相同的，因为你上传的时候可能自己会改名字。如果通过latest-mac.yml中的包名作为路径在你服务器里面找不到的话，那更新会失败。
- 一定要代码签名之后才能够自动更新，别想着跳过。
网友评论