Windows下支持自动更新的Electron应用脚手架的方法


Posted in Javascript onDecember 24, 2018

前言

之前写过一篇关于 Windows 下通过 Electron 自带的 autoUpdater 实现应用自动更新的文章,很多小伙伴私信问我要具体实现代码,不过因为之前一直很忙(还有懒...)。

这两周正好周末比较空,除了在 github 上搭建了一个脚手架,还顺便把实现优化了一波,下面将会带着大家从零开始详细介绍实现过程,对小白也很友好的教程哦。

从零开始

进入你的工作目录,比如 d/workspace

# 目录 d/workspace
mkdir electron-demo # 新建文件夹 electron-demo
cd electron-demo # 进入文件夹 electron-demo
npm init # 初始化 npm,一路回车即可
npm i electron --save-dev # 安装 electron 依赖
touch main.js # 新建文件 main.js
touch index.html # 新建文件 index.html

现在你的文件结构如下:

|- electron-demo
 |- main.js # 空文件
 |- index.html # 空文件
 |- package.json
 |- package-lock.json # npm 自动生成的文件
 |- node_modules

确保 package.json 的name,version,description这三个字段都不为空,main 字段的取值为 main.js 。

{
 "name": "electron-demo",
 "version": "0.0.1",
 "description": "electron-demo",
 "main": "main.js"
}

主进程和渲染进程

Electron 应用分为主进程和渲染进程。渲染进程是直接与用户产生交互的进程,也就是我们看到的一个个窗口页面,而主进程主要负责控制应用的生命周期,负责各个渲染进程的通信等。

我们的主进程代码写在 main.js 中,所以首先在你心爱的代码编辑中打开 main.js,输入如下代码:

const path = require('path');
const url = require('url');
const {
  app,
  BrowserWindow
} = require('electron');

app.on('ready', () => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true
    }
  });

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    })
  );
});

app.on('window-all-closed', () => app.quit());

再打开 index.html,输入如下代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
</body>

</html>

之后执行

# 目录 d/workspace/electron-demo
node_modules/.bin/electron .

不出意外的话你会看到一个弹出框,像这样:

Windows下支持自动更新的Electron应用脚手架的方法 

我们也可以把 node_modules/.bin/electron . 保存成 npm 脚本,方便以后调用。打开 package.json,添加如下内容:

"scripts": {
  "start": "electron ."
 }

以后只需要调用 npm start 即可。

到这里,我们已经有了一个最简单的 Electron 应用,如果你对继续开发应用本身更感兴趣的话,请移步Electron 官方文档,因为接下来我们会专注在怎么让这个应用实现自动更新。

自动更新

安装依赖

自动更新功能的实现依赖 electron-builder 和 electron-updater,所以我们需要先安装这两个依赖。

# 目录 d/workspace/electron-demo
npm i electron-builder --save-dev # 必须安装为开发依赖,否则打包会出错
npm i electron-updater --save # 必须安装为运行依赖,否则运行会出错

配置 package.json

为了配合打包 package.json 需要新增字段 build:

"build": {
  "appId": "com.xxx.app",
  "publish": [
   {
    "provider": "generic",
    "url": "http://127.0.0.1:8080"
   }
  ]
 },

同样为了执行方便,我们需要添加一个 npm 脚本,打开 package.json,添加如下内容:

"scripts": {
  "start": "electron .",
  "build": "electron-builder -w"
 }

以后只需要调用 npm run build 即可。

主进程和渲染进程

打开main.js,编辑后内容如下:

const path = require('path');
const url = require('url');
const {
  app,
  BrowserWindow,
  ipcMain 
} = require('electron');
const { autoUpdater } = require('electron-updater');
const feedUrl = `http://127.0.0.1:8080/${process.platform}`;

let webContents;

let createWindow = () => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true
    }
  });

  webContents = win.webContents;

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'src/index.html'),
      protocol: 'file:',
      slashes: true
    })
  );

  webContents.openDevTools();
};

let sendUpdateMessage = (message, data) => {
  webContents.send('message', { message, data });
};

let checkForUpdates = () => {
  autoUpdater.setFeedURL(feedUrl);

  autoUpdater.on('error', function (message) {
    sendUpdateMessage('error', message)
  });
  autoUpdater.on('checking-for-update', function (message) {
    sendUpdateMessage('checking-for-update', message)
  });
  autoUpdater.on('update-available', function (message) {
    sendUpdateMessage('update-available', message)
  });
  autoUpdater.on('update-not-available', function (message) {
    sendUpdateMessage('update-not-available', message)
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    sendUpdateMessage('downloadProgress', progressObj)
  })
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
    ipcMain.on('updateNow', (e, arg) => {
      //some code here to handle event
      autoUpdater.quitAndInstall();
    })
    sendUpdateMessage('isUpdateNow');
  });

  //执行自动更新检查
  autoUpdater.checkForUpdates();
};

app.on('ready', () => {
  createWindow();

  setTimeout(checkForUpdates, 1000);
});

app.on('window-all-closed', () => app.quit());

index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
  <script>
    const { ipcRenderer } = require('electron');

    ipcRenderer.on('message', (event, { message, data }) => {
      console.log(message, data);
      switch (message) {
        case 'isUpdateNow':
          if (confirm('现在更新?')) {
            ipcRenderer.send('updateNow');
          }
          break;
        default:
          document.querySelector('h1').innerHTML = message;
          break;
      }
    });
  </script>
</body>

</html>

打包

npm run build

第一次运行会比较慢,运行结束后会在当前目录下新增一个 dist 文件夹,dist 的目录结构如下:

|- dist
 |- win-unpacked
 |- electron-autoupdate-scaffold Setup.exe
 |- electron-autoupdate-scaffold Setup.exe.blockmap
 |- electron-builder-effective-config.yaml
 |- latest.yml

win-unpacked 下是可执行文件,但是先别着急运行,我们还缺一个后台。

自动更新后台

聪明的你一定注意到,前面代码中我们有一个:

const feedUrl = `http://127.0.0.1:8080/${process.platform}`;

所以我们现在要做的就是一个可以接受这个请求的服务。

回到你的工作目录(d/workspace)

# 目录 d/workspace
mkdir electron-server
cd electron-server
npm init
npm i koa --save
npm i koa-static --save
touch server.js

打开 server.js,输入如下内容:

// server.js
let Koa = require('koa');
let app = new Koa();
let path = require('path');

app.use(require('koa-static')(path.resolve(__dirname + '/packages')));

let server = app.listen(8080, () => {
  let { address, port } = server.address();

  console.log("应用实例,访问地址为 http://%s:%s", address, port);
});

将之前打包出来的 dist 目录下的 4 个文件(除了 win-unpacked)拷贝到这边的 packages/win32 下(新建目录 packages/win32),之后

# 目录 d/workspace/electron-server
npm start

到此为止,我们的自动更新服务就搭建完成了,现在来一波测试吧。

测试

进入 electron-demo/dist/win-unpacked 找到可执行文件,双击运行,看到打开窗口的控制台中依次输出:

checking-for-update
update-not-available

进入 electron-demo,打开 package.json,把版本号改为0.0.2,重新打包后拷贝打包文件到自动更新后台目录(d/workspace/electron-server/packages/win32)。

进入 electron-demo,打开 package.json,把版本号改为0.0.1,重新打包后再次进入 dist/win-unpacked 目录,运行 exe,看到打开窗口的控制台中依次输出:

checking-for-update
update-available

并且出现弹窗提示「现在更新?」。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
javascript实现列表切换效果
May 02 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 #Javascript
Vue.js组件高级特性实例详解
Dec 24 #Javascript
JavaScript模板引擎原理与用法详解
Dec 24 #Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
原生js实现Flappy Bird小游戏
Dec 24 #Javascript
node错误处理与日志记录的实现
Dec 24 #Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
社区两委对照检查材料
2014/08/23 职场文书
党员个人党性分析材料
2014/12/18 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
起诉书格式范文
2015/05/20 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
python超详细实现完整学生成绩管理系统
2022/03/17 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python