成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【Electron】酷家樂客戶端開發(fā)實踐分享 — 瀏覽器啟動客戶端

劉德剛 / 2850人閱讀

摘要：作者鐘離，酷家樂客戶端負(fù)責(zé)人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經(jīng)驗和最佳實踐。鐘離可以注冊多個協(xié)議接收參數(shù)協(xié)議注冊完畢之后，我們已經(jīng)可以在瀏覽器中，通過訪問自定義協(xié)議來啟動客戶端了。

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



【Electron】酷家樂客戶端開發(fā)實踐分享 — 入坑篇


【Electron】酷家樂客戶端開發(fā)實踐分享 — 軟件自動更新


【Electron】酷家樂客戶端開發(fā)實踐分享 — 瀏覽器啟動客戶端


【Electron】酷家樂客戶端開發(fā)實踐分享 — 進(jìn)程通信


【Electron】酷家樂客戶端開發(fā)實踐分享 — 下載管理器


不定期更新...
背景

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

這個功能夠使網(wǎng)頁端和客戶端聯(lián)動起來，用戶體驗還是很好的，實現(xiàn)起來也并不復(fù)雜?？峒覙房蛻舳艘呀?jīng)支持了這個功能，如下圖：

實現(xiàn)原理

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

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

具體實現(xiàn)

現(xiàn)在，我們只需要將自定義的協(xié)議注冊到用戶電腦上，就可以實現(xiàn)功能了。用戶瀏覽器里訪問帶有自定義協(xié)議的url，即可啟動我們的客戶端。

Windows

在windows下，注冊一個協(xié)議比較簡單，寫注冊表就可以了。這部分微軟爸爸有很詳細(xì)的文檔，參考 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;

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

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

MacOS

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

info.plist

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

CFBundleURLTypes

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

其實呢，這個就是info.plist里面的一個key，對應(yīng)的value是一個數(shù)組?？梢酝ㄟ^這個字段來為應(yīng)用注冊一個 or 多個 URL Schema。參考CFBundleURLTypes

修改info.plist文件

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

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

// for mac
options.protocols = [{
  name: "鐘離",
  schemes: ["zhongli", "test"], // 可以注冊多個協(xié)議
}];
接收參數(shù)

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

對于url中的不同參數(shù)，客戶端的行為也是不一樣的，例如vscode:extension/ms-python.python這個url，啟動了VsCode的同時也告訴了VsCode：我要安裝插件，插件名是ms-phthon.python。

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

Windows

對于windows，參數(shù)會通過啟動參數(shù)的形式傳遞給應(yīng)用程序。因此，我們可以很方便的拿到這個參數(shù)

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

// 打印出
[
 "C://your-app.exe", // 啟動路徑
 "kujiale://111",  // 啟動的自定義url
]
MacOS

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

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

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

注冊自定義協(xié)議，對于所有應(yīng)用程序都適用

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

歡迎大家在評論區(qū)討論，技術(shù)交流 & 內(nèi)推 -> [email protected]

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104653.html

相關(guān)文章

  • 【Electron】酷家樂客戶端開發(fā)實踐分享 — 瀏覽器啟動客戶端

    摘要：作者鐘離，酷家樂客戶端負(fù)責(zé)人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經(jīng)驗和最佳實踐。鐘離可以注冊多個協(xié)議接收參數(shù)協(xié)議注冊完畢之后，我們已經(jīng)可以在瀏覽器中，通過訪問自定義協(xié)議來啟動客戶端了。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/browser-to-client/酷家樂客戶端：下載...

    Cciradih 評論0 收藏0

  • 【Electron】酷家樂客戶端開發(fā)實踐分享 — 軟件自動更新

    摘要：作者鐘離，酷家樂客戶端負(fù)責(zé)人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經(jīng)驗和最佳實踐。用戶在電腦上安裝客戶端，實際上會將客戶端代碼文件持久儲存到本機(jī)。通常我們會在軟件啟動時檢查更新。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-autoupdate/酷家樂客戶端：下載地址...

    phpmatt 評論0 收藏0

  • 【Electron】酷家樂客戶端開發(fā)實踐分享 — 軟件自動更新

    摘要：作者鐘離，酷家樂客戶端負(fù)責(zé)人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經(jīng)驗和最佳實踐。用戶在電腦上安裝客戶端，實際上會將客戶端代碼文件持久儲存到本機(jī)。通常我們會在軟件啟動時檢查更新。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-autoupdate/酷家樂客戶端：下載地址...

    leiyi 評論0 收藏0

  • 【Electron】酷家樂客戶端開發(fā)實踐分享 — 入坑篇

    摘要：系列文章酷家樂客戶端開發(fā)實踐分享入坑篇酷家樂客戶端開發(fā)實踐分享軟件自動更新酷家樂客戶端開發(fā)實踐分享瀏覽器啟動客戶端酷家樂客戶端開發(fā)實踐分享進(jìn)程通信酷家樂客戶端開發(fā)實踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

    jay_tian 評論0 收藏0

  • 【Electron】酷家樂客戶端開發(fā)實踐分享 — 入坑篇

    摘要：系列文章酷家樂客戶端開發(fā)實踐分享入坑篇酷家樂客戶端開發(fā)實踐分享軟件自動更新酷家樂客戶端開發(fā)實踐分享瀏覽器啟動客戶端酷家樂客戶端開發(fā)實踐分享進(jìn)程通信酷家樂客戶端開發(fā)實踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

    TwIStOy 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<