88

【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端

 4 years ago
source link: https://www.tuicool.com/articles/MFjya2b
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

作者:钟离,酷家乐PC客户端负责人

原文地址: https://webfe.kujiale.com/browser-to-client/

酷家乐客户端:下载地址 https://www.kujiale.com/activity/136

文章背景:在酷家乐客户端在V12改版成功后,我们积累了许多的宝贵的经验和最佳实践。前端社区里关于Electron知识相对较少,因此希望将这些内容以系列文章的形式分享出来。

背景

许多本地应用(例如vscode、QQ),都支持通过浏览器来启动PC上的本地软件

这个功能够使网页端和客户端联动起来,用户体验还是很好的,实现起来也并不复杂。酷家乐客户端已经支持了这个功能,如下图:

nIb6Vv2.png!web

实现原理

浏览器在解析url的时候,会尝试从系统本地寻找url协议所关联的应用,如果有关联的应用,则尝试打开这个应用

例如VsCode从web端安装插件的时候,实际上是访问了一个 vscode 协议的url,从而达到启动用户本地VsCode的目的

I3Yfimv.png!web

具体实现

现在,我们只需要 将自定义的协议注册到用户电脑上 ,就可以实现功能了。用户浏览器里访问带有自定义协议的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

自定义协议注册成功后,注册表里是这样子的

qeyuEfU.png!web

MacOS

在MacOS系统下面,我们就没有注册表可以写了,所以要换一个实现方法。在这之前,先介绍一些东西

info.plist

iOS和MacOS的应用包中,都有一个info.plist文件,这个文件主要用来记录应用的一些meta信息,参考 Information Property List 。文件用键值对的形式来记录信息(xml),结构如下:

fmiIbaV.png!web

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端的应用

  1. 注册自定义协议,对于所有应用程序都适用

  2. 接收参数,对使用Electron构建的应用适用

欢迎大家在评论区讨论,技术交流 & 内推 -> [email protected]


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK