Jun 15, 2019
Electron 的 Protocol 实例解析
Electron 中的 protocol 可以用作资源请求拦截器,或者软件内的自定义协议,实现私有的方法处理。但网上关于 protocol 的介绍有些少,或者是模棱两可的介绍,正好前段时间研究了这部份,这里记录一下所得。
protocol.registerStandardSchemes
1 | protocol.registerSchemesAsPrivileged([ |
- 这里 API 文档说,只有注册了后,才能使用相对路径,并且才能访问
FileSystem API
- Web storage apis (localStorage, sessionStorage, webSQL, indexedDB, cookies) 这些本地缓存功能会无效,因为通过 file 加载的文件并没有注册成
StandardSchemes
Register Protocol
Electron 官网上面对每个接口都有介绍,不过不是很详细,下面是一些主要的接口。
protocol.registerFileProtocol(scheme, handler[, completion]), 注册 scheme 后,在返回的时候,以文件的路径作为返回值。其实这里也可以返回一个 Stream。
protocol.registerBufferProtocol(scheme, handler[, completion]), 以 Buffer 作为返回值
1
2
3
4
5protocol.registerBufferProtocol('atom', (request, callback) => {
callback({ mimeType: 'text/html', data: Buffer.from('<h5>Response</h5>') })
}, (error) => {
if (error) console.error('Failed to register protocol')
})protocol.registerStringProtocol(scheme, handler[, completion]), 以 String 作为返回值
protocol.registerHttpProtocol(scheme, handler[, completion])
protocol.registerStreamProtocol(scheme, handler[, completion]), 以 Stream 作为返回值
1
2
3
4
5protocol.registerStreamProtocol('atom', (request, callback) => {
callback(fs.createReadStream('index.html'))
}, (error) => {
if (error) console.error('Failed to register protocol')
})protocol.interceptFileProtocol(scheme, handler[, completion]), 以文件路径作为返回值
protocol.interceptStringProtocol(scheme, handler[, completion]), 以 String 作为返回值
protocol.interceptBufferProtocol(scheme, handler[, completion]), 以 Buffer 作为返回值
protocol.interceptHttpProtocol(scheme, handler[, completion])
protocol.interceptStreamProtocol(scheme, handler[, completion]), 以 String 作为返回值
实现一个资源请求的缓存
- 自定义一个 Protocol 实现请求访问本地文件,如下面的例子:
1 | // Renderer process: index.html |
- 实现一个带缓存的网络请求,如果本地有缓存,就不再请求,直接返回已经在本地的内容
1 | // Renderer process: index.html |
注册的 File 和 Http 协议到底有什么不同
简单来讲,http 协议有 host,而 file 协议没有 host ,例如下面的例子:
1 | // Renderer process: index.html |
这里面就会报错, 说找不到 /xxx/xxx/oval.svg/
文件,让 scheme 变成与 http URI 标准一样的,会让 atom://oval.svg
识别成 atom://oval.svg/
,因为会认为 oval.svg 是一个 host。
拦截器无限循环
例如下面这个例子,放在 Electron 中后,会出现无限循环拦截和请求 https 链接。
1 | // Renderer process: index.html |
可以用 Session 实现每次拦截的请求通转移到另外一个 Session 。也就是拦截器只能拦截 default Session。
1 | // Renderer process: index.html |
上面的例子,能让拦截器 callback 的时候,不再被自己拦截。session:null
可以是自己再弄一个 session,这里简单的设置为 null 也是可以的。以目前的解决方案,算是比较好的解决了无限循环的问题,并且也能依此实现无感的资源缓存。