作者:钟离,酷家乐PC客户端负责人
原文地址:https://webfe.kujiale.com/browser-to-client/
酷家乐客户端:下载地址 https://www.kujiale.com/activity/136
文章背景:在酷家乐客户端在V12改版成功后,我们积累了许多的宝贵的经验和最佳实践。前端社区里关于Electron知识相对较少,因此希望将这些内容以系列文章的形式分享出来。
系列文章:
- 【Electron】酷家乐客户端开发实践分享 — 入坑篇
- 【Electron】酷家乐客户端开发实践分享 — 软件自动更新
- 【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端
- 【Electron】酷家乐客户端开发实践分享 — 进程通信
- 【Electron】酷家乐客户端开发实践分享 — 下载管理器
- 不定期更新...
背景
许多本地应用(例如vscode、QQ),都支持通过浏览器来启动PC上的本地软件
这个功能够使网页端和客户端联动起来,用户体验还是很好的,实现起来也并不复杂。酷家乐客户端已经支持了这个功能,如下图:
实现原理
浏览器在解析url的时候,会尝试从系统本地寻找url协议所关联的应用,如果有关联的应用,则尝试打开这个应用
例如VsCode从web端安装插件的时候,实际上是访问了一个vscode
协议的url,从而达到启动用户本地VsCode的目的
具体实现
现在,我们只需要将自定义的协议注册到用户电脑上,就可以实现功能了。用户浏览器里访问带有自定义协议的url,即可启动我们的客户端。
Windows
在windows下,注册一个协议比较简单,写注册表就可以了。这部分微软爸爸有很详细的文档,参考 Registering an Application to a URI Scheme)
建议在安装程序中写入注册表项,并且指定在卸载程序中,删除这些注册表项。以下是inno setup打包程序中,操作注册表的示例代码
[Registry]
Root: HKCR; SubKey: Kujiale; ValueData: "KujialeProtocol"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale; ValueName: "URL Protocol"; ValueData: "{app}\{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale\DefaultIcon; ValueData: "{app}\{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale\shell\open\command; ValueData: "{app}\{#appExe} ""%1"""; Flags: createvalueifdoesntexist uninsdeletekey; ValueType: string;
当然,也可以在软件启动的时候操作注册表,这个时候其实是用NodeJs来与注册表交互,推荐一个npm包node-regedit
自定义协议注册成功后,注册表里是这样子的
MacOS
在MacOS系统下面,我们就没有注册表可以写了,所以要换一个实现方法。在这之前,先介绍一些东西
info.plist
iOS和MacOS的应用包中,都有一个info.plist文件,这个文件主要用来记录应用的一些meta信息,参考Information Property List。文件用键值对的形式来记录信息(xml),结构如下:
CFBundleURLTypes
官方解释:CFBundleURLTypes:A list of URL schemes (http, ftp, and so on) supported by the app.
其实呢,这个就是info.plist里面的一个key,对应的value是一个数组。可以通过这个字段来为应用注册一个 or 多个 URL Schema。参考CFBundleURLTypes
修改info.plist文件
在了解了plist文件之后,我们现在只需为App包中info.plist,设置CFBundleURLTypes的值即可。那么如何修改呢,手写吗?nonono,这种事情当然要交给工具来做,不然太low了。
在Electron Packager中,有一个配置protocols
可以注册自定义协议,只对MacOS端生效,原理就是上面提到的修改infi.plist文件。
// for mac
options.protocols = [{
name: '钟离',
schemes: ['zhongli', 'test'], // 可以注册多个协议
}];
接收参数
协议注册完毕之后,我们已经可以在浏览器中,通过访问自定义协议url来启动客户端了。
对于url中的不同参数,客户端的行为也是不一样的,例如vscode:extension/ms-python.python
这个url,启动了VsCode的同时也告诉了VsCode:我要安装插件,插件名是ms-phthon.python。
Vscode通过解析url中的参数来实现自定义行为,那么作为客户端如何拿到这个url呢?
Windows
对于windows,参数会通过启动参数的形式传递给应用程序。因此,我们可以很方便的拿到这个参数
// 通过自定义url启动客户端时
console.log(process.argv);
// 打印出
[
'C://your-app.exe', // 启动路径
'kujiale://111', // 启动的自定义url
]
MacOS
在Mac下不会通过启动参数传递给应用,通过自定义协议打开应用,app会收到 open-url 事件
// mac下通过kujiale协议启动应用
app.on('open-url', (e, url) => { // eslint-disable-line
parse(url); 解析url
});
最后
本文分了两部分来讲述如何从浏览器启动PC端的应用
- 注册自定义协议,对于所有应用程序都适用
- 接收参数,对使用Electron构建的应用适用
欢迎大家在评论区讨论,技术交流 & 内推 -> [email protected]