Question

任何人都可以帮助我从头开始描述如何在电子中使用自动更新程序。如何使用正确的软件包并编写正确的CLI以获得在Windows中具有自动更新功能的简单应用程序。

非常感谢。

Answer 1

我试过electron-basic-updater, electron-asar-updater, electron-installer-windows等。花了几个小时尝试如何发布/更新我的应用，然后使用 electron-packager 进行打包，并使用 Squirrel 进行自动更新。他们有自己的优势。

我假设读者具有使用Electron应用程序的基本知识，因此我没有进入基础知识。

重要提示：您必须在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']);
};

Answer 2

目前，进行电子自动更新的最佳方法是使用电子生成器。

npm install electron-builer -save-dev

npm install electron-updater -save

出于演示目的，请将http-server作为Web主机服务器。

npm install http-server -save

构建包很简单，然后创建两个文件夹“build”和“dist” 在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",
      ;
 },

npm run dist

对于自动更新程序，创建一个文件夹wwwroot并假设它是您的Web主机服务器并启动您的网站：

npm run wb

从dist文件夹复制到wwwroot文件夹。

好的。

请参阅here了解详细代码

Answer 3

请按照以下步骤操作，以实现电子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 run build --win -p always”以生成第一个构建

我使用Github存储应用程序组件。因此，您需要在git上载1.0.0的应用程序文件（latest.yml，builder-effective-config.yaml，app_setup1.0.0.exe，app_setup1.0.0.exe.blockmap文件）并为其创建发行版。将发布发布为1.0.0

然后将应用程序的版本更改为1.0.1 运行命令“ npm run build --win -p always”以生成第二个构建。

再次执行github步骤-您需要在git上载1.0.1的应用程序文件（latest.yml，builder-effective-config.yaml，app_setup1.0.1.exe，app_setup1.0.1.exe.blockmap文件）并为此创建一个版本。将发布发布为1.0.1

因此，现在在git上的项目中，您有2个版本1.0.0和1.0.1

现在要测试的东西，您需要在本地计算机上运行1.0.0的安装程序。因此，如果代码编写正确，您将看到日志 1.可用更新 2.下载更新及其％

然后，一旦100％下载完成，该应用程序将在5秒钟内重新启动（按照代码中提到的秒数），然后立即更新您的应用程序。 Yayyyyyyyyy

电子自动更新Windows

3 个答案: