备案控制台
开发者社区 开发与运维 文章 正文

关于electron升级调研的心得笔记

2022-05-24 370
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 关于electron升级调研的心得笔记

调研结论

  • 应用更新官网对升级服务器有两种对应方案：具体如下方案一及方案二
  • window 环境自动更新不一定非要https http也可以。mac 下必须要是https

  • 升级过程的相关思路

    • 比较版本
    • 升级下载
    • 自动升级/手动升级

方案一：update.electronjs.org

满足条件
  • 应用运行在 macOS 或者 Windows
  • 应用有公开的 GitHub 仓库
  • 编译的版本发布在 GitHub Releases
  • 编译的版本已代码签名
参考文档

具体升级方案

自动更新功能开发时注意项

  1. 项目中用到window.print网页打印。在提升elecreon-builder版本后,打印时样式总是显示不对。elecreon-builder 的版本必须要低于20，不然就会出现这个问题。
  2. 当electron-builder 版本升级后，老的版本不能直接通过自动升级升上去。
  3. 当只跟新electron-update版本时，可以自动升级，但当当前是最新的时候点击升级会提示更新失败
  4. 当提示electron-update…至少4.0.0时，需要将electron-update放入devDependencies 中。

方案二：构建自己的更新服务器

参考文档

具体方案

客户端

升级方案

调研结论

  • 应用更新官网对升级服务器有两种对应方案：具体如下方案一及方案二
  • window 环境自动更新不一定非要https http也可以。mac 下必须要是https

  • 升级过程的相关思路

    • 比较版本
    • 升级下载
    • 自动升级/手动升级

方案一：update.electronjs.org

满足条件
  • 应用运行在 macOS 或者 Windows
  • 应用有公开的 GitHub 仓库
  • 编译的版本发布在 GitHub Releases
  • 编译的版本已代码签名
参考文档

具体升级方案

自动更新功能开发时注意项

  1. 项目中用到window.print网页打印。在提升elecreon-builder版本后,打印时样式总是显示不对。elecreon-builder 的版本必须要低于20，不然就会出现这个问题。
  2. 当electron-builder 版本升级后，老的版本不能直接通过自动升级升上去。
  3. 当只跟新electron-update版本时，可以自动升级，但当当前是最新的时候点击升级会提示更新失败
  4. 当提示electron-update…至少4.0.0时，需要将electron-update放入devDependencies 中。

方案二：构建自己的更新服务器

参考文档

具体方案

客户端

升级方案

升级方案流程
升级方案流程

此方案实现参考地址

其他写法具体方案

安装==electron-updater==

npm install electron-updater --save

修改packpage.json

"publish": [
      {
        "provider": "generic",
        "url": "http://自己ip/app/update"
      }
    ],
核心方法

主进程 主要是==handleUpdate==方法

import {app, BrowserWindow, ipcMain} from 'electron'
// 注意这个autoUpdater不是electron中的autoUpdater
import {autoUpdater} from "electron-updater"

/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
    global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`

function createWindow() {
    /**
     * Initial window options
     */
    mainWindow = new BrowserWindow({
        height: 563,
        useContentSize: true,
        width: 1000
    })

    mainWindow.loadURL(winURL)

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


//处理更新操作
    function handleUpdate() {
        const returnData = {
            error: {status: -1, msg: '检测更新查询异常'},
            checking: {status: 0, msg: '正在检查应用程序更新'},
            updateAva: {status: 1, msg: '检测到新版本，正在下载,请稍后'},
            updateNotAva: {status: -1, msg: '您现在使用的版本为最新版本,无需更新!'},
        };

        //和之前package.json配置的一样
        autoUpdater.setFeedURL('http://xxx.com/app/update');

        //更新错误
        autoUpdater.on('error', function (error) {
            sendUpdateMessage(returnData.error)
        });

        //检查中
        autoUpdater.on('checking-for-update', function () {
            sendUpdateMessage(returnData.checking)
        });

        //发现新版本
        autoUpdater.on('update-available', function (info) {
            sendUpdateMessage(returnData.updateAva)
        });

        //当前版本为最新版本
        autoUpdater.on('update-not-available', function (info) {
            setTimeout(function () {
                sendUpdateMessage(returnData.updateNotAva)
            }, 1000);
        });

        // 更新下载进度事件
        autoUpdater.on('download-progress', function (progressObj) {
            mainWindow.webContents.send('downloadProgress', progressObj)
        });


        autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
            ipcMain.on('isUpdateNow', (e, arg) => {
                //some code here to handle event
                autoUpdater.quitAndInstall();
            });
            // win.webContents.send('isUpdateNow')
        });

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

    handleUpdate();

// 通过main进程发送事件给renderer进程，提示更新信息
    function sendUpdateMessage(text) {
        mainWindow.webContents.send('message', text)
    }

    ipcMain.on("checkForUpdate", (event, data) => {
        console.log('执行自动更新检查!!!');
        // event.sender.send('reply', 'hi lee my name is yuan, age is 17');
        autoUpdater.checkForUpdates();
    });
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow()
    }
});

有更新包即会触发

  autoUpdater.on('download-progress', function (progressObj) {
        // mainWindow.webContents.send('downloadProgress', progressObj)
        const winId = BrowserWindow.getFocusedWindow().id;
        let win = BrowserWindow.fromId(winId);
        win.webContents.send('downloadProgress', progressObj)
    });

progressObj 返回的对象

  • bytesPerSecond: bps/s //传送速率
  • percent : 百分比
  • total : 总大小
  • transferred: 已经下载

使用==ipcRenderer==用于监听和发送消息向主进程
api官网地址

ipcRenderer.on 监听事件
ipcRenderer.send 发送事件
此方案实现参考地址

其他写法具体方案

安装==electron-updater==

npm install electron-updater --save

修改packpage.json

"publish": [
      {
        "provider": "generic",
        "url": "http://自己ip/app/update"
      }
    ],
核心方法

主进程 主要是==handleUpdate==方法

import {app, BrowserWindow, ipcMain} from 'electron'
// 注意这个autoUpdater不是electron中的autoUpdater
import {autoUpdater} from "electron-updater"

/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
    global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`

function createWindow() {
    /**
     * Initial window options
     */
    mainWindow = new BrowserWindow({
        height: 563,
        useContentSize: true,
        width: 1000
    })

    mainWindow.loadURL(winURL)

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


//处理更新操作
    function handleUpdate() {
        const returnData = {
            error: {status: -1, msg: '检测更新查询异常'},
            checking: {status: 0, msg: '正在检查应用程序更新'},
            updateAva: {status: 1, msg: '检测到新版本，正在下载,请稍后'},
            updateNotAva: {status: -1, msg: '您现在使用的版本为最新版本,无需更新!'},
        };

        //和之前package.json配置的一样
        autoUpdater.setFeedURL('http://xxx.com/app/update');

        //更新错误
        autoUpdater.on('error', function (error) {
            sendUpdateMessage(returnData.error)
        });

        //检查中
        autoUpdater.on('checking-for-update', function () {
            sendUpdateMessage(returnData.checking)
        });

        //发现新版本
        autoUpdater.on('update-available', function (info) {
            sendUpdateMessage(returnData.updateAva)
        });

        //当前版本为最新版本
        autoUpdater.on('update-not-available', function (info) {
            setTimeout(function () {
                sendUpdateMessage(returnData.updateNotAva)
            }, 1000);
        });

        // 更新下载进度事件
        autoUpdater.on('download-progress', function (progressObj) {
            mainWindow.webContents.send('downloadProgress', progressObj)
        });


        autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
            ipcMain.on('isUpdateNow', (e, arg) => {
                //some code here to handle event
                autoUpdater.quitAndInstall();
            });
            // win.webContents.send('isUpdateNow')
        });

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

    handleUpdate();

// 通过main进程发送事件给renderer进程，提示更新信息
    function sendUpdateMessage(text) {
        mainWindow.webContents.send('message', text)
    }

    ipcMain.on("checkForUpdate", (event, data) => {
        console.log('执行自动更新检查!!!');
        // event.sender.send('reply', 'hi lee my name is yuan, age is 17');
        autoUpdater.checkForUpdates();
    });
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow()
    }
});

有更新包即会触发

  autoUpdater.on('download-progress', function (progressObj) {
        // mainWindow.webContents.send('downloadProgress', progressObj)
        const winId = BrowserWindow.getFocusedWindow().id;
        let win = BrowserWindow.fromId(winId);
        win.webContents.send('downloadProgress', progressObj)
    });

progressObj 返回的对象

  • bytesPerSecond: bps/s //传送速率
  • percent : 百分比
  • total : 总大小
  • transferred: 已经下载

使用==ipcRenderer==用于监听和发送消息向主进程
api官网地址

ipcRenderer.on 监听事件
ipcRenderer.send 发送事件

文章标签：
iOS开发
Windows
MacOS
API
关键词：
electron笔记
刘同学酱
目录
相关文章
jcLee95
|
2月前
|
JavaScript Shell API
小笔记：Electron中关联格式、处理文件、创建链接的相关编程
小笔记：Electron中关联格式、处理文件、创建链接的相关编程
jcLee95
125 0
jcLee95
|
2月前
|
存储 Web App开发 iOS开发
Electron 从基础到实战笔记 - Electron App对象及其事件
Electron 从基础到实战笔记 - Electron App对象及其事件
jcLee95
138 0
jcLee95
|
JavaScript Shell API
笔记：Electron中关联格式、处理文件、创建链接的相关编程
本文介绍关于在Electron中绑定文件格式、在菜单中打开、使用文件API、处理桌面链接等等。
jcLee95
140 0
狐狸家的鱼
|
前端开发 JavaScript
electron入门笔记（三）- 引入bootstrap
源码：https://github.com/sueRimn/electron-bootstrap 当引入jQuery和bootstrap文件时，会报错，原因是：electron 的 Renderer 端因为注入了 Node 环境，存在全局函数 require，导致jquery 内部环境判断出现问题。
狐狸家的鱼
2142 0
狐狸家的鱼
|
Web App开发 JavaScript 索引
Electron入门笔记（一）-自己快速搭建一个app demo
一.安装Node   1.从node官网下载 ，最好安装.msi后缀名的文件，新手可以查看安装教程进行安装。 2.然后cmd进入命令窗口，输入npm -v查看node当前版本， 二.创建文件并初始化   1.
狐狸家的鱼
2430 0
狐狸家的鱼
|
Web App开发
Electron入门笔记（二）-快速建立hello world
官方的文档我没有看懂，看了不少别人的博客和文章，终于慢慢看懂了如何快速的建立一个Electron app demo，前一篇文章不是使用官方快速搭建的，而且还出了小问题，所以去撸了一遍quick-start，发现很简单 一、安装Electron 1.
狐狸家的鱼
1051 0
技术小美
|
Web App开发 JavaScript
Electron笔记
技术小美
2197 0
小满zs
|
2月前
|
移动开发 开发框架 JavaScript
Vue3 Vite electron 开发桌面程序
Vue3 Vite electron 开发桌面程序
小满zs
155 0
JYeontu
|
8月前
|
前端开发 算法 JavaScript
从零开始开发图床工具：使用 Gitee 和 Electron 实现上传、管理和分享（下）
从零开始开发图床工具：使用 Gitee 和 Electron 实现上传、管理和分享（下）
JYeontu
82 0
JYeontu
|
8月前
|
存储 Web App开发 JavaScript
从零开始开发图床工具：使用 Gitee 和 Electron 实现上传、管理和分享（上）
从零开始开发图床工具：使用 Gitee 和 Electron 实现上传、管理和分享（上）
JYeontu
125 0

热门文章

最新文章

  • 1
    无法初始化SFTP协议。主机是SFTP服务器吗
  • 2
    CentOS6、7编译安装FFmpeg
  • 3
    UI自动化测试分析与实践 | F2etest&UIRecorde
  • 4
    MySQL无损复制
  • 5
    阿里云客服电话 人工服务
  • 6
    ADB工具包15秒快速安装器，已集合ADB、FASTBOOT工具箱和最新的驱动程序
  • 7
    php求今天零点的时间缀
  • 8
    Azure Backup (2) Azure备份服务
  • 9
    两条报警信息的分析（第二篇)
  • 10
    Oracle ORA-12899
  • 1
    实现权限控制的方法
    27
  • 2
    正则表达式替换字符串的方法
    24
  • 3
    了解SENT协议及其应用
    26
  • 4
    配置applicationContext.xml文件
    29
  • 5
    使用OutputStreamWriter写入数据
    24
  • 6
    使用notifyAll唤醒所有等待线程
    20
  • 7
    CRM报表在企业中的应用：分析工具与报告自动化
    22
  • 8
    Spring Boot导购电商返利App架构设计
    21
  • 9
    定义和使用Quartz调度表达式
    20
  • 10
    Oracle游标的定义与使用
    15

    • 相关课程

    更多
  • 软件供应商发布服务实操
  • 软件供应商进阶管理实操
  • Cloud Toolkit 开发部署效率提升神器
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • 2020版大数据实战项目之DMP广告系统（第四阶段）
  • 大数据分析之企业级网站流量运营分析系统开发实战（第二阶段）

    • 相关电子书

    更多
  • 去哪儿网快速 App 开发及问题解决平台实践
  • 去哪儿网qp热更新技术的架构与实践
  • 腾讯包管理方案演进

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 搭建微信小程序（AMD 8代）
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）