电子热点更新最佳实践
前言
很久以前写过一篇electron的自动更新实例,在这个里面发现无论我更改了任何东西,都必须要下载全部的更新包,安装后才能实现更新。如果我们只是更改了一部分渲染进程的代码甚至只是更新了几张图片,就需要下载全部的安装包,这样的操作对于用户来说其实是有点太不友好了。于是就有了热更新的想法,在我们只有静态资源更新或者渲染进程发生变化的时候,就可以只更新渲染进程就可以实现更新,而不必下载全部的安装包;这样的更新会更加的友好更加的便捷。
实现壹、
如果你只是想用electron的壳,而不是想用electron中带有的node环境,拿就直接使用网站的更新就好了,
win.mainWin.loadURL(winURL) // winURL 你网站的URL地址,
这样的话就是一旦你网站发生变化,你的程序就自动发生变化,但是在网页版中无法使用electron自带的node环境,这样的话有些方法就会无法使用,例如文件系统等等;一般我们在开发的时候很少使用这种方式,而是使用内嵌式的开发,即页面写在electron框架内部的,这个种形式的热更新才是我们所需要重点关注的对象。
实现贰、
在electron-vue的框架内部,热更新是不支持的,或者说electron-builder是不支持热更新的;所以我们要用其他方法来实现热更新,下面是我实现热更新的原理;
注:以下所有操作都是在配置asar为false的基础上进行的
在这个流程图中可以发现有以下几个问题:
- 渲染进程如何和主进程分开打包
- 如何压缩渲染进程的文件成zip格式
- 如何判断当前版本是热更新版本需要更新的版本;或者说热更新版本存放在哪个位置
- 在主进程中如何解压渲染进程的zip文件,删除原有的渲染进程的文件夹
- 更新完成后如何重启
ok 我们现在来一个一个解决这些疑问
① 渲染进程如何和主进程分开打包
在electron-vue中的所有webpack配置都在.electron-vue
文件夹中,处理这个问题主要还是要修改webpack配置。
在阅读过electron-vue所有webpack配置后,发现在webpack.renderer.config.js文件中配置渲染进程的打包后输出文件的位置与主进程的输出路径是一致,为了实现热更新,所以就改!!
...
// webpack.renderer.config.js文件中的配置修改为
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: path.join(__dirname, '../dist/electron/bundle')
},
...
执行yarn build 查看打包后的文件夹展示是否为
bundle为渲染进程为文件夹
static 额外的静态文件
main.js 入口文件,或者称为主进程文件
这样我们就解决了第一个问题,即渲染进程和主进程分开打包;如果我们需要热更新就可以只更新bundle文件夹就可以了
② 如何压缩渲染进程的文件成zip格式
因为我们使用的electron-vue,本身就自带node环境(以后不会重复这句话,都烦了不懂自己翻翻electron官方文档看看),所以我们可以使用node自带的文件系统;在文件压缩成zip的工具中我使用的是jszip;
## 引入需要的包
yarn add -D jszip
在.electron-vue
文件夹中新建一个build-zip.js 文件
/**
* 打包结束后将其压缩成为.zip文件
*/
const JSZip = require('jszip')
const path = require('path')
const fs = require('fs')
const zip = new JSZip()
/**
* 读取文件夹中的文件
*/
const readDir = (filePath, jszip, name = null) => {
let files = fs.readdirSync(filePath)
files.forEach((fileName) => {
let fillPath = `${filePath}/${fileName}`
let file = fs.statSync(fillPath)
if (file.isDirectory()) {
const folderPath = name ? `${name}/${fileName}` : fileName
let disList = zip.folder(folderPath)
readDir(fillPath, disList, folderPath)
} else {
jszip.file(fileName, fs.readFileSync(fillPath))
}
})
}
const buildZip = async () => {
// 文件打包后渲染进程文件输出的文件夹
const filePath = path.join(__dirname, '../build/win-ia32-unpacked/resources/app/dist/electron/bundle/')
readDir(filePath, zip)
const content = await zip.generateAsync({
type: 'nodebuffer',
compression: "DEFLATE",
compressionOptions: {
level: 9
}
})
fs.writeFileSync(path.join(__dirname, '../build/bundle.zip'), content, "utf-8")
}
buildZip()
在package.json中添加
{
"scripts": {
"build:zip": "node .electron-vue/build-zip.js",
}
}
这个scripts必须在打包完成后才能执行,否者压缩的文件不是最新的,甚至没有压缩文件产出;
打完包后产出;
这样的话就实现了,渲染进程的压缩;在更新中就可以实现只下载bundle.zip就可以更新;以前需要下载大约174MB的文件,现在只需要下载18MB的文件,下载约节省了90%流量,大大提高用户的更新速度
③ 如何判断当前版本是热更新版本需要更新的版本;或者说热更新版本存放在哪个位置
- 热更新版本存放的位置
在看过我以前写的electron的自动更新文章里提到过一个添加更新日志的配置,同样在这里我使用了一个小小的技巧;更改原有字段的含义,以方便我们使用。在原有的releaseInfo中的配置中有以下几个配置
* releaseInfo - The release info. Intended for command line usage: -c.releaseInfo.releaseNotes="new features"
* releaseName String - The release name.
* releaseNotes String - The release notes.
* releaseNotesFile String - The path to release notes file. Defaults to release-notes-${platform}.md (where platform it is current platform — mac, linux or windows) or release-notes.md in the build resources.
* releaseDate String - The release date.
* target String | TargetConfiguration
这几个配置,观察了一圈貌似只有releaseName的作用不是那么大,那就用这个配置了;将releaseName约定成热更新版本号;这样的话在使用electron-builder的检查更新机制的时候,就可以使用这个字段了。
但是我们发现在打包压缩的时候,package,json是不在bundle文件夹中,为了避免这个问题,我们在打包的时候将热更新的版本号重新写入到渲染进程的文件夹中,具体实现:
const fs = require('fs')
const path = require('path')
const { build,version } = require('../package.json')
const bundle = path.join(__dirname,'../src/renderer/bundle.json')
const { releaseInfo } = build
const setHotUpdateVersion = async () => {
const hotVersion = { version: releaseInfo.releaseName, releaseVersion: version}
await fs.writeFileSync(bundle, JSON.stringify(hotVersion))
}
module.exports = {
setHotUpdateVersion
}
导出的bundle.json在后续的文件中可扩展,方便添加其他更多的配置内容。
-
如何判断当前版本是热更新版本需要更新的版本
1、使用electron-builder的默认检查更新机制
因为是热更新,所以版本号是不会发生变化的。所以一定是在没有可用更新中来检查是否更新
// 检测没有可用更新时发出 autoUpdater.on('update-not-available', info => { // info 的信息基本上就是 releaseInfo里面的内容 global.mainWindow.webContents.send('hotVersion', info) })
我们可以在渲染进程中判断当前版本号是否小于检查版本号,这个里面我们就需要用到
compare-versions
;// yarn add compare-versions 添加包 import compareVersions from 'compare-versions' compareVersions('0.1.2','0.1.1') // -1 compareVersions('0.1.2','0.1.2') // 0 compareVersions('0.1.2','0.1.3') // 1
依据这个就可以判断是否触发热更新
④ 在主进程中如何解压渲染进程的zip文件,删除原有的渲染进程的文件夹
- 下载压缩文件
const filePath = path.join(__dirname, './bundles.zip') // 下载包存放地址
downloadBundleZip() {
return new Promise((resolve, reject) => {
const { channel, updaterUrl } = updaterChannel
const downloadUrl = `${你的热更新下载地址}bundle.zip`
const file = fs.createWriteStream(filePath)
Http.get(downloadUrl, response => {
if (response.statusCode !== 200) {
reject()
}
// After downloading, unzip the file
response.on('end', () => {
file
.on('finish', async () => {
await this.renameFileInDir() // 重命名文件夹
await this.UnzipBundleZip() // 解压文件夹
await this.deleteFileInDir() // 删除文件
app.relaunch()
app.exit()
file.close()
resolve()
})
.on('error', () => {
fs.unlink(filePath, e => {})
reject()
})
})
response.pipe(file)
})
})
}
当文件下载完成后,需要将原有的bundle文件夹给重命名,这样才能保证下载的zip文件,能够顺利解压。
- rename bundle文件夹
// 重命名文件夹
async renameFileInDir() {
const localPath = path.join(__dirname, './bundle')
const newPath = path.join(__dirname, '/bundle_bak')
await renameAsync(localPath, newPath)
}
// 封装的函数
function renameAsync(oldPath, newPath) {
return new Promise(resolve => {
fs.rename(oldPath, newPath, error => {
resolve(error)
})
})
}
- 解压bundle.zip文件
解压文件需要adm-zip,所以先安装
yarn add adm-zip
安装完成后,编写代码
import ADMZip from 'adm-zip'
async UnzipBundleZip() {
// 先判断文件目录是否存在
const exist = fs.existsSync(filePath)
if (exist) {
const admZip = new ADMZip(filePath)
// 解压文件
await admZip.extractAllTo(path.join(__dirname, './bundle'), true)
fs.unlinkSync(filePath)
}
}
- 删除原有的bundle文件夹
// 封装的删除文件夹函数
function deleteDir(dir) {
return new Promise((resolve, reject) => {
// 先读文件夹
try {
fs.stat(dir, (err, stat) => {
if (stat.isDirectory()) {
fs.readdir(dir, (err, files) => {
let Files = files.map(file => path.join(dir, file)) // a/b a/m
Files = Files.map(file => deleteDir(file)) // 这时候变成了promise
Promise.all(Files).then(() => {
fs.rmdir(dir, resolve)
})
})
} else {
fs.unlink(dir, resolve)
}
})
} catch (error) {
reject(error)
}
})
}
// 调用删除文件夹方法
async deleteFileInDir() {
const localPath = path.join(__dirname, './bundle_bak')
const exist = fs.existsSync(localPath)
if(exist){
try {
await deleteDir(localPath)
} catch (error) {
console.log(error)
}
}
}
⑤ 更新完成后如何重启
我们在这一系列的操作后,发现有些东西还是没有发生变化;这个时候我们就需要将应用程序给重启;
依据electron官方文档上的说明,我们可以看出有个app.relaunch() 方法,按照文档的方法,我们在经过上述四步方法后,将应用重启;这样我们就实现了热更新。
结束语
这个热更新方案还是有些小问题的,就是一旦主进程发生变化,就无法通过热更新来实现版本的迭代。就需要用户来下载最新的包来实现更新迭代;但是对于上一个版本的更新,已经有了很大的进步。如果你们有更好的方法可以随时@我
鸣谢: 我辉哥提供的思路!!
推荐阅读
-
电子热点更新最佳实践
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明: