作者：鐘離事哭，酷家樂PC客戶端負(fù)責(zé)人
原文地址：https://webfe.kujiale.com/browser-to-client/
酷家樂客戶端：下載地址 https://www.kujiale.com/activity/136
文章背景：在酷家樂客戶端在V12改版成功后，我們積累了許多的寶貴的經(jīng)驗(yàn)和最佳實(shí)踐只酥。前端社區(qū)里關(guān)于Electron知識(shí)相對(duì)較少丢氢，因此希望將這些內(nèi)容以系列文章的形式分享出來僚纷。
系列文章：

• 【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 入坑篇
• 【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 軟件自動(dòng)更新
• 【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 瀏覽器啟動(dòng)客戶端
• 不定期更新...

背景

許多本地應(yīng)用（例如vscode嫂便、QQ），都支持通過瀏覽器來啟動(dòng)PC上的本地軟件

這個(gè)功能夠使網(wǎng)頁端和客戶端聯(lián)動(dòng)起來忆绰，用戶體驗(yàn)還是很好的浩峡，實(shí)現(xiàn)起來也并不復(fù)雜〈砀遥酷家樂客戶端已經(jīng)支持了這個(gè)功能翰灾，如下圖：

從瀏覽器啟動(dòng)酷家樂

實(shí)現(xiàn)原理

瀏覽器在解析url的時(shí)候，會(huì)嘗試從系統(tǒng)本地尋找url協(xié)議所關(guān)聯(lián)的應(yīng)用稚茅，如果有關(guān)聯(lián)的應(yīng)用纸淮，則嘗試打開這個(gè)應(yīng)用

例如VsCode從web端安裝插件的時(shí)候，實(shí)際上是訪問了一個(gè)vscode協(xié)議的url亚享，從而達(dá)到啟動(dòng)用戶本地VsCode的目的

VsCode從web端安裝本地插件

具體實(shí)現(xiàn)

現(xiàn)在咽块，我們只需要將自定義的協(xié)議注冊(cè)到用戶電腦上，就可以實(shí)現(xiàn)功能了欺税。用戶瀏覽器里訪問帶有自定義協(xié)議的url侈沪，即可啟動(dòng)我們的客戶端。

Windows

在windows下晚凿，注冊(cè)一個(gè)協(xié)議比較簡單亭罪，寫注冊(cè)表就可以了。這部分微軟爸爸有很詳細(xì)的文檔歼秽，參考 Registering an Application to a URI Scheme

建議在安裝程序中寫入注冊(cè)表項(xiàng)应役，并且指定在卸載程序中，刪除這些注冊(cè)表項(xiàng)哲银。以下是inno setup打包程序中扛吞，操作注冊(cè)表的示例代碼

[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;

當(dāng)然，也可以在軟件啟動(dòng)的時(shí)候操作注冊(cè)表荆责，這個(gè)時(shí)候其實(shí)是用NodeJs來與注冊(cè)表交互滥比，推薦一個(gè)npm包node-regedit

自定義協(xié)議注冊(cè)成功后，注冊(cè)表里是這樣子的

注冊(cè)協(xié)議成功

MacOS

在MacOS系統(tǒng)下面做院，我們就沒有注冊(cè)表可以寫了盲泛，所以要換一個(gè)實(shí)現(xiàn)方法。在這之前键耕，先介紹一些東西

info.plist

iOS和MacOS的應(yīng)用包中寺滚，都有一個(gè)info.plist文件，這個(gè)文件主要用來記錄應(yīng)用的一些meta信息屈雄，參考Information Property List村视。文件用鍵值對(duì)的形式來記錄信息(xml)，結(jié)構(gòu)如下：

info.plist

CFBundleURLTypes

官方解釋：CFBundleURLTypes：A list of URL schemes (http, ftp, and so on) supported by the app.

其實(shí)呢酒奶，這個(gè)就是info.plist里面的一個(gè)key蚁孔，對(duì)應(yīng)的value是一個(gè)數(shù)組奶赔。可以通過這個(gè)字段來為應(yīng)用注冊(cè)一個(gè) or 多個(gè) URL Schema杠氢。參考CFBundleURLTypes

修改info.plist文件

在了解了plist文件之后站刑，我們現(xiàn)在只需為App包中info.plist，設(shè)置CFBundleURLTypes的值即可鼻百。那么如何修改呢绞旅，手寫嗎？nonono温艇，這種事情當(dāng)然要交給工具來做因悲，不然太low了。

在Electron Packager中中贝，有一個(gè)配置protocols可以注冊(cè)自定義協(xié)議囤捻，只對(duì)MacOS端生效，原理就是上面提到的修改infi.plist文件邻寿。

// for mac
options.protocols = [{
  name: '鐘離',
  schemes: ['zhongli', 'test'], // 可以注冊(cè)多個(gè)協(xié)議
}];

接收參數(shù)

協(xié)議注冊(cè)完畢之后，我們已經(jīng)可以在瀏覽器中视哑，通過訪問自定義協(xié)議url來啟動(dòng)客戶端了绣否。

對(duì)于url中的不同參數(shù)，客戶端的行為也是不一樣的挡毅，例如vscode:extension/ms-python.python這個(gè)url蒜撮，啟動(dòng)了VsCode的同時(shí)也告訴了VsCode：我要安裝插件，插件名是ms-phthon.python跪呈。

Vscode通過解析url中的參數(shù)來實(shí)現(xiàn)自定義行為段磨，那么作為客戶端如何拿到這個(gè)url呢？

Windows

對(duì)于windows耗绿，參數(shù)會(huì)通過啟動(dòng)參數(shù)的形式傳遞給應(yīng)用程序苹支。因此，我們可以很方便的拿到這個(gè)參數(shù)

// 通過自定義url啟動(dòng)客戶端時(shí)
console.log(process.argv);

// 打印出
[
 'C://your-app.exe', // 啟動(dòng)路徑
 'kujiale://111',  // 啟動(dòng)的自定義url
]

MacOS

在Mac下不會(huì)通過啟動(dòng)參數(shù)傳遞給應(yīng)用误阻，通過自定義協(xié)議打開應(yīng)用债蜜，app會(huì)收到 open-url 事件

// mac下通過kujiale協(xié)議啟動(dòng)應(yīng)用
app.on('open-url', (e, url) => { // eslint-disable-line
  parse(url)； 解析url
});

最后

本文分了兩部分來講述如何從瀏覽器啟動(dòng)PC端的應(yīng)用

1. 注冊(cè)自定義協(xié)議究反，對(duì)于所有應(yīng)用程序都適用

2. 接收參數(shù)寻定，對(duì)使用Electron構(gòu)建的應(yīng)用適用

歡迎大家在評(píng)論區(qū)討論，技術(shù)交流 & 內(nèi)推 -> zhongli@qunhemail.com