摘要:作者鐘離,酷家樂客戶端負責人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后,我們積累了許多的寶貴的經驗和最佳實踐。鐘離可以注冊多個協議接收參數協議注冊完畢之后,我們已經可以在瀏覽器中,通過訪問自定義協議來啟動客戶端了。
背景作者:鐘離,酷家樂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: KujialeDefaultIcon; ValueData: "{app}{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey; Root: HKCR; SubKey: Kujialeshellopencommand; ValueData: "{app}{#appExe} ""%1"""; Flags: createvalueifdoesntexist uninsdeletekey; ValueType: string;
當然,也可以在軟件啟動的時候操作注冊表,這個時候其實是用NodeJs來與注冊表交互,推薦一個npm包node-regedit
自定義協議注冊成功后,注冊表里是這樣子的
在MacOS系統下面,我們就沒有注冊表可以寫了,所以要換一個實現方法。在這之前,先介紹一些東西
iOS和MacOS的應用包中,都有一個info.plist文件,這個文件主要用來記錄應用的一些meta信息,參考Information Property List。文件用鍵值對的形式來記錄信息(xml),結構如下:
官方解釋:CFBundleURLTypes:A list of URL schemes (http, ftp, and so on) supported by the app.
其實呢,這個就是info.plist里面的一個key,對應的value是一個數組。可以通過這個字段來為應用注冊一個 or 多個 URL Schema。參考CFBundleURLTypes
在了解了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端的應用
注冊自定義協議,對于所有應用程序都適用
接收參數,對使用Electron構建的應用適用
歡迎大家在評論區討論,技術交流 & 內推 -> zhongli@qunhemail.com
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104653.html
摘要:作者鐘離,酷家樂客戶端負責人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后,我們積累了許多的寶貴的經驗和最佳實踐。鐘離可以注冊多個協議接收參數協議注冊完畢之后,我們已經可以在瀏覽器中,通過訪問自定義協議來啟動客戶端了。 作者:鐘離,酷家樂PC客戶端負責人原文地址:https://webfe.kujiale.com/browser-to-client/酷家樂客戶端:下載...
摘要:作者鐘離,酷家樂客戶端負責人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后,我們積累了許多的寶貴的經驗和最佳實踐。用戶在電腦上安裝客戶端,實際上會將客戶端代碼文件持久儲存到本機。通常我們會在軟件啟動時檢查更新。 作者:鐘離,酷家樂PC客戶端負責人原文地址:https://webfe.kujiale.com/electron-autoupdate/酷家樂客戶端:下載地址...
摘要:作者鐘離,酷家樂客戶端負責人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后,我們積累了許多的寶貴的經驗和最佳實踐。用戶在電腦上安裝客戶端,實際上會將客戶端代碼文件持久儲存到本機。通常我們會在軟件啟動時檢查更新。 作者:鐘離,酷家樂PC客戶端負責人原文地址:https://webfe.kujiale.com/electron-autoupdate/酷家樂客戶端:下載地址...
摘要:系列文章酷家樂客戶端開發實踐分享入坑篇酷家樂客戶端開發實踐分享軟件自動更新酷家樂客戶端開發實踐分享瀏覽器啟動客戶端酷家樂客戶端開發實踐分享進程通信酷家樂客戶端開發實踐分享下載管理器不定期更新本文的初衷所使用的技術棧和前端工程師完美契合。 作者:鐘離,酷家樂PC客戶端負責人原文地址:https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...
摘要:系列文章酷家樂客戶端開發實踐分享入坑篇酷家樂客戶端開發實踐分享軟件自動更新酷家樂客戶端開發實踐分享瀏覽器啟動客戶端酷家樂客戶端開發實踐分享進程通信酷家樂客戶端開發實踐分享下載管理器不定期更新本文的初衷所使用的技術棧和前端工程師完美契合。 作者:鐘離,酷家樂PC客戶端負責人原文地址:https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...
閱讀 1228·2021-11-15 11:37
閱讀 2244·2021-09-30 09:55
閱讀 4483·2021-09-22 15:51
閱讀 3741·2021-09-22 15:46
閱讀 2766·2019-08-30 15:52
閱讀 423·2019-08-29 16:20
閱讀 2889·2019-08-29 15:12
閱讀 1130·2019-08-26 18:27