nwjs自动更新 node-webkit-updater

更新流程图解(全程自动更新,无需人工干预):

在这里插入图片描述

一、打包

  • 使用node-webkit-updater更新,打包方式必须是官方打包方式中的方式 2. ZIP文件
  • 具体步骤:
    package.json项目文件node包压缩为zip,然后重命名为package.nw
    图一
  • 注:不要压缩外层文件夹,直接压缩这三个文件
  • package.nw复制到与nw.exe同级的目录中,cmd cd 该目录,执行copy /b nw.exe+package.nw yourappname.exe,当前目录会生成一个yourappname.exe,即为主程序,nw.exepackage.nw可删除。
    在这里插入图片描述
  • 注:这种打包方式,在程序运行的时候,先执行解压工作(C:\Users\xx\AppData\Local),然后执行exe程序,如果程序文件较多,程序启动就会越慢,官方也有说明。

二、node-webkit-updater使用

  • 安装。cmd cdpackage.json所在文件夹,执行npm install node-webkit-updater安装模块。
    注:小编是.neter,前端er可以用VSCode执行各种命令
  • 安装成功后,新建js如下:
/*
 1. Check the manifest for version (from your running "old" app).
 2. If the version is different from the running one, download new package to a temp directory.
 3. Unpack the package in temp.
 4. Run new app from temp and kill the old one (i.e. still all from the running app).
 5. The new app (in temp) will copy itself to the original folder, overwriting the old app.
 6. The new app will run itself from original folder and exit the process.
*/

var gui = require('nw.gui');
var pkg = require('../package.json'); // Insert your app's manifest here
var updater = require('node-webkit-updater');
var upd = new updater(pkg);
var path = require("path");

//此处自定义下载目录
//var parentPath= path.resolve(gui.__dirname, '.')
//upd.options.temporaryDirectory=path.dirname(parentPath)
var copyPath, execPath;

console.log(gui.App.argv.length);

// Args passed when new app is launched from temp dir during update
if(gui.App.argv.length>0) {
	console.log(gui.App.argv);
    // ------------- Step 5 -------------
    copyPath = gui.App.argv[0];
    execPath = gui.App.argv[1];
console.log(copyPath,execPath);
    // Replace old app, Run updated app from original location and close temp instance
    upd.install(copyPath, function(err) {
        if(!err) {
            // ------------- Step 6 -------------
			try{
				upd.run(execPath,[],null);
                gui.App.quit();
			}catch(e){
				console.log(e);
			}
            
        }
    });
}
else { // if no arguments were passed to the app
    // ------------- Step 1 -------------
    upd.checkNewVersion(function(error, newVersionExists, manifest) {
        if (!error && newVersionExists) {
            // ------------- Step 2 -------------
            var newApp= upd.download(function(error, filename) {
				console.log(error,filename)
                if (!error) {
                    // ------------- Step 3 -------------
                    upd.unpack(filename, function(error, newAppPath) {
						console.log(error,newAppPath);
                        if (!error) {
                            // ------------- Step 4 -------------
                             upd.runInstaller(newAppPath, [upd.getAppPath(), upd.getAppExec()],{});
                             gui.App.quit();
                        }
                    }, manifest);
                }
            }, manifest);

            //进度条
			 var loaded=0;
			 newApp.on('data',function(chunk){				
				 loaded+=chunk.length;
				 console.log( "New version loading " + Math.floor(loaded / newApp['content-length'] * 100) + '%');
				 document.getElementById('loaded').innerHTML="New version loading " + Math.floor(loaded / newApp['content-length'] * 100) + '%';
			 });
        }
    });
}

注:该js最好放在远程服务器,更新js文件不用更新客户端

  • 本地package.json
{
  "name": "yourappname",
  "main": "/resource/index.html",
  "single-instance": true,
  "description": "",
  "version": "1.2.0",
  "product_string": "com.yourcompanyname.appname",
  "manifestUrl": "http://xxx.xxx.com/package.json",
  "window": {
    "icon": "/resource/logo.png",
    "width": 623,
    "height": 421,
    "toolbar": false,
    "frame": false,
    "resizable": false,
    "position": "center",
    "transparent": true,
    "show": false //解决双击后白屏,窗体异常问题,页面渲染完成,记得win.show();
  },
  "node-remote": "*://*",
  "webkit": {
    "plugin": true
  }
}

注:versionmanifestUrl为更新必须字段。manifestUrl为服务器端package.json路径。

  • 服务器端package.json
{
"version": "2.1.0",
"packages": {
        "mac": {
           "url": "http://xxx.xxx.com/path to your zip/app.zip"
        },
        "win": {
           "url": "http://xxx.xxx.com/path to your zip/app.zip",
           "execPath":"app.exe"//解压完成后运行的exe名称,也就是zip包里面的exe名称
        },
        "linux32": {
           "url": "http://xxx.xxx.com/path to your zip/app.zip"
        }
    }
}

注:zip是您的exe所在文件夹的所有文件的压缩(Ctrl+A然后压缩),不是压缩您的项目文件夹!服务器端package.json中的Version需与zip中package.json中的版本保持一致!

在app登陆页,或者首页,添加js的引用,让服务器端version大于本地version即可触发升级

2020.11.11新增用独立exe文件实现更新

nwjs桌面应用升级方案 支持增量全量更新

好运~~~

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
使用electron-builder和electron-updater给项目配置自动更新可以分为以下几个步骤: 1. 安装所需依赖: - 在项目根目录下运行以下命令安装electron-builder和electron-updater: ```shell npm install electron-builder electron-updater --save-dev ``` 2. 配置electron-builder: - 在项目根目录下创建一个名为`electron-builder.json`的文件,用于配置构建选项。以下是一个示例配置文件: ```json { "appId": "com.example.app", "productName": "MyApp", "linux": { "target": "deb" }, "mac": { "target": "dmg", "category": "public.app-category.developer-tools" }, "win": { "target": [ { "target": "nsis", "arch": [ "x64", "ia32" ] } ] }, "directories": { "output": "build" }, "publish": { "provider": "github", "owner": "your-github-username", "repo": "your-github-repo", "private": true } } ``` 上述示例配置文件中,`appId`是应用程序的ID,`productName`是应用程序的名称,`linux`、`mac`、`win`分别表示不同平台的构建选项,`directories.output`指定构建输出目录,`publish`配置用于自动更新的发布选项。 3. 配置自动更新: - 在主进程代码中,按照以下步骤进行配置: ```javascript const { app, autoUpdater } = require('electron'); const log = require('electron-log'); autoUpdater.logger = log; autoUpdater.logger.transports.file.level = 'info'; autoUpdater.setFeedURL({ provider: 'github', owner: 'your-github-username', repo: 'your-github-repo', private: true }); autoUpdater.on('update-available', () => { // 处理更新可用事件 }); autoUpdater.on('update-downloaded', () => { // 处理更新下载完成事件 autoUpdater.quitAndInstall(); }); app.on('ready', () => { if (process.env.NODE_ENV === 'production') { autoUpdater.checkForUpdates(); } }); ``` 上述代码中,`autoUpdater.setFeedURL`用于设置自动更新的URL,`autoUpdater.on('update-available')`用于处理更新可用事件,`autoUpdater.on('update-downloaded')`用于处理更新下载完成事件,`autoUpdater.checkForUpdates()`用于检查更新。 4. 构建和发布应用: - 在项目根目录下运行以下命令构建应用: ```shell npx electron-builder ``` - 构建完成后,可以将应用程序的安装包发布到GitHub等平台上。 以上就是使用electron-builder和electron-updater给项目配置自动更新的步骤。请根据自己的实际情况进行配置和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宁不凡啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值