【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端
作者:钟离,酷家乐PC客户端负责人
原文地址:webfe.kujiale.com/browser-to-…
酷家乐客户端:下载地址 www.kujiale.com/activity/13…
文章背景:在酷家乐客户端在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-lineparse(url); 解析url
});
复制代码
最后
本文分了两部分来讲述如何从浏览器启动PC端的应用
注册自定义协议,对于所有应用程序都适用
接收参数,对使用Electron构建的应用适用
欢迎大家在评论区讨论,技术交流 & 内推 -> zhongli@qunhemail.com
转载于:https://juejin.im/post/5cfb6c025188250ee91eab61
【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端相关推荐
- 【Electron】酷家乐客户端开发实践分享 — 下载管理器
作者:钟离,酷家乐PC客户端负责人 原文地址:webfe.kujiale.com/electron-ku- 酷家乐客户端:下载地址 www.kujiale.com/activity/13- 文章背景: ...
- 【Electron】酷家乐客户端开发实践分享 — 软件自动更新
作者:钟离,酷家乐PC客户端负责人 原文地址:webfe.kujiale.com/electron-au- 酷家乐客户端:下载地址 www.kujiale.com/activity/13- 文章背景: ...
- 【Electron】酷家乐客户端开发实践分享 — 入坑篇
作者:钟离,酷家乐PC客户端负责人 原文地址:webfe.kujiale.com/electron-ku- 酷家乐客户端:下载地址 www.kujiale.com/activity/13- 文章背景: ...
- 【Electron】酷家乐客户端开发实践分享 — 进程通信
作者:钟离,酷家乐PC客户端负责人 原文地址:webfe.kujiale.com/electron-ku- 酷家乐客户端:下载地址 www.kujiale.com/activity/13- 文章背景: ...
- 酷家乐 java面经_酷家乐内部教练案例分享
素材中台主营两部分业务:模型.材质,模型材质数据是酷家乐的关键资源,对内承载着对业务团队的数据支持,对外负责了酷家乐渲染图的表现效果. 所以团队成员承接的工作除了中台能力建设之外,还有很多日常很多前台 ...
- 酷家乐前端开发工程师一面
写在前面 周五面试酷家乐 面试官上来直接五道算法题把我给整懵了 记录一下吧 算法题还是要多刷多刷! 解法一 排序 不赘述了 解法二 利用map集合 var majorrityElement=funct ...
- 酷家乐java开发,【Electron】酷家乐客户端开发实践分享 — 入坑篇
本文的初衷 Electron所使用的技术栈(JavaScript.NodeJs.HTML.CSS)和web前端工程师完美契合.于是,越来越多的前端工程师,用Electron来开发桌面客户端的开发,我也 ...
- 酷家乐如何使用 Istio 解决新服务治理系统(Serverless)接入已有成熟自研 Java 服务治理体系...
本文来自酷家乐先进技术工程团队,作者罗宁,酷家乐资深开发工程师. 公司背景 酷家乐 [1] 公司以分布式并行计算和多媒体数据挖掘为技术核心,推出的家居云设计平台,致力于云渲染.云设计.BIM.VR.A ...
- 酷家乐 Serverless FaaS 产品落地实践
K8s已经成为一线大厂分布式平台的标配技术.你是不是还在惆怅怎么掌握它?来这里,大型互联网公司一线工程师亲授,不来虚的,直接上手实战,3天时间带你搭建K8s平台,快速学会K8s,点击下方图片可了解培训 ...
最新文章
- 轻量级git服务器 Gogs git 服务器搭建
- vtigercrm学习(二)
- Spark详解(十二):Spark Streaming原理和实现
- boost::fusion模块实现一个函数绑定器的测试程序
- java mysql servlet_Java--用户登录(JDBC,MYSQL,Servlet)
- C++远航之封装篇——数据的封装
- java文件服务器_JavaWeb项目架构之NFS文件服务器
- 计算机学校招生分数线,重庆工商计算机学校2020年招生录取分数线
- photoshop制作gif去掉杂色
- SqlServer实现split功能
- react 动态获取数据
- J-Link RTT Viewer 的各种不爽以及解决方案
- html简述四种基本标记的作用,HTML的常用标记
- 苏州大学计算机科学与技术研究生院,苏州大学计算机科学与技术学院第十四届研究生代表大会...
- PS给图片四周加上圆角
- 上海富爸爸_放弃高薪选择财务自由之路(转)
- java程序设计 c语言_C语言和Java编程有什么区别?
- 新生课题研究---人工智能
- 我糟糕的2019年:虽流年不利,但我心仍坚定
- python 在南京发展_南京和杭州,哪一座城市潜力大?
热门文章
- 狐火 不兼容event.srcElement 解决方法
- micro:bit是什么?小学生拿着它就能召唤神龙?
- jvm虚拟机浅谈(二)
- matlab中p是什意思,如下的用matlab进行编程的勒让德函数,求解释,看不懂什么意思。如:p和t分别代表什么?p(1,:)是什么意思...
- 执行日志(2)文件结构
- Software MyZone
- Java编程思想非主流知识点
- 宁波工程学院 OJ [1347] 老虎满坡找灰兔
- 远程线程注入DLL到PC版微信
- Linux常用的命令收藏