Electron autoUpdater实现Windows安装包自动更新的方法

Electron帮助我们突破浏览器的界限,通过Electron构建的桌面应用拥有各种浏览器应用梦寐以求的能力。

Electron提供的autoUpdater还可以帮助我们实现桌面应用的自动更新。

文件结构

首先,我们已经有了一个基于Electron做的应用,项目中有两个package.json。这样做的一个原因是将devDependencies和dependencies分开了,另外就是不需要在打包的时候再去指定哪些依赖不需要一起打到安装包里面去了(通过ignore参数)。

目录结构类似于这样:

myapp -node_modules -package.json -app -js -css -index.html -main.js -package.json

外面的package.json内容类似于:

{ "name": "myapp", "main": "app/main.js", "scripts": { "start": "electron ." }, "devDependencies": { "electron-prebuilt": "^1.2.7" } }

里面的package.json的内容类似于:

{ "name": "myapp", "version": "1.0", "main": "main.js", "description": "my app", "scripts": { "start": "electron ." }, "dependencies": {} }

注意里面的package.json中的name,version,description是必填的,接下来打包会用到。

electron-squirrel-startup

为了使最后的安装包能够实现自动更新,我们需要对现有的应用做一些改动,使它可以处理一些启动或者安装时的事件。
我们可以在main.js里面加入一些处理的代码或者方便起见,我们可以直接使用electron-squirrel-startup。

先安装:

npm install electron-squirrel-startup --save

因为需要在main.js里面用到,我们需要将其安装在app里面。

在main.js里面使用它,第一行加入如下代码即可:

if (require('electron-squirrel-startup')) return;

有兴趣的童鞋可以一起跟我去看看electron-squirrel-startup做了什么事情,急着打包的童鞋可以直接忽略这一段:

在myapp/app/node_modules/electron-squirrel-startup下面有一个index.js:

var path = require('path'); var spawn = require('child_process').spawn; var debug = require('debug')('electron-squirrel-startup'); var app = require('electron').app; var run = function(args, done) { var updateExe = path.resolve(path.dirname(process.execPath), '..', 'Update.exe'); debug('Spawning `%s` with args `%s`', updateExe, args); spawn(updateExe, args, { detached: true }).on('close', done); }; var check = function() { if (process.platform === 'win32') { var cmd = process.argv[1]; debug('processing squirrel command `%s`', cmd); var target = path.basename(process.execPath); if (cmd === '--squirrel-install' || cmd === '--squirrel-updated') { run(['--createShortcut=' + target + ''], app.quit); return true; } if (cmd === '--squirrel-uninstall') { run(['--removeShortcut=' + target + ''], app.quit); return true; } if (cmd === '--squirrel-obsolete') { app.quit(); return true; } } return false; }; module.exports = check();

它的代码只有短短几十行,做的事情也很简单,注意返回值为true的那几行,基本上来说就是安装时,更新完成时,卸载时 main.js都会被调用,我们需要根据不同的情况做不同的事情,完成这些事情后不要启动应用(会出错),直接退出就好。

正常启动前我们需要去检测是否有新的安装包,之后下载新包,重新安装,重启应用,为了做到这一点,我们需要在main.js里面加入如下代码:

app.on('ready', () => { //安装后第一次启动不去检测更新,go做的事情就是启动我们的应用 if (process.argv[1] == '--squirrel-firstrun') { go(); return; } /* 设置自动更新的feedURL,本地测试可以设置为类似于:8080/latest * 在latest文件夹下放着三个我们的安装文件(Setup.exe,RELEASES,myapp-1.0-full.nupkg),下面会讲到 * / autoUpdater.setFeedURL(feedURL); autoUpdater.on('update-downloaded', function() { // 下载完成,更新前端显示 autoUpdater.quitAndInstall(); }); try { // 不是安装应用的情况下启动下回出错,此时直接正常启动应用 autoUpdater.checkForUpdates(); } catch (ex) { go(); return; } // createWindow是我们自己定义的方法,用来创建窗口,此处用来创建检测更新的窗口 createWindow({ name: 'updateWindow', url: 'check-for-updates.html', title: "checkForUpdates", icon: icon, frame: false, width: 1306, height: 750 }); });

自动更新后台搭建

var express = require('express'); var app = express(); app.use(express.static('releases')); var server = app.listen(8080, function() { var host = server.address().address var port = server.address().port console.log("应用实例,访问地址为 %s:%s", host, port); });

文件结构如下:

autoupdate-backend -package.json -index.js -node_modules -releases -latest

此时latest文件夹里面还是空的,之后我们开始打包,将打包出来的三个文件放在此处即可。

electron-packager

在myapp下安装:

npm install electron-packager --save-dev npm install electron-packager -g

两种安装方式对应两种使用方式,第一种在脚本中使用,第二种的命令行使用。

脚本中使用,小姐姐在这里借助了gulp,所以需要安装gulp:

npm install gulp --save-dev npm install gulp -g

新建GulpFile.js,定义一个task:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6a792a875c5f6ef7c8da48d000cc9fb7.html