本文由得物技術(shù)團(tuán)隊Uni分享，即時通訊網(wǎng)收錄時有內(nèi)容修訂和排版優(yōu)化。
一、引言
本文要分享的是得物技術(shù)團(tuán)隊基于Electron開發(fā)客服IM桌面端的技術(shù)實(shí)踐過程，內(nèi)容包括桌面技術(shù)選型、Electron的基礎(chǔ)概念、具體的實(shí)施技術(shù)方案、遇到的棘手問題等。
Electron社區(qū)雖然很活躍，但是不一樣的場景遇到的技術(shù)問題，幾乎找不到對應(yīng)的解決方案，我們很多都是在探索過程中不斷的去完善，希望本文能帶給你一些啟發(fā)。
學(xué)習(xí)交流：
- 移動端IM開發(fā)入門文章：《新手入門一篇就夠：從零開發(fā)移動端IM》
- 開源IM框架源碼：https://github.com/JackJiang2011/MobileIMSDK（備用地址點(diǎn)此）
（本文已同步發(fā)布于：http://www.52im.net/thread-4159-1-1.html）
二、系列文章
本文是系列文章中的第7篇，本系列總目錄如下：
三、業(yè)務(wù)背景
隨著公司業(yè)務(wù)的快速發(fā)展，商家客服也納入了我們的服務(wù)范圍，商家客服工作臺的定位是通過工具和數(shù)據(jù)服務(wù)商家，一站式解決用戶購買咨詢訴求。通過工具和運(yùn)營策略協(xié)助商家提升服務(wù)品質(zhì)，讓品牌商家有動力運(yùn)營好潛在的客戶，從而達(dá)到提升用戶服務(wù)的目標(biāo)。
已有web端聊天系統(tǒng)的前提下，商家客服為什么要遷移桌面應(yīng)用？
首先我們收到部分商家客服反饋：
用戶是上帝，我們是很重視用戶的反饋的，所以首先我們想的是如何在web端解決這些問題，下面我們逐一分析下以上問題我們能不能在網(wǎng)頁端解決呢？
1）針對客服A同學(xué)問題：大多數(shù)客服職場的臺式機(jī)是不會安裝音頻設(shè)備，如果人家沒音頻，沒外音，我們能強(qiáng)迫他買個播放器嗎，那肯定是不能.，如果是自營客服還有點(diǎn)處理方案，真需要，公司可以統(tǒng)一采購，但是ToC的顯然不能強(qiáng)制做什么事情，所以此問題無解.
2）針對客服B同學(xué)問題：這句話怎么理解呢？是這樣的，在一屏既有web瀏覽器，又有其他應(yīng)用如飛書之類的PC應(yīng)用疊著放，web notification通知由于是瀏覽器級別的，提醒不到最上層，瀏覽器的提醒確實(shí)有點(diǎn)弱（看不到提醒會影響到客服的首響，首響會影響客服的績效，咱公司對于用戶的服務(wù)效率是比較嚴(yán)格的），所以此問題無解。
3）針對客服C同學(xué)問題：em。。。好的，您說的對，web網(wǎng)頁給商家客服的感覺就是我們平臺有點(diǎn)趕不上形勢。
基于上面的一些場景，想必大家已經(jīng)對為何做桌面應(yīng)用有個初步的了解。下面以一張圖來看下Web應(yīng)用跟桌面應(yīng)用的區(qū)別。
四、技術(shù)選型
為什么會選擇Electron而不是其他應(yīng)用開發(fā)框架？
4.1、Electron架構(gòu)簡介
Electron的構(gòu)成主要是上面的3個大模塊，每個模塊各司其職，讓Electron有了桌面應(yīng)用的能力。
逐個理解Electron的3個大模塊：
- 1）Chromium：可以為Electron提供UI渲染能力，再加上Chromium本身就是跨平臺的，所以也不用考慮代碼的兼容性（只要有Chromium，就能用JavaScript，HTML，CSS這些前端開發(fā)工程師所熟知的三劍客來開發(fā)頁面）；
- 2）Node.js：Chromium并不具備原生GUI操作的能力，所以Node.js正好補(bǔ)足了這個能力（能夠調(diào)用操作系統(tǒng)的底層 API，比如path、fs、crypto 這些模塊，甚至能集成C++）；
- 3）Native APIs：Native API讓Electron有了跨平臺和桌面端的原生能力（比如說它有統(tǒng)一的原生界面，窗口、托盤這些）。
4.2、Electron與其他框架的區(qū)別
下面是Electron與Native、QT、NW應(yīng)用的對比圖：
如上圖所示：
- 1）Native(C++/C#/Objective-C)不管從原生體驗、包的體積、性能方面來說都是最佳的選擇，但是開發(fā)門檻高、迭代速度慢；
- 2）QT是基于C++的跨平臺開發(fā)框架，跨平臺應(yīng)用十分廣泛(Mac、Windows、ios、Android、Linux、嵌入式)，眾所周知的WPS就是用QT開發(fā)的。性能很好，甚至于可以媲美原生的體驗，但是整體門檻還是比較高的；
- 3）Web技術(shù)的代表Electron 和 NW.js ，相比之前選擇Electron，Electron有非常活躍的社區(qū)（有102k star），有Atom、vscode這樣的大型應(yīng)用都是基于Electron開發(fā)的，性能相比于natvie是肯定要差一些，但綜合來看，Electron是作為開發(fā)桌面應(yīng)用的目前首選；
- 4）值得一提的是Flutter desktop，從渲染原理看flutter是skia自繪性能優(yōu)于Electron，但問題還是穩(wěn)定性和生態(tài)。Electron由于是nodejs+chromium，前端的生態(tài)可以直接用，所以Flutter desktop就不納入考慮范圍的，但值得關(guān)注。
除了以上這些，最主要的一點(diǎn)：Electron能快速交付，業(yè)務(wù)層復(fù)用web系統(tǒng)的代碼，只需要關(guān)注主進(jìn)程就好了，并且也能滿足業(yè)務(wù)需要的系統(tǒng)級別的一些功能。
五、技術(shù)實(shí)現(xiàn)
5.1、項目架構(gòu)
首先介紹下Electron框架里面兩個重要的概念主進(jìn)程和渲染進(jìn)程。
- 1）主進(jìn)程：主要負(fù)責(zé)創(chuàng)建和管理BrowserWindow實(shí)例以及應(yīng)用程序事件。它可以執(zhí)行注冊全局快捷方式，創(chuàng)建系統(tǒng)菜單和對話框，響應(yīng)自動更新事件等操作（主進(jìn)程以及所有Node.js模塊中都提供了一部分Electron API）；
- 2）渲染進(jìn)程：渲染過程負(fù)責(zé)運(yùn)行應(yīng)用程序的用戶界面，渲染進(jìn)程中提供了所有DOM API、Node.js API和Electron API的子集。
如上面截圖：打開Electron項目之后會有多個進(jìn)程，一個項目有且只有一個主進(jìn)程，創(chuàng)建窗口等有關(guān)系統(tǒng)事件寫在主進(jìn)程中進(jìn)行，但是渲染進(jìn)程可能有多個。
那為什么會有多個渲染進(jìn)程呢？
Electron應(yīng)用是Chromium內(nèi)核，所以多進(jìn)程的架構(gòu)也來源于Chromium，Chromium會單獨(dú)運(yùn)行每個標(biāo)簽，任何一個標(biāo)簽頁崩潰了都不會影響到其他標(biāo)簽。因此，每個進(jìn)程在自己的空間中運(yùn)行，由操作系統(tǒng)調(diào)度。如果某個進(jìn)程觸發(fā)了無限循環(huán)，也不會導(dǎo)致整個應(yīng)用down掉。
在上文說到兩個字“遷移”：是的，我們在開發(fā)桌面應(yīng)用之前有非常成熟的web端商家客服聊天系統(tǒng)了，所以我們在開發(fā)桌面應(yīng)用的時候大多數(shù)時候是關(guān)心主進(jìn)程的，渲染進(jìn)程并不太需要關(guān)心。
5.2、主進(jìn)程功能模塊
5.2.1通信模塊
主要是調(diào)用Electron框架本身的API以及通用方法的封裝：
5.2.1.1）主進(jìn)程到渲染進(jìn)程的通信：
5.2.1.2）渲染進(jìn)程到主進(jìn)程的通信：
有兩種方案。
方案一：是在主進(jìn)程開啟了nodeIntegration: true之后在渲染進(jìn)程里面可以使用window.require('Electron')來引入寫通信相關(guān)代碼：
方案二：是需要在主進(jìn)程編寫preload.js（在初始化窗口的時候引入）：
5.2.1.3）通信的同步和異步問題：
異步：渲染進(jìn)程->發(fā)送->主進(jìn)程
同步：渲染進(jìn)程->發(fā)送->主進(jìn)程
5.2.2菜單模塊
主要是調(diào)用Electron框架本身的API，滿足快速擴(kuò)展菜單功能以及自定義菜單功能：
但是商家客服項目沒用到原生菜單，而是用了自定義的菜單。
沒有使用原生菜單的主要原因是：
- 1）原生菜單樣式較死板，不能調(diào)整；
- 2）自定義編寫菜單能有各種自己想要的功能，可控制其展示。
5.2.3 托盤模塊
托盤屬于系統(tǒng)級的操作，所以是在主進(jìn)程中設(shè)置的。在開始之前需要注意的地方，設(shè)置托盤必須在程序ready之后。
實(shí)現(xiàn)較簡單，代碼如下：
5.2.4 異常處理模塊
主要調(diào)用Electron框架本身API，結(jié)合Node.js API，檢測系統(tǒng)異常后自動刷新并上報，渲染進(jìn)程的異常已經(jīng)使用sls&arms處理，主進(jìn)程的異常主要是通過Electron的crashReporter API來記錄日志。
上面提交參數(shù)有兩個需要注意的點(diǎn)：
- 1）submitURL 是以post方式上傳；
- 2）extra 一個你可以定義的對象，附帶在崩潰報告上一起發(fā)送（只有字符串屬性可以被正確發(fā)送，不支持嵌套對象）。
5.3、渲染進(jìn)程功能模塊
渲染進(jìn)程的代碼大部分跟商家客服IM web端一致，很多只是遷移即可。
5.3.1登錄改造
登錄信息本地化，在登錄成功的時候，把賬號信息緩存，下次打開應(yīng)用的時候客服無需再重新輸入，直接從緩存獲取即可。
邏輯如下圖所示：
5.3.2靜態(tài)資源
傳統(tǒng)Web應(yīng)用，將項目代碼部署服務(wù)器，項目運(yùn)行時，訪問的是服務(wù)器靜態(tài)資源，現(xiàn)在版本發(fā)布流程，走的是cdn資源，總而言之都是通過網(wǎng)絡(luò)獲取。
Electron提供將靜態(tài)資源打包到安裝程序，在安裝時，將項目文件同步安裝到用戶電腦，使其具備訪問本地文件，減少了請求占用資源。一定程度上也能改善因網(wǎng)速問題導(dǎo)致的靜態(tài)資源不能實(shí)時獲取，頁面白屏問題。
5.3.3 數(shù)據(jù)存儲
Electron應(yīng)用里面的數(shù)據(jù)存儲是通過Electron-store第三方庫來實(shí)現(xiàn)的。
實(shí)現(xiàn)比較簡單，如下：
5.3.4 渲染進(jìn)程打包
這塊為什么要單拎出來講渲染進(jìn)程打包呢，是因為web項目遷移變成應(yīng)用渲染進(jìn)程的時候不能像web應(yīng)用一樣直接打包，需要調(diào)整請求API代碼，API前綴需要區(qū)分本地調(diào)試和應(yīng)用環(huán)境。
代碼如下：
使用Electron, 將項目打包成離線應(yīng)用。使用file協(xié)議，在本地讀取靜態(tài)資源。但是ajax請求如果用相對路徑，打包之后，會直接找到根目錄。如下截圖。
所以打包的時候需要給ajax提供完整的url路徑。
六、技術(shù)挑戰(zhàn)
6.1、概述
我們在從0到1搭建商家客服IM桌面端的過程中，遇到了很多的問題。
原因是Electron社區(qū)雖然很活躍，但是不一樣場景遇到的問題，幾乎找不到對應(yīng)的解決方案，所以很多都是在探索過程中不斷的去完善。
這里主要圍繞發(fā)布構(gòu)建流程和安全性來講下，我們是怎么解決的。
6.2、安全性問題
Electron客戶端的安全問題也是非常重要的，那都遇到了哪些安全問題以及我們又是如何解決的呢？
具體如下：
- 1）渲染進(jìn)程XSS：Electron實(shí)現(xiàn)的桌面端軟件渲染層的原理實(shí)際是通過chrome內(nèi)核渲染的，同樣存在XSS注入的風(fēng)險（舉個例子：在html頁面中可以執(zhí)行命令： ，就可以打開當(dāng)前操作系統(tǒng)的計算器。接入了公司統(tǒng)一的XSS治理方案，該問題即得到解決）；
- 2）用戶認(rèn)證信息泄漏問題：商家客服桌面端登錄調(diào)用商家的授權(quán)接口，APP網(wǎng)關(guān)有校驗，可以確保登陸沒有問題；
- 3）本地緩存明文讀取問題：本地數(shù)據(jù)泄漏（例如：indexDB、localStorage、sessionStorage等），我們主要用加密和解密算法對本地緩存信息進(jìn)行處理。
沒有絕對的安全，我們能做的就是盡可能的提高安全門檻，過程中我們也積極同公司的安全部門進(jìn)行溝通，讓他們排查桌面端發(fā)布之后的安全漏洞，最終驗證都是滿足安全標(biāo)準(zhǔn)，符合發(fā)布的條件。
6.3、發(fā)布構(gòu)建流程
應(yīng)用發(fā)布涉及到渲染進(jìn)程和主進(jìn)程，渲染進(jìn)程主要是負(fù)責(zé)給主進(jìn)程提供渲染包，主進(jìn)程使用Electron-builder庫來打包部署所發(fā)布的包。
前面已經(jīng)說過：Electron的好處是可以無縫集成web端的業(yè)務(wù)邏輯代碼，這里上圖左邊紅色的是web端構(gòu)建出的產(chǎn)物，我們會把這部分構(gòu)建產(chǎn)物同步到主進(jìn)程的app/render目錄下（即渲染進(jìn)程目錄），這樣在打包應(yīng)用包的時候，就能集成渲染進(jìn)程的業(yè)務(wù)邏輯，而不需要維護(hù)兩份web端的代碼。
此方案還存在不少的缺陷：由于生產(chǎn)構(gòu)建環(huán)境需要window環(huán)境，所以暫時不支持在遠(yuǎn)程打包，目前都是在本地window機(jī)器上打出完整的包之后再上傳到CDN，商家客服通過加載CDN的更新包來替換本地安裝文件，實(shí)現(xiàn)軟件的本地安裝。
6.4、應(yīng)用更新問題
應(yīng)用開發(fā)離不開“更新”這個話題，比如飛書應(yīng)用會時不時彈出一個更新窗口，讓你選擇是否更新。我們的商家客服IM在推廣桌面應(yīng)用之后，也存在更新這個問題。
在業(yè)務(wù)快速發(fā)展的同時，如何將業(yè)務(wù)需求更好的同步給商家使用，這是商家客服桌面應(yīng)用面臨的最大的挑戰(zhàn)。
6.4.1全量更新：手動下載安裝
這是最基礎(chǔ)的更新模式，主要思路是在打開app（其他時候也行，我們業(yè)務(wù)主要是打開app的時候）的時候訪問遠(yuǎn)程的json文件，文件內(nèi)容包含版本號，更新內(nèi)容等等最新版本的信息，拿到遠(yuǎn)程版本號會跟本地應(yīng)用版本號做比較，如果版本號不一致，就詢問用戶是否更新，需要更新的話會下載到本地，用戶手動點(diǎn)擊安裝即可。
這個更新方式不推薦使用，如果你的應(yīng)用一年更新一次，ok，是可以這么做的。
6.4.2增量更新
在網(wǎng)速快的情況下，全量更新跟增量更新幾乎是沒有區(qū)別的。但是網(wǎng)速慢的情況下它倆之間的差距會被放大，用戶體驗不是很好。
我們不能想當(dāng)然的以為所有用戶網(wǎng)速都很好，這是不現(xiàn)實(shí)的，所以不管是PC應(yīng)用還是移動端應(yīng)用，大多數(shù)情況下是需要做增量更新。
下面表格是網(wǎng)速不一樣情況下的下載耗時對比：
6.4.3增量更新方案1：electron-updater
現(xiàn)在就開始介紹我們在商家客服IM應(yīng)用（windows應(yīng)用）中是怎么實(shí)現(xiàn)增量更新功能的。
更新在大的分類上區(qū)分全量以及增量更新，在每個小分類里面也區(qū)分強(qiáng)更新、弱更新（業(yè)務(wù)上的區(qū)分，底層實(shí)現(xiàn)沒區(qū)別）。
簡單來說：
- 1）強(qiáng)更新指的是用戶必須更新，不更新將無法使用系統(tǒng)功能；
- 2）弱更新指的是用戶想要的時候再去觸發(fā)應(yīng)用的更新，完全由用戶自主選擇。
更新流程：
其中electron-updater作用于“更新應(yīng)用”這個節(jié)點(diǎn)，主要是依賴新舊版本blockmap文件的對比來實(shí)現(xiàn)增量更新。
下圖為electron-builder打包出來的release包，每次打包都會有對應(yīng)的blockmap文件。
electron-updater更新實(shí)現(xiàn)主要流程分兩大步。
生產(chǎn)的blockmap文件：
- 1）使用7z壓縮安裝包；
- 2）讀取安裝包的header；
- 3）計算出每個file的offset和end得到相應(yīng)的hash生產(chǎn)blockmap。
使用blockmap文件：
- 1）下載云上的blockmap文件跟本地blockmap文件對比（從上面截圖可以看出blockmap文件很小，所以下載并不會對應(yīng)用性能產(chǎn)生影響）；
- 2）使用range，request(范圍請求)請求更新內(nèi)容的部分。
6.4.4增量更新方案2：文件替換
還有一種增量更新方式就是文件替換，只更新需要更新的模塊。
這種方式只更新需要渲染進(jìn)程的資源，大部分情況下主進(jìn)程的資源不用更改，所以下載的資源會比較小，更新較快。因為是在線熱更新，更新完成后不用重新啟動軟件，只需要刷新頁面重新加載資源即可。
其實(shí)之前我覺的這樣的思路挺好的，看下面的流程圖也是可以實(shí)現(xiàn)的，也很符合商家客服桌面應(yīng)用產(chǎn)品需求。
可是后來發(fā)現(xiàn)其實(shí)忽略了以下兩個點(diǎn)：
- 1）替換用戶本地文件這個本身有權(quán)限問題（比如windows用戶安裝到了C盤，寫入文件是有管理員權(quán)限限制的）；
- 2）文件被占用問題（眾所周知，當(dāng)文件夾中存在正在被占用的文件時，刪除會失敗）。
所以在覆蓋原文件同時需要退出應(yīng)用避免占用，所以這個方式也不是很可靠。
七、遇到的問題
我們在基于Electron開發(fā)客服IM桌面端的過程無疑遇到了很多問題，我揀主要的幾個問題分享一下。
問題一：Electron 的硬件加速功能，在 win7 或者 Linux 系統(tǒng)上，容易出現(xiàn)黑屏或者卡死：
解決方案：判斷是不是win7及以下系統(tǒng)，如果是app.disableHardwareAcceleration()，禁用當(dāng)前應(yīng)用程序的硬件加速。
問題二：“Uncaught ReferenceError: require is not defined”：
這個報錯是試圖在渲染進(jìn)程使用node的時候出現(xiàn)的，不是不能用，只要開啟 主進(jìn)程的nodeIntegration: true就好了， 但不建議（有安全問題）。
解決方案：
問題三：“Note：you may have one or two (large) stale temporary file(s) left in your temporary directory (Generally this only happens on Windows 9x)”：
這個是打包了半天都打不出來一個完整的包的情況下出現(xiàn)的。
解決方案：當(dāng)時是因為我沒刪除原來的包導(dǎo)致我放打包文件的C盤滿了。所以刪除一些緩存就好了，nsis打包大概率都是跟磁盤有關(guān)。
問題四：下載npm包特別慢：
解決方案：yarn安裝、Electron相關(guān)的包優(yōu)先使用淘寶鏡像安裝、使用公司鏡像安裝公司內(nèi)部包。
八、本文小結(jié)
一路開發(fā)下來，感慨很多。
作為公司第一個Electron應(yīng)用，不管是在開發(fā)上，打包上，或者說在部署上，都遇到了一些挑戰(zhàn)。
在網(wǎng)上也沒有比較詳細(xì)的文檔，外面做的好的也不會把詳細(xì)方案分享出來。但是即使遇到了這些問題，也不能否認(rèn)Electron是目前最適配于我們業(yè)務(wù)目標(biāo)以及適配于開發(fā)資源的一個框架。
目前我們已有線上穩(wěn)定版本，也逐步在推廣到全部商家客服。
接下來需要完善的開發(fā)流程，克服的技術(shù)難點(diǎn)有很多，商家客服工作臺應(yīng)用也會越來越完善。
九、參考資料
[1] Electron官方開發(fā)者手冊
[2] 快速了解新一代跨平臺桌面技術(shù)——Electron
[3] Electron初體驗(快速開始、跨進(jìn)程通信、打包、踩坑等)
[4] Electron 基礎(chǔ)入門 簡單明了，看完啥都懂了
[5] vivo的Electron技術(shù)棧選型、全方位實(shí)踐總結(jié)
[6] 融云基于Electron的IM跨平臺SDK改造實(shí)踐總結(jié)
[7] 閑魚IM基于Flutter的移動端跨端改造實(shí)踐
[8] 網(wǎng)易云信基于Electron的IM消息全文檢索技術(shù)實(shí)踐
（本文已同步發(fā)布于：http://www.52im.net/thread-4159-1-1.html）