一、背景
有一款electron开发的桌面应用,因为包含即时通讯的功能,所以在聊天消息中会有很多的图片视频消息以及会话的头像等,这些图片视频占用了大量的网络资源,领导要求优化一下,将图片和视频缓存至本地。
二、步骤
1.获取所有的图片视频请求
经过调研发现electron的session模块有关于本应用的所有的web请求的监听方法。可参考 electron官方文档链接-WebRequest 于是乎,我们可以用这个方法获取到所有的图片视频的请求了
// 这里filter参数是为了筛选过滤哪些url的请求,
session.defaultSession.webRequest.onCompleted(filter, (details) => {
// 这里可以通过details.resourceType判断请求的是否为图片类型,这里也获取了other,是因为视频也会存在在other中if ((details.resourceType === 'image' || details.resourceType === 'other')) { // 获取请求地址 const souceUrl = details.url}
})
注意这个监听一定要在app.ready之后调用
app.on('ready', async () => {
// 在这里调用
})
2.将图片和视频存储至本地
这里我使用的是node的request模块。在监听到请求后,将获取到的图片视频请求地址,通过request模块下载至本地。在这之前先创建本应用的本地文件缓存地址。这里有个坑,在打包之后,如果在应用内生成文件夹,windows系统会报错,因为应用没有访问权限,不能进行文件的操作。这里有两种解决方法:
1.方法一(不推荐) 因为我是通过electron-builder构建的应用,可以在打包配置里面添加 如下代码,将打包的应用等级提升为管理员权限,这样打好包安装之后运行,默认是以管理员身份运行的。
builderOptions: {
...
win: {
...
requestedExecutionLevel: 'highestAvailable'
}
}
但是这种方法有个缺陷,以管理员身份运行的程序,在windows系统中,是不允许文件往里面拖拽的。 设置好之后,创建文件夹
import fs from 'fs'
const path = require('path')
const log = require('electron-log') // 记录日志(如有需要安装)
// 设置存放缓存文件的文件夹
const AVATARPATH = 'temp'
// 设置文件夹位置(在安装应用文件夹内)
const basePath = path.join(__dirname, AVATARPATH)
fs.mkdir(basePath, { recursive: true }, err => {
if (err) log.warn(`mkdir path: ${basePath} err`)
})
2.方法二(推荐!!!) 因为不能拖拽,会影响文件上传等功能,致使用户体验非常不好,之后又找到electron文档中,有一个方法 app.getPath(name) 可以使用。