作者：酷家乐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下，注册一个协议比较简单，写注册表就可以了。这部分微软爸爸有很详细的文档，参考RegisteringanApplicationtoaURIScheme）建议在安装程序中写入注册表项，在卸载程序中指定删除这些注册表项。下面是innosetup打包程序中操作注册表的示例代码[Registry]Root:HKCR;子键：酷家乐；ValueData:"酷家乐协议";值类型：字符串；标志：createvalueifdoesntexistuninsdeletekey；根：HKCR；子键：酷家乐；ValueName:"URL协议";值数据：“{app}\{#appExe}”；值类型：字符串；标志：createvalueifdoesntexistuninsdeletekey；根：HKCR；子键：酷家乐\DefaultIcon；值数据：“{app}\{#appExe}”；值类型：字符串；标志：createvalueifdoesntexistuninsdeletekey；根：HKCR；子键：酷家乐\shell\open\command；ValueData:"{app}\{#appExe}""%1""";标志：createvalueifdoesntexistuninsdeletekey；ValueType:string;当然你也可以在软件启动时操作注册表。这个时候其实就是用NodeJs来和registry交互的。建议使用npm包node-regedit。自定义协议注册成功后，注册表如下所示。MacOSonMacOS系统下，我们没有注册表可写，所以需要改变实现方式。在此之前，先介绍一下info.plist的一些东西在iOS和MacOS的应用程序包中，有一个info.plist文件。这个文件主要用来记录应用程序的一些元信息。请参阅信息属性列表。该文件以键值对的形式记录信息（xml）。结构如下：CFBundleURLTypes官方解释：CFBundleURLTypes：应用支持的URLschemes（http、ftp等）列表。其实，这是info.plist里面的一个键，对应的值是一个数组。该字段可用于为应用程序注册一个或多个URL架构。参考CFBundleURLTypes修改info.plist文件了解了plist文件后，我们现在只需要为App包中的info.plist设置CFBundleURLTypes的值即可。那么如何修改呢，手写？nonono，这种东西当然要交给工具，不然就太low了。在ElectronPackager中，有一个配置协议可以注册自定义协议，只在MacOS端生效。原理就是修改上面提到的infi.plist文件。//formacoptions.protocols=[{name:'Zhongli',schemes:['zhongli','test'],//可以注册多个协议}];接收到参数协议注册后，我们已经可以在浏览器中注册，客户端通过访问自定义协议url启动。对于url中不同的参数，客户端的行为也不同。比如vscode的url：extension/ms-python.python，在启动VsCode的时候，还会告诉VsCode：我要安装一个插件，插件名称是ms-phthon。Python。vscode是通过解析url中的参数来实现自定义行为的，那么作为客户端如何获取这个url呢？Windows对于windows，参数以启动参数的形式传递给应用程序。因此，我们可以很方便的获取这个参数//当通过自定义url启动客户端时console.log(process.argv);//打印出来['C://your-app.exe',//startPath'kujiale://111',//Customurlforstartup]macOS不会给Mac下的应用传递启动参数，通过自定义协议打开应用，app会收到mac下传递的open-url事件//酷家乐协议启动应用app.on('open-url',(e,url)=>{//eslint-disable-lineparse(url);parseurl});最后，本文分为两部分来描述如何从浏览器服务器启动PC端的应用程序注册自定义协议，适用于所有应用程序，适用于用Electron构建的应用程序。欢迎大家在评论区讨论，技术交流&转介->zhongli@qunhemail.com
