Electron 的 Protocol 实例解析

Electron 中的 protocol 可以用作资源请求拦截器，或者软件内的自定义协议，实现私有的方法处理。但网上关于 protocol 的介绍有些少，或者是模棱两可的介绍，正好前段时间研究了这部份，这里记录一下所得。

protocol.registerStandardSchemes

1
2
3

protocol.registerSchemesAsPrivileged([
    { scheme: 'atom', privileges: { standard: true } },
])

这里 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 作为返回值

protocol.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 作为返回值

protocol.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 实现请求访问本地文件，如下面的例子：

// Renderer process: index.html
<img src="atom://oval.svg" />

// Main process: main.js
protocol.registerFileProtocol(
    'atom',
    (request, callback) => {
        const url = request.url.substr(7)
        // callback({ path: path.normalize(`${__dirname}/${url}`) })
        callback(fs.createReadStream(path.normalize(`${__dirname}/${url}`)))
    },
    error => {
        if (error) console.error('Failed to register protocol')
    },
)

实现一个带缓存的网络请求，如果本地有缓存，就不再请求，直接返回已经在本地的内容

// Renderer process: index.html
<img id="img2" src="atom-cached://vastiny.com/visitor.png" />

// Main process: main.js
protocol.registerFileProtocol(
    'atom-cached',
    (request, callback) => {
        const url = `https://${request.url.substr(14)}`
        const cachedPath = path.normalize(`${__dirname}/oval-cached.png`)
        if (fs.existsSync(cachedPath)) {
            callback({ path: cachedPath })
            return
        }
        fetch(url).then(res => {
            const dest = fs.createWriteStream(cachedPath)
            dest.on('finish', () => {
                callback({ path: cachedPath })
            })
            res.body.pipe(dest)
        })
    },
    error => {
        if (error) console.error('Failed to register protocol')
    },
)

注册的 File 和 Http 协议到底有什么不同

简单来讲，http 协议有 host，而 file 协议没有 host ，例如下面的例子：

// Renderer process: index.html
<img id="img1" src="atom://oval.svg" />


// Main process, Before app ready: main.js
protocol.registerSchemesAsPrivileged([
    { scheme: 'atom', privileges: { standard: true } },
])

// Main process: main.js
protocol.registerFileProtocol(
    'atom',
    (request, callback) => {
        const url = request.url.substr(7)
        console.log('request url:', request.url)
        callback({ path: path.normalize(`${__dirname}/${url}`) })
    },
    error => {
        if (error) console.error('Failed to register protocol')
    },
)

这里面就会报错, 说找不到 /xxx/xxx/oval.svg/ 文件，让 scheme 变成与 http URI 标准一样的，会让 atom://oval.svg 识别成 atom://oval.svg/ ，因为会认为 oval.svg 是一个 host。

拦截器无限循环

例如下面这个例子，放在 Electron 中后，会出现无限循环拦截和请求 https 链接。

// Renderer process: index.html
<img id="img1" src="https://vastiny.com/visitor.png" />

// Main process: main.js
protocol.interceptHttpProtocol(
    'https',
    (request, callback) => {
        if (request.url.endsWith('png')) {
            // blablabla...
        }
        callback({
            url: request.url,
            method: request.method,
        })
    },
    error => {
        if (error) console.error('Failed to intercept protocol')
    },
)

可以用 Session 实现每次拦截的请求通转移到另外一个 Session 。也就是拦截器只能拦截 default Session。

// Renderer process: index.html
<img id="img1" src="https://vastiny.com/visitor.png" />

// Main process, After app ready: main.js
const mainSession = session.fromPartition('main')
const mainWindow = new BrowserWindow({
    // ...
    webPreferences: {
        // ...
        session: mainSession,
    }
})

// Main process: main.js
protocol.interceptHttpProtocol(
    'https',
    (request, callback) => {
        if (request.url.endsWith('png')) {
            // blablabla...
        }
        callback({
            url: request.url,
            method: request.method,
            session: null,
        })
    },
    error => {
        if (error) console.error('Failed to intercept protocol')
    },
)

上面的例子，能让拦截器 callback 的时候，不再被自己拦截。session:null 可以是自己再弄一个 session，这里简单的设置为 null 也是可以的。以目前的解决方案，算是比较好的解决了无限循环的问题，并且也能依此实现无感的资源缓存。