如何使用电子更新器自动更新电子应用程序? [英] How to auto update the electron application using the electron-updater?

问题描述

我有一个 angular 应用程序，它已使用电子生成器转换为桌面应用程序.现在，我正在尝试在其中实现自动更新功能.我不希望电子生成器将更改发布到 github 存储库.(注意:整个应用程序都在一个私有的 github 存储库上.)我想手动上传必要的 .dmg、.zip、.yml 文件到发布标签，我希望自动更新程序可以获取这些文件.我怎样才能做到这一点?

I have an angular app which has been converted into a desktop app using the electron-builder. Now, I am trying to implement the auto-updates features into it. I don't want electron-builder to publish the changes to the github repository. (Note: The whole app is on a private github repo.) I want to manually upload the necessary .dmg, .zip, .yml files to the release tag and I want that to be picked up by the auto updater. How can I achieve this?

目前，我将源 .zip 和 .tar.gz 作为发布标签的一部分.每当我尝试在应用程序准备好时调用 autoUpdater.checkForUpdates() 时，我都会收到以下错误消息:

Currently, I have the source .zip and .tar.gz as part of my release tag. And whenever I try to invoke the autoUpdater.checkForUpdates() when the app is ready, I get the following error saying:

Error: ENOENT, dev-app-update.yml not found in /Users/userX/project-web/build/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar
at notFoundError (ELECTRON_ASAR.js:108:19)
    at fs.readFile (ELECTRON_ASAR.js:536:16)
    at go$readFile (/Users/userX/project-web/build/node_modules/graceful-fs/graceful-fs.js:85:14)
    at readFile (/Users/userX/project-web/build/node_modules/graceful-fs/graceful-fs.js:82:12)
    at readFile (/Users/userX/project-web/build/node_modules/universalify/index.js:5:67)
From previous event:
    at /Users/userX/project-web/build/node_modules/electron-updater/src/AppUpdater.ts:460:27
    at Generator.next (<anonymous>)
From previous event:
    at MacUpdater.loadUpdateConfig (/Users/userX/project-web/build/node_modules/electron-updater/src/AppUpdater.ts:456:33)
    at Lazy.AppUpdater.configOnDisk (/Users/userX/project-web/build/node_modules/electron-updater/src/AppUpdater.ts:142:43)
    at Lazy.get value [as value] (/Users/userX/project-web/build/node_modules/lazy-val/src/main.ts:18:23)
    at /Users/userX/project-web/build/node_modules/electron-updater/src/AppUpdater.ts:340:46
    at Generator.next (<anonymous>)
    at runCallback (timers.js:696:18)
    at tryOnImmediate (timers.js:667:5)
    at processImmediate (timers.js:649:5)
From previous event:
    at MacUpdater.getUpdateInfoAndProvider (/Users/userX/project-web/build/node_modules/electron-updater/src/AppUpdater.ts:336:43)
    at /Users/userX/project-web/build/node_modules/electron-updater/src/AppUpdater.ts:363:31
    at Generator.next (<anonymous>)
From previous event:
    at MacUpdater.doCheckForUpdates (/Users/userX/project-web/build/node_modules/electron-updater/src/AppUpdater.ts:360:34)
    at MacUpdater.checkForUpdates (/Users/userX/project-web/build/node_modules/electron-updater/src/AppUpdater.ts:220:35)
    at Timeout.check [as _onTimeout] (/Users/userX/project-web/desktop/src/updater.ts:15:17)
    at ontimeout (timers.js:427:11)
    at tryOnTimeout (timers.js:289:5)
    at listOnTimeout (timers.js:252:5)
    at Timer.processTimers (timers.js:212:10)

这是我的代码:

更新程序.ts

import { autoUpdater } from 'electron-updater';
import { dialog, BrowserWindow, ipcMain } from 'electron';

const log = require('electron-log');
let downloadProgress: number;
log.transports.file.level = "debug";
autoUpdater.logger = log;

autoUpdater.autoDownload = false;

export function check() {
    autoUpdater.checkForUpdates();

autoUpdater.on('checking-for-update', () => {
    dialog.showMessageBox({
        type: 'info',
        title: 'Update Available',
        message: 'A new version of app is available. Do you want to update now?',
        buttons: ['Update', 'No']
    }, (index) => {
        if (index) {
            return;
        } else {
            autoUpdater.downloadUpdate();

            let proWin = new BrowserWindow({
                width: 350,
                height: 35,
                useContentSize: true,
                autoHideMenuBar: true,
                maximizable: false,
                fullscreen: false,
                fullscreenable: false,
                resizable: false,
                title: 'Downloading Update'
            });
            proWin.loadURL(`file://$(__dirname)/progress`);

            proWin.on('closed', () => {
                proWin = null;
            });

            ipcMain.on('download-progress-request', (e) => {
                e.returnValue = downloadProgress;
            });

            autoUpdater.on('download-progress', (d) => {
                downloadProgress = d.percent;
                autoUpdater.logger.info(downloadProgress);
            });

            autoUpdater.on('update-downloaded', () => {
                if (progressWindow) progressWindow.close();

                dialog.showMessageBox({
                    type: 'info',
                    title: 'Update Ready',
                    message: 'A new version of app is ready. Quit and Install now?',
                    buttons: ['Yes', 'Later']
                }, (index) => {
                    if (!index) {
                        autoUpdater.quitAndInstall();
                    }
                });
            });
        }
    });
});

}当应用程序准备好时，updater.ts 中的 check() 方法从 main.ts 调用，如下所示:

} The check() method in the updater.ts is invoked from the main.ts when the app is ready as follows:

app.on('ready', async () => {
   mainWinProcess() // handles all the browser window ops.
   createTray();
   setTimeout(updater.check, 2000); 
});

package.json 如下:

package.json as follows:

{
    "name": "project-web",
    "productName": "Project Web X",
    "version": "1.0.0",
    "author": "applecool",
    "description": "A func app",
    "main": "./main.js",
    "dependencies": {
        "electron-log": "2.2.17",
        "electron-updater": "4.0.4",
        "path": "0.12.7",
        "url": "0.11.0",
        "fs-extra": "7.0.1",
        "decompress-zip": "0.3.1"
    },
    "scripts": {
        "mac": "NODE_ENV=production ./node_modules/gulp/bin/gulp.js --gulpfile ./ops/gulpfile.js mac",
        "mac-dev": "NODE_ENV=development ./node_modules/gulp/bin/gulp.js --gulpfile ./ops/gulpfile.js mac-dev",
        "start": "NODE_ENV=development ./node_modules/.bin/electron index.js --debug --enable-logging",
        "start-mac-setup-dev": "build --mac --config electron-builder-dev.yml",
        "start-mac-setup": "build --mac"
    },
    "devDependencies": {
        "@types/node": "^10.12.9",
        "electron": "3.0.10",
        "electron-builder": "20.36.2",
        "electron-is-dev": "1.0.1",
        "electron-reload": "1.3.0",
        "gulp": "4.0.0",
        "icon-gen": "2.0.0",
        "jimp": "0.5.6",
        "os": "0.1.1",
        "zip-folder": "1.0.0",
        "devtron": "1.4.0"
    },
    "build": {
        "appId": "com.projectweb.x"
    }
}

谁能帮我指出正确的方向.我正在尝试在开发环境中执行此操作.

Could anyone please point me in a right direction. I am trying to do this in the dev environment.

谢谢.

推荐答案

如果你想测试，只需启动一个本地服务器，然后将你的文件(dmg、zip、yml、json)放在那里(假设它在 localhost:3000 上).然后，调用 API .setFeedURL(document here).

If you want to test, just start a local server then put your files (dmg, zip, yml, json) there (assuming that's on localhost:3000). Then, call API .setFeedURL (document here).

例如:autoUpdater.setFeedURL("http://localhost:3000/latest-mac.json") 并调用 autoUpdater.checkForUpdates().

电子制造商文档中的注释:

Note from electron-builder document:

注意为了开发/测试更新的UI/UX无需打包您需要在应用程序中有一个名为 dev-app-update.yml 的文件项目的根目录，与您的发布设置相匹配电子构建器配置(但采用 yaml 格式).但它不是推荐，更好地测试已安装应用程序的自动更新(尤其是在 Windows 上).Minio 推荐作为本地服务器测试更新.

Note that in order to develop/test UI/UX of updating without packaging the application you need to have a file named dev-app-update.yml in the root of your project, which matches your publish setting from electron-builder config (but in yaml format). But it is not recommended, better to test auto-update for installed application (especially on Windows). Minio is recommended as a local server for testing updates.

这篇关于如何使用电子更新器自动更新电子应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！