【Electron】酷家樂客戶端開發實踐分享 — 瀏覽器啓動客戶端

做者：鍾離，酷家樂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端的應用

1. 註冊自定義協議，對於全部應用程序都適用
2. 接收參數，對使用Electron構建的應用適用

歡迎你們在評論區討論，技術交流 & 內推 -> zhongli@qunhemail.com