electron自动更新版本electron-updater

2023-10-26

首先来看效果图:

  1. 打包electron生成新的exe安装包:npm run dist
  2. 使用simplehttpserver开启存放打包好的exe安装包与yml文件的本地服务(打包目录里有这两个文件)
    安装simplehttpserver: npm i simplehttpserver -g
    开启服务:simplehttpserver 文件夹名称 默认开启8000端口
  3. 安装旧版本的exe文件,就会自动检测更新啦!

下载此案例源代码:https://github.com/shunyue1320/electron-nuxt.git
在这里插入图片描述

electron主进程main.js代码如下:

const {app, BrowserWindow, ipcMain} = require('electron');
const { autoUpdater } = require ("electron-updater");
const path = require('path');

const uploadUrl = "http://localhost:8000/download/";

let mainWindow
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    useContentSize: true,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadURL("http://localhost:3000/")
  mainWindow.focus();
  mainWindow.on('closed', function () {
  	//require is not defined问题就是此处没写 mainWindow = null
    mainWindow = null
  })
  //检测更新
  updateHandle();
}
//加载成功 开启主窗口
app.on('ready', createWindow)

//检测更新
function updateHandle() {

  autoUpdater.setFeedURL(uploadUrl);
  
  //html页面加载后触发此更新
  ipcMain.on("checkForUpdate",()=>{
      //执行自动更新检查
      autoUpdater.checkForUpdates();
  })
  autoUpdater.on('error', function (error) {
    console.log("更新失败请检测网络")
  });
  
  //开始检测更新
  autoUpdater.on('checking-for-update', function () {
  //触发html子进程中的checking_for事件接收
    mainWindow.webContents.send('checking_for', "正在检测更新...")
    console.log("正在检测更新...")
  });
  
  //当发现一个可用更新的时候触发,更新包下载会自动开始
  autoUpdater.on('update-available', function (info) {
    mainWindow.webContents.send('update_available')
    autoUpdater.downloadUpdate().then((path)=>{
      console.log('download path', path)
    }).catch((e)=>{
      console.log(e)
    })
  });
  
  //当没有可用更新的时候触发
  autoUpdater.on('update-not-available', function (info) {
    console.log("当前没有可用更新")
  });
  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    console.log(progressObj)
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  
  //安装包下载完成
  autoUpdater.on('update-downloaded', function () {
    mainWindow.webContents.send('update_downloaded')
    ipcMain.on('isUpdateNow', (e, arg) =>{
      console.log(arguments);
      console.log("开始更新");
      //退出并安装
      autoUpdater.quitAndInstall();
    });
  });

  //获取当前版本
  ipcMain.on('app_version', (event) => {
    event.sender.send('app_version', { version: app.getVersion() });
  });

}

index.html代码如下:

<!doctype html>
<html>
  <head>
    <title>my-nuxt</title>
    <meta data-n-head="1" charset="utf-8">
    <style>
        body {
          box-sizing: border-box;
          margin: 0;
          padding: 20px;
          font-family: sans-serif;
          background-color: #eaeaea;
          text-align: center;
        }
        #notification {
          position: fixed;
          bottom: 20px;
          left: 20px;
          width: 200px;
          padding: 20px;
          border-radius: 5px;
          background-color: white;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        .hidden {
          display: none;
        }
      </style>
  </head>
  <body>
    <div>当前版本1.0.0</div>
    <p>版本信息:<span id="version"></span></p>
    <div id="notification" class="hidden">
      <p id="message"></p>
      <button id="close-button" onClick="closeNotification()">
        下次再说
      </button>
      <button id="restart-button" onClick="restartApp()" class="hidden">
        重启更新
      </button>
    </div>
  <script>
	const { ipcRenderer } = require('electron');
	const version = document.getElementById('version');
	const notification = document.getElementById('notification');
	const message = document.getElementById('message');
	const restartButton = document.getElementById('restart-button');
	
	//获取当前版本
	ipcRenderer.send('app_version');
	ipcRenderer.on('app_version', (event, arg) => {
	  ipcRenderer.removeAllListeners('app_version');
	  version.innerText =  arg.version;
	});
	//新版本检测
	console.log("开始新版本检测")
	ipcRenderer.send('checkForUpdate');
	//发现新版本
	ipcRenderer.on('checking_for', () => {
	  console.log("进入发现新版本")
	  message.innerText = '发现新版本';
	  notification.classList.remove('hidden');
	});
	
	//发现新版本
	ipcRenderer.on('update_available', () => {
	  console.log("正在下载中...")
	  message.innerText = '正在下载中...';
	  notification.classList.remove('hidden');
	});
	
	//下载成功触发
	ipcRenderer.on('update_downloaded', () => {
	  ipcRenderer.removeAllListeners('update_downloaded');
	  message.innerText = '下载成功!是否更新?';
	  restartButton.classList.remove('hidden');
	  notification.classList.remove('hidden');
	});
	
	function closeNotification() {
	  notification.classList.add('hidden');
	}
	
	function restartApp() {
	  ipcRenderer.send('isUpdateNow');
	}
	
	//下载中触发
	ipcRenderer.on("downloadProgress", (event, progressObj)=> {
	    console.log(progressObj);
	    let downloadPercent = progressObj.percent || 0;
	    message.innerText = "正在下载..." + "downloadPercent";
	});
  </script>
</body>
</html>

警示:

当出现这个错误时,说明你没有打包安装程序进行更新,直接“ electron . ”启动程序是无法实现更新效果的!

Error: ENOENT: no such file or directory, open 'C:\Users\mi\Desktop\abc\fistapp\dev-app-update.yml'
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

electron自动更新版本electron-updater 的相关文章

随机推荐

  • 第六章——稀疏矩阵

    稀疏矩阵的基本概念 稀疏矩阵也是一种比较特殊的矩阵类型 但比起上一节提到的特殊矩阵类型 它特殊的地方不在于元素的分布而是在于稀疏矩阵中非0元素的个数s相对于矩阵元素的总个数t非常小 例如一个100 100的矩阵 若其中只有100个非0元素
  • ILRuntime 第一集

    一 ILRuntime的介绍 IOS无法热更的原因 苹果AppStore的审核准则中 命令禁止应用程序分配具有可执行权限的内存 带有JT功能的的脚本虚拟机无法运行 无法加载动态链接库 安卓Google Play强制64位之后也必须使用IL2
  • 有什么让你相见恨晚的 MacBook 神器?

    给大家推荐一些都是免费且能极大地提高 Mac 使用体验的小工具吧 快速启动工具 Manico 如果你和派君一样喜欢用键盘来切换应用 那么 Manico 就是你心目中的神器了 Manico 的使用非常简单 安装打开后 按下 Option 键
  • libevent源码学习(4):线程锁、条件变量(二)(调试锁)

    目录 EVUTIL ASSERT宏 开启调试锁 调试锁结构 调试锁函数 debug lock alloc debug lock free debug lock lock 加锁检测 debug lock unlock 解锁检测 调试锁下的条件
  • Java intern函数详解

    先看一个例子如果你会了那这篇文章你没必要看了 如果不会那请看下去 你一定会有收获 String s new String hello String str1 s world String str3 helloworld system out
  • Linux安装sftp服务

    处理步骤 1 关闭防火墙和selinux root localhost systemctl status firewalld firewalld service firewalld dynamic firewall daemon Loade
  • PN结图示(全网都不舍得放的图片)

    这是从必应随手搜到的 PN结的图示 很直观的可以让人理解 P 和 N 在术语里的意思 而这是从国内百度搜的国人给的图示 说实话我搜了N年 愣是没找到跟图上一样的 咱也不懂为什么 PN结图示 全网都不舍得放的图片 这里会涉及到两个基本术语 正
  • scriptmanager控件使用

    今天用到scriptmanager 顺便整理一下 网络资料 一 控件概述 ScriptManager控件包括在ASP NET 2 0 AJAX Extensions中 它用来处理页面上的所有组件以及页面局部更新 生成相关的客户端代理脚本以便
  • mysql sql 除法运算_SQL语句怎么表示除法运算?

    展开全部 select case when 除数 0 then 0 else 被除数 除数 end 一 基本概念 SQL语言 是结构化查询语言 Structured Query Language 的简称 e69da5e6ba90626169
  • 线性光耦原理与电路设计[HCNR200,HCNR201]

    1 线形光耦介绍 光隔离是一种很常用的信号隔离形式 常用光耦器件及其外围电路组成 由于光耦电路简单 在数字隔离电路或数据传输电路中常常用到 如UART协议的20mA电流环 对于模拟信号 光耦因为输入输出的线形较差 并且随温度变化较大 限制了
  • python编程题

    7 1 jmu Java Python 统计一段文字中的单词个数并按单词的字母顺序排序后输出 10 分 现需要统计若干段文字 英文 中的不同单词数量 如果不同的单词数量不超过10个 则将所有单词输出 按字母顺序 否则输出前10个单词 注1
  • 【BUUCTF】Web题目 WriteUp

    Web类题目 Basic 极客大挑战 Secret File F12查看源码 发现一个网址 点击查看 进入后 发现转跳连接action php 点击后显示查阅结束 考虑使用burp抓包 直接查看secr3t php 发现flag php 但
  • 如何在 CentOS 里下载 RPM 包及其所有依赖包

    https blog csdn net linuxnews article details 53244315 方法一 利用 Downloadonly 插件下载 RPM 软件包及其所有依赖包 默认情况下 这个命令将会下载并把软件包保存到 va
  • 如何解决深度学习中的过拟合问题?

    在深度学习中 过拟合是一个常见的问题 它指的是模型在训练集上表现良好 但在测试集或新样本上表现较差的现象 过拟合的出现主要是由于模型过度拟合训练数据 过多地记住了训练集中的噪声和细节 导致模型在泛化到未见过的数据时失效 然而 我们可以采取一
  • SpringMVC和SpringBoot接收复杂集合参数,集合对象

    在SpringMVC和SpringBoot中 我们有这样一个场景 就是接受前端复杂的对象数组 或者多个数组 这是我们可以用 RequestBody注解 来解析请求体中的数据 但是值得注意的是在GET请求是不能进行该种方式的操作 因为GET请
  • Kali实现msfvenom在Windows和Linux靶机下后门漏洞

    项目场景 Kali实现msfvenom在Windows和Linux靶机下后门漏洞 情景复现 实验环境 Kali Debian 6 64位 Windows10 Centos7 环境 版本 kali Debian 6 64位 Windows w
  • 五十二.L1-063 吃鱼还是吃肉

    include
  • Qt子线程控制主界面UI控件

    在子线程里控制主界面的UI控件有两种方法 第一种是在子线程中发送信号 然后在主线程中去更新 第二种方法是在子线程中创建同样的对象 然后把主界面中控件的指针赋给创建的对象 第一种方法在此不做实例展示 在此通过一个简单的例子展示第二种方法 下面
  • qt操作文件进行读写操作

    一 加上头文件 include
  • electron自动更新版本electron-updater

    首先来看效果图 打包electron生成新的exe安装包 npm run dist 使用simplehttpserver开启存放打包好的exe安装包与yml文件的本地服务 打包目录里有这两个文件 安装simplehttpserver npm