谁能帮我说明从头如何使用自动更新的电子。如何使用正确的包和编写正确的CLI有一个简单的应用程序,具有自动更新Windows。
非常感谢。
我试图electron-basic-updater, electron-asar-updater, electron-installer-windows
等。花了几个小时试图找出如何发布/更新我的应用程序,与electron-packager
包装和Squirrel
为自动更新才定居。他们有他们的优势。
我假设读者与电子应用工作的基本知识和我没有因此进入基础。
重要提示:必须在Windows中创建软件包/安装程序并安装应用程序的自动更新工作!
在你主app.js,添加一个IPC来处理更新方案:
ipcMain.on('check-for-update', function(event, arg) {
/* AUTO UPDATER */
const autoUpdater = electron.autoUpdater;
const os = require('os');
const {dialog} = require('electron');
/* For Windows, PATH to DIRECTORY that has nupkg and RELEASES files (Windows alone) */
/* And add "Options Indexes" to htaccess if you want listing on that dir --@thinkdj */
var releaseDIR = config.webURL + '/releases/win' + (os.arch() === 'x64' ? '64' : '32');
autoUpdater.setFeedURL(releaseDIR);
autoUpdater
.on('error', function(error){
loggit(error);
return dialog.showMessageBox(mainWindow, {
type: 'info',
icon: basePath + "/assets/refico32.ico",
buttons: ['Dang!'],
title: appName + ": Update Error",
message: "Something's not right out there. Please try again later.",
detail: "Umm... \nIt's not you, it's the server"
});
})
.on('checking-for-update', function(e) {
loggit('Checking for update at ' + releaseDIR);
})
.on('update-available', function(e) {
var downloadConfirmation = dialog.showMessageBox(mainWindow, {
type: 'info',
icon: basePath + "/assets/refico32.ico",
buttons: ['Proceed'],
title: appName + ": Update Available",
message: 'An update is available. The update will be downloaded in the background.',
detail: "Size: ~42 MB"
});
loggit('Downloading update');
if (downloadConfirmation === 0) {
return;
}
})
.on('update-not-available', function(e) {
loggit('Update not available');
return dialog.showMessageBox(mainWindow, {
type: 'info',
icon: basePath + "/assets/refico32.ico",
buttons: ['Cool'],
title: appName + ": No update available",
message: "It seems you're running the latest and greatest version",
detail: "Woot, woot! \nTalk about being tech-savvy"
});
})
.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
var index = dialog.showMessageBox(mainWindow, {
type: 'info',
icon: basePath + "/assets/refico32.ico",
buttons: ['Install Update','Later'],
title: appName + ": Latest version downloaded",
message: 'Please restart the app to apply the update',
detail: releaseName + "\n\n" + releaseNotes
});
if (index === 1) return;
force_quit = true;
autoUpdater.quitAndInstall();
});
autoUpdater.checkForUpdates();
event.returnValue = "Checking for updates: " + releaseDIR + " Install Path: " + appPath;
});
其他注意事项:1]您app.js必须处理松鼠在事件最开始。你可以写你自己的handleSquirrelEvent处理或只是一个简单的if (require('electron-squirrel-startup')) return;
会做。 2]在写这篇的时候,一次自动更新的进程已启动,有没有办法让用户取消更新过程。
为了创建安装程序,您Gruntfile.js(npm install grunt, npm install grunt-cli
后)应该是这样的
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-electron-installer');
grunt.initConfig({
'create-windows-installer': {
'ia32': {
appDirectory: "C:\\refreshie\\app\\build\\Refreshie-win32-ia32",
outputDirectory: "C:\\refreshie\\app\\build\\Distro\\Refreshie-Win-ia32",
loadingGif: "C:\\refreshie\\app\\assets\\images\\install.splash.gif",
iconUrl: "C:\\refreshie\\app\\assets\\refico.ico",
setupIcon: "C:\\refreshie\\app\\assets\\refico.ico",
signWithParams: "/a /f C:\\refreshie\\app\\build\\tools\\cert.signingkey.pfx /p F5",
noMsi: true
}
}
});
grunt.registerTask('default', ['create-windows-installer']);
};
目前,做电子自动更新的最佳方法是使用电子建设者。
NPM安装电子制造商-save-dev的
NPM安装电子更新-save
为了演示目的,得到的HTTP服务器作为您的Web主机服务器。
NPM安装HTTP服务器-save
建立包是很简单的,创建两个文件夹“构建”和“测距”,然后在剧本的package.json和运行添加此
"scripts": {
"start": "set NODE_ENV=dev&& tsc && concurrently \"npm run tsc:w\" \"electron .\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
;
"dist": "build -w --x64",
"wb": "http-server wwwroot/ -p 8080",
;
},
翔升运行DIST
自动更新,创建一个文件夹的wwwroot并假设是你的web主机服务器,并启动你的网站为:
翔升运行WB
复制一切从DIST文件夹wwwroot文件夹。
好做。
请参阅here的全部细节代码
请按照以下步骤来实现电子JS自动更新代码工作。
npm install electron-updater
(对于使用自动更新)npm install electron-log
(这将有助于看到日志中的错误)npm install electron --save-dev
npm install electron-builder --save-dev
然后,在你main.js(您的应用程序粘贴自动更新代码在所提到的入口文件)
const electron = require('electron');
const url = require('url');
const path = require('path');
const pjson = require('../package.json')
// auto update code
const log = require('electron-log');
const { autoUpdater } = require("electron-updater");
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';
log.info('App starting...');
let appversion = pjson.version;
const { app, BrowserWindow } = electron;
let homePageWindow;
function sendStatusToWindow(text, ver) {
log.info(text);
homePageWindow.webContents.send('message', text, ver);
}
function createDefaultWindow() {
homePageWindow = new BrowserWindow({
minimizable: true,
maximizable: true,
closable: true,
});
homePageWindow.maximize();
homePageWindow.webContents.openDevTools();
//homePageWindow.setMenu(null);
homePageWindow.on('closed', () => {
homePageWindow = null;
app.quit();
});
homePageWindow.loadURL(url.format({
pathname: path.join(__dirname, '../webFiles/homePage.html'),
protocol: 'file:',
slashes: true
}));
return homePageWindow;
}
// auto update conditions
autoUpdater.on('checking-for-update', () => {
sendStatusToWindow('Checking for update...', appversion);
})
autoUpdater.on('update-available', (info) => {
sendStatusToWindow('Update available.', appversion);
})
autoUpdater.on('update-not-available', (info) => {
sendStatusToWindow('Update not available.', appversion);
})
autoUpdater.on('error', (err) => {
sendStatusToWindow('Error in auto-updater. ' + err, appversion);
})
autoUpdater.on('download-progress', (progressObj) => {
let log_message = "Download speed: " + progressObj.bytesPerSecond;
log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
sendStatusToWindow(log_message, appversion);
})
autoUpdater.on('update-downloaded', (info) => {
setTimeout(function () {
sendStatusToWindow('Update downloaded..Restarting App in 5 seconds', appversion);
homePageWindow.webContents.send('updateReady');
autoUpdater.quitAndInstall();
}, 5000)
});
app.on('ready', function () {
createDefaultWindow();
autoUpdater.checkForUpdatesAndNotify();
});
app.on('window-all-closed', () => {
app.quit();
});
请参考我的代码,并在你的main.js做要紧的变化
然后设置你的应用程序的版本说1.0.0运行命令“NPM运行构建--win -p总是”产生一次构建
我使用Github上存储的应用程序组件。所以,你需要的1.0.0应用程序文件(latest.yml,建设者个有效config.yaml,app_setup1.0.0.exe,app_setup1.0.0.exe.blockmap文件)上载的git并为它创建一个发布。发布版本为1.0.0
然后该应用程序的版本改为1.0.1运行命令“NPM运行构建--win -p始终坚持”以产生第二个版本。
再次做GitHub的一步 - 你需要的1.0.1应用程序文件(latest.yml,建设者个有效config.yaml,app_setup1.0.1.exe,app_setup1.0.1.exe.blockmap文件)上载Git和创建释放它。发布版本为1.0.1
所以在你的Git项目,现在你有2个版本1.0.0和1.0.1
现在测试的事情,你需要在本地计算机上运行的1.0.0安装。因此,如果代码编写正确,你会看到1.更新可用2.更新下载的日志及其%
然后,一旦100%下载完成后的应用进行了在5秒内重新启动(按在代码中提到秒),现在您的应用程序进行更新。 Yayyyyyyyyy