本文由得物技術(shù)團(tuán)隊(duì)Uni分享昧诱，即時(shí)通訊網(wǎng)收錄時(shí)有內(nèi)容修訂和排版優(yōu)化世落。

一、引言

本文要分享的是得物技術(shù)團(tuán)隊(duì)基于Electron開(kāi)發(fā)客服IM桌面端的技術(shù)實(shí)踐過(guò)程谭梗，內(nèi)容包括桌面技術(shù)選型、Electron的基礎(chǔ)概念宛蚓、具體的實(shí)施技術(shù)方案激捏、遇到的棘手問(wèn)題等。

Electron社區(qū)雖然很活躍凄吏，但是不一樣的場(chǎng)景遇到的技術(shù)問(wèn)題远舅，幾乎找不到對(duì)應(yīng)的解決方案，我們很多都是在探索過(guò)程中不斷的去完善痕钢，希望本文能帶給你一些啟發(fā)图柏。

（本文已同步發(fā)布于：http://www.52im.net/thread-4159-1-1.html）

二、系列文章

本文是系列文章中的第7篇任连，本系列總目錄如下：

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(一)：快速了解新一代跨平臺(tái)桌面技術(shù)——Electron》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(二)：Electron初體驗(yàn)(快速開(kāi)始蚤吹、跨進(jìn)程通信、打包随抠、踩坑等)》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(三)：vivo的Electron技術(shù)棧選型裁着、全方位實(shí)踐總結(jié)》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(四)：蘑菇街基于Electron開(kāi)發(fā)IM客戶(hù)端的技術(shù)實(shí)踐》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(五)：融云基于Electron的IM跨平臺(tái)SDK改造實(shí)踐總結(jié)》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(六)：網(wǎng)易云信基于Electron的IM消息全文檢索技術(shù)實(shí)踐》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(七)：得物基于Electron開(kāi)發(fā)客服IM桌面端的技術(shù)實(shí)踐》（* 本文）

三、業(yè)務(wù)背景

隨著公司業(yè)務(wù)的快速發(fā)展拱她，商家客服也納入了我們的服務(wù)范圍二驰，商家客服工作臺(tái)的定位是通過(guò)工具和數(shù)據(jù)服務(wù)商家，一站式解決用戶(hù)購(gòu)買(mǎi)咨詢(xún)?cè)V求秉沼。通過(guò)工具和運(yùn)營(yíng)策略協(xié)助商家提升服務(wù)品質(zhì)桶雀，讓品牌商家有動(dòng)力運(yùn)營(yíng)好潛在的客戶(hù)，從而達(dá)到提升用戶(hù)服務(wù)的目標(biāo)氧猬。

已有web端聊天系統(tǒng)的前提下背犯，商家客服為什么要遷移桌面應(yīng)用？

首先我們收到部分商家客服反饋：

用戶(hù)是上帝盅抚，我們是很重視用戶(hù)的反饋的漠魏，所以首先我們想的是如何在web端解決這些問(wèn)題，下面我們逐一分析下以上問(wèn)題我們能不能在網(wǎng)頁(yè)端解決呢妄均？

1）針對(duì)客服A同學(xué)問(wèn)題：大多數(shù)客服職場(chǎng)的臺(tái)式機(jī)是不會(huì)安裝音頻設(shè)備柱锹，如果人家沒(méi)音頻哪自，沒(méi)外音，我們能強(qiáng)迫他買(mǎi)個(gè)播放器嗎禁熏，那肯定是不能.壤巷，如果是自營(yíng)客服還有點(diǎn)處理方案，真需要瞧毙，公司可以統(tǒng)一采購(gòu)胧华，但是ToC的顯然不能強(qiáng)制做什么事情，所以此問(wèn)題無(wú)解.

2）針對(duì)客服B同學(xué)問(wèn)題：這句話(huà)怎么理解呢宙彪？是這樣的矩动，在一屏既有web瀏覽器，又有其他應(yīng)用如飛書(shū)之類(lèi)的PC應(yīng)用疊著放释漆，web notification通知由于是瀏覽器級(jí)別的悲没，提醒不到最上層，瀏覽器的提醒確實(shí)有點(diǎn)弱（看不到提醒會(huì)影響到客服的首響男图，首響會(huì)影響客服的績(jī)效示姿，咱公司對(duì)于用戶(hù)的服務(wù)效率是比較嚴(yán)格的），所以此問(wèn)題無(wú)解逊笆。

3）針對(duì)客服C同學(xué)問(wèn)題：em栈戳。。览露。好的荧琼，您說(shuō)的對(duì)，web網(wǎng)頁(yè)給商家客服的感覺(jué)就是我們平臺(tái)有點(diǎn)趕不上形勢(shì)差牛。

基于上面的一些場(chǎng)景，想必大家已經(jīng)對(duì)為何做桌面應(yīng)用有個(gè)初步的了解堰乔。下面以一張圖來(lái)看下Web應(yīng)用跟桌面應(yīng)用的區(qū)別偏化。

四、技術(shù)選型

為什么會(huì)選擇Electron而不是其他應(yīng)用開(kāi)發(fā)框架镐侯？

4.1侦讨、Electron架構(gòu)簡(jiǎn)介

Electron的構(gòu)成主要是上面的3個(gè)大模塊，每個(gè)模塊各司其職苟翻，讓Electron有了桌面應(yīng)用的能力韵卤。

逐個(gè)理解Electron的3個(gè)大模塊：

1）Chromium：可以為Electron提供UI渲染能力，再加上Chromium本身就是跨平臺(tái)的崇猫，所以也不用考慮代碼的兼容性（只要有Chromium沈条，就能用JavaScript，HTML诅炉，CSS這些前端開(kāi)發(fā)工程師所熟知的三劍客來(lái)開(kāi)發(fā)頁(yè)面）蜡歹；

2）Node.js：Chromium并不具備原生GUI操作的能力屋厘，所以Node.js正好補(bǔ)足了這個(gè)能力（能夠調(diào)用操作系統(tǒng)的底層 API，比如path月而、fs汗洒、crypto 這些模塊，甚至能集成C++）父款；

3）Native APIs：Native API讓Electron有了跨平臺(tái)和桌面端的原生能力（比如說(shuō)它有統(tǒng)一的原生界面溢谤，窗口、托盤(pán)這些）憨攒。

4.2溯香、Electron與其他框架的區(qū)別

下面是Electron與Native、QT浓恶、NW應(yīng)用的對(duì)比圖：

如上圖所示：

1）Native(C++/C#/Objective-C)不管從原生體驗(yàn)玫坛、包的體積、性能方面來(lái)說(shuō)都是最佳的選擇包晰，但是開(kāi)發(fā)門(mén)檻高湿镀、迭代速度慢；

2）QT是基于C++的跨平臺(tái)開(kāi)發(fā)框架伐憾，跨平臺(tái)應(yīng)用十分廣泛(Mac勉痴、Windows、ios树肃、Android蒸矛、Linux、嵌入式)胸嘴，眾所周知的WPS就是用QT開(kāi)發(fā)的雏掠。性能很好，甚至于可以媲美原生的體驗(yàn)劣像，但是整體門(mén)檻還是比較高的乡话；

3）Web技術(shù)的代表Electron 和 NW.js ，相比之前選擇Electron耳奕，Electron有非嘲笄啵活躍的社區(qū)（有102k star），有Atom屋群、vscode這樣的大型應(yīng)用都是基于Electron開(kāi)發(fā)的闸婴，性能相比于natvie是肯定要差一些，但綜合來(lái)看芍躏，Electron是作為開(kāi)發(fā)桌面應(yīng)用的目前首選邪乍；

4）值得一提的是Flutter desktop，從渲染原理看flutter是skia自繪性能優(yōu)于Electron，但問(wèn)題還是穩(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)程就好了，并且也能滿(mǎn)足業(yè)務(wù)需要的系統(tǒng)級(jí)別的一些功能柏靶。

五弃理、技術(shù)實(shí)現(xiàn)

5.1、項(xiàng)目架構(gòu)

首先介紹下Electron框架里面兩個(gè)重要的概念主進(jìn)程和渲染進(jìn)程屎蜓。

1）主進(jìn)程：主要負(fù)責(zé)創(chuàng)建和管理BrowserWindow實(shí)例以及應(yīng)用程序事件痘昌。它可以執(zhí)行注冊(cè)全局快捷方式，創(chuàng)建系統(tǒng)菜單和對(duì)話(huà)框炬转，響應(yīng)自動(dòng)更新事件等操作（主進(jìn)程以及所有Node.js模塊中都提供了一部分Electron API）辆苔；

2）渲染進(jìn)程：渲染過(guò)程負(fù)責(zé)運(yùn)行應(yīng)用程序的用戶(hù)界面，渲染進(jìn)程中提供了所有DOM API扼劈、Node.js API和Electron API的子集驻啤。

如上面截圖：打開(kāi)Electron項(xiàng)目之后會(huì)有多個(gè)進(jìn)程，一個(gè)項(xiàng)目有且只有一個(gè)主進(jìn)程荐吵，創(chuàng)建窗口等有關(guān)系統(tǒng)事件寫(xiě)在主進(jìn)程中進(jìn)行骑冗，但是渲染進(jìn)程可能有多個(gè)。

那為什么會(huì)有多個(gè)渲染進(jìn)程呢先煎？

Electron應(yīng)用是Chromium內(nèi)核贼涩，所以多進(jìn)程的架構(gòu)也來(lái)源于Chromium，Chromium會(huì)單獨(dú)運(yùn)行每個(gè)標(biāo)簽榨婆，任何一個(gè)標(biāo)簽頁(yè)崩潰了都不會(huì)影響到其他標(biāo)簽磁携。因此，每個(gè)進(jìn)程在自己的空間中運(yùn)行良风，由操作系統(tǒng)調(diào)度。如果某個(gè)進(jìn)程觸發(fā)了無(wú)限循環(huán)闷供，也不會(huì)導(dǎo)致整個(gè)應(yīng)用down掉烟央。

在上文說(shuō)到兩個(gè)字“遷移”：是的，我們?cè)陂_(kāi)發(fā)桌面應(yīng)用之前有非常成熟的web端商家客服聊天系統(tǒng)了歪脏，所以我們?cè)陂_(kāi)發(fā)桌面應(yīng)用的時(shí)候大多數(shù)時(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)程開(kāi)啟了nodeIntegration: true之后在渲染進(jìn)程里面可以使用window.require('Electron')來(lái)引入寫(xiě)通信相關(guān)代碼：

方案二：是需要在主進(jìn)程編寫(xiě)preload.js（在初始化窗口的時(shí)候引入）：

5.2.1.3）通信的同步和異步問(wèn)題：

異步：渲染進(jìn)程->發(fā)送->主進(jìn)程

同步：渲染進(jìn)程->發(fā)送->主進(jìn)程

5.2.2菜單模塊

主要是調(diào)用Electron框架本身的API啄寡，滿(mǎn)足快速擴(kuò)展菜單功能以及自定義菜單功能：

但是商家客服項(xiàng)目沒(méi)用到原生菜單，而是用了自定義的菜單哩照。

沒(méi)有使用原生菜單的主要原因是：

1）原生菜單樣式較死板挺物，不能調(diào)整；

2）自定義編寫(xiě)菜單能有各種自己想要的功能飘弧，可控制其展示识藤。

5.2.3?托盤(pán)模塊

托盤(pán)屬于系統(tǒng)級(jí)的操作，所以是在主進(jìn)程中設(shè)置的次伶。在開(kāi)始之前需要注意的地方痴昧，設(shè)置托盤(pán)必須在程序ready之后。

實(shí)現(xiàn)較簡(jiǎn)單冠王，代碼如下：

5.2.4?異常處理模塊

主要調(diào)用Electron框架本身API赶撰，結(jié)合Node.js API，檢測(cè)系統(tǒng)異常后自動(dòng)刷新并上報(bào)柱彻，渲染進(jìn)程的異常已經(jīng)使用sls&arms處理豪娜，主進(jìn)程的異常主要是通過(guò)Electron的crashReporter API來(lái)記錄日志。

上面提交參數(shù)有兩個(gè)需要注意的點(diǎn)：

1）submitURL 是以post方式上傳绒疗；

2）extra 一個(gè)你可以定義的對(duì)象侵歇，附帶在崩潰報(bào)告上一起發(fā)送（只有字符串屬性可以被正確發(fā)送，不支持嵌套對(duì)象）吓蘑。

5.3惕虑、渲染進(jìn)程功能模塊

渲染進(jìn)程的代碼大部分跟商家客服IM web端一致，很多只是遷移即可磨镶。

5.3.1登錄改造

登錄信息本地化溃蔫，在登錄成功的時(shí)候，把賬號(hào)信息緩存琳猫，下次打開(kāi)應(yīng)用的時(shí)候客服無(wú)需再重新輸入伟叛，直接從緩存獲取即可。

邏輯如下圖所示：

5.3.2靜態(tài)資源

傳統(tǒng)Web應(yīng)用脐嫂，將項(xiàng)目代碼部署服務(wù)器统刮，項(xiàng)目運(yùn)行時(shí)，訪(fǎng)問(wèn)的是服務(wù)器靜態(tài)資源账千，現(xiàn)在版本發(fā)布流程侥蒙，走的是cdn資源，總而言之都是通過(guò)網(wǎng)絡(luò)獲取匀奏。

Electron提供將靜態(tài)資源打包到安裝程序鞭衩，在安裝時(shí)，將項(xiàng)目文件同步安裝到用戶(hù)電腦，使其具備訪(fǎng)問(wèn)本地文件论衍，減少了請(qǐng)求占用資源瑞佩。一定程度上也能改善因網(wǎng)速問(wèn)題導(dǎo)致的靜態(tài)資源不能實(shí)時(shí)獲取，頁(yè)面白屏問(wèn)題坯台。

5.3.3?數(shù)據(jù)存儲(chǔ)

Electron應(yīng)用里面的數(shù)據(jù)存儲(chǔ)是通過(guò)Electron-store第三方庫(kù)來(lái)實(shí)現(xiàn)的炬丸。

實(shí)現(xiàn)比較簡(jiǎn)單，如下：

5.3.4?渲染進(jìn)程打包

這塊為什么要單拎出來(lái)講渲染進(jìn)程打包呢捂人，是因?yàn)閣eb項(xiàng)目遷移變成應(yīng)用渲染進(jìn)程的時(shí)候不能像web應(yīng)用一樣直接打包御雕，需要調(diào)整請(qǐng)求API代碼，API前綴需要區(qū)分本地調(diào)試和應(yīng)用環(huán)境滥搭。

代碼如下：

使用Electron, 將項(xiàng)目打包成離線(xiàn)應(yīng)用酸纲。使用file協(xié)議，在本地讀取靜態(tài)資源瑟匆。但是ajax請(qǐng)求如果用相對(duì)路徑闽坡，打包之后，會(huì)直接找到根目錄愁溜。如下截圖疾嗅。

所以打包的時(shí)候需要給ajax提供完整的url路徑。

六冕象、技術(shù)挑戰(zhàn)

6.1代承、概述

我們?cè)趶?到1搭建商家客服IM桌面端的過(guò)程中，遇到了很多的問(wèn)題渐扮。

原因是Electron社區(qū)雖然很活躍论悴，但是不一樣場(chǎng)景遇到的問(wèn)題，幾乎找不到對(duì)應(yīng)的解決方案墓律，所以很多都是在探索過(guò)程中不斷的去完善膀估。

這里主要圍繞發(fā)布構(gòu)建流程和安全性來(lái)講下，我們是怎么解決的耻讽。

6.2察纯、安全性問(wèn)題

Electron客戶(hù)端的安全問(wèn)題也是非常重要的，那都遇到了哪些安全問(wèn)題以及我們又是如何解決的呢针肥？

具體如下：

1）渲染進(jìn)程XSS：Electron實(shí)現(xiàn)的桌面端軟件渲染層的原理實(shí)際是通過(guò)chrome內(nèi)核渲染的饼记，同樣存在XSS注入的風(fēng)險(xiǎn)（舉個(gè)例子：在html頁(yè)面中可以執(zhí)行命令：?，就可以打開(kāi)當(dāng)前操作系統(tǒng)的計(jì)算器慰枕。接入了公司統(tǒng)一的XSS治理方案握恳，該問(wèn)題即得到解決）；

2）用戶(hù)認(rèn)證信息泄漏問(wèn)題：商家客服桌面端登錄調(diào)用商家的授權(quán)接口捺僻，APP網(wǎng)關(guān)有校驗(yàn)，可以確保登陸沒(méi)有問(wèn)題；

3）本地緩存明文讀取問(wèn)題：本地?cái)?shù)據(jù)泄漏（例如：indexDB匕坯、localStorage束昵、sessionStorage等），我們主要用加密和解密算法對(duì)本地緩存信息進(jìn)行處理葛峻。

沒(méi)有絕對(duì)的安全锹雏，我們能做的就是盡可能的提高安全門(mén)檻，過(guò)程中我們也積極同公司的安全部門(mén)進(jìn)行溝通术奖，讓他們排查桌面端發(fā)布之后的安全漏洞礁遵，最終驗(yàn)證都是滿(mǎn)足安全標(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庫(kù)來(lái)打包部署所發(fā)布的包兼砖。

前面已經(jīng)說(shuō)過(guò)：Electron的好處是可以無(wú)縫集成web端的業(yè)務(wù)邏輯代碼，這里上圖左邊紅色的是web端構(gòu)建出的產(chǎn)物既棺，我們會(huì)把這部分構(gòu)建產(chǎn)物同步到主進(jìn)程的app/render目錄下（即渲染進(jìn)程目錄）讽挟，這樣在打包應(yīng)用包的時(shí)候，就能集成渲染進(jìn)程的業(yè)務(wù)邏輯丸冕，而不需要維護(hù)兩份web端的代碼耽梅。

此方案還存在不少的缺陷：由于生產(chǎn)構(gòu)建環(huán)境需要window環(huán)境，所以暫時(shí)不支持在遠(yuǎn)程打包胖烛，目前都是在本地window機(jī)器上打出完整的包之后再上傳到CDN眼姐，商家客服通過(guò)加載CDN的更新包來(lái)替換本地安裝文件，實(shí)現(xiàn)軟件的本地安裝洪己。

6.4妥凳、應(yīng)用更新問(wèn)題

應(yīng)用開(kāi)發(fā)離不開(kāi)“更新”這個(gè)話(huà)題，比如飛書(shū)應(yīng)用會(huì)時(shí)不時(shí)彈出一個(gè)更新窗口答捕，讓你選擇是否更新逝钥。我們的商家客服IM在推廣桌面應(yīng)用之后，也存在更新這個(gè)問(wèn)題拱镐。

在業(yè)務(wù)快速發(fā)展的同時(shí)艘款，如何將業(yè)務(wù)需求更好的同步給商家使用，這是商家客服桌面應(yīng)用面臨的最大的挑戰(zhàn)沃琅。

6.4.1全量更新：手動(dòng)下載安裝

這是最基礎(chǔ)的更新模式哗咆，主要思路是在打開(kāi)app（其他時(shí)候也行，我們業(yè)務(wù)主要是打開(kāi)app的時(shí)候）的時(shí)候訪(fǎng)問(wèn)遠(yuǎn)程的json文件益眉，文件內(nèi)容包含版本號(hào)晌柬，更新內(nèi)容等等最新版本的信息姥份，拿到遠(yuǎn)程版本號(hào)會(huì)跟本地應(yīng)用版本號(hào)做比較，如果版本號(hào)不一致年碘，就詢(xún)問(wèn)用戶(hù)是否更新澈歉，需要更新的話(huà)會(huì)下載到本地，用戶(hù)手動(dòng)點(diǎn)擊安裝即可屿衅。

這個(gè)更新方式不推薦使用埃难，如果你的應(yīng)用一年更新一次，ok涤久，是可以這么做的涡尘。

6.4.2增量更新

在網(wǎng)速快的情況下，全量更新跟增量更新幾乎是沒(méi)有區(qū)別的响迂。但是網(wǎng)速慢的情況下它倆之間的差距會(huì)被放大考抄，用戶(hù)體驗(yàn)不是很好。

我們不能想當(dāng)然的以為所有用戶(hù)網(wǎng)速都很好栓拜，這是不現(xiàn)實(shí)的座泳，所以不管是PC應(yīng)用還是移動(dòng)端應(yīng)用，大多數(shù)情況下是需要做增量更新幕与。

下面表格是網(wǎng)速不一樣情況下的下載耗時(shí)對(duì)比：

6.4.3增量更新方案1：electron-updater

現(xiàn)在就開(kāi)始介紹我們?cè)谏碳铱头蘒M應(yīng)用（windows應(yīng)用）中是怎么實(shí)現(xiàn)增量更新功能的挑势。

更新在大的分類(lèi)上區(qū)分全量以及增量更新，在每個(gè)小分類(lèi)里面也區(qū)分強(qiáng)更新啦鸣、弱更新（業(yè)務(wù)上的區(qū)分潮饱，底層實(shí)現(xiàn)沒(méi)區(qū)別）。

簡(jiǎn)單來(lái)說(shuō)：

1）強(qiáng)更新指的是用戶(hù)必須更新诫给，不更新將無(wú)法使用系統(tǒng)功能香拉；

2）弱更新指的是用戶(hù)想要的時(shí)候再去觸發(fā)應(yīng)用的更新，完全由用戶(hù)自主選擇中狂。

更新流程：

其中electron-updater作用于“更新應(yīng)用”這個(gè)節(jié)點(diǎn)凫碌，主要是依賴(lài)新舊版本blockmap文件的對(duì)比來(lái)實(shí)現(xiàn)增量更新。

下圖為electron-builder打包出來(lái)的release包胃榕，每次打包都會(huì)有對(duì)應(yīng)的blockmap文件盛险。

electron-updater更新實(shí)現(xiàn)主要流程分兩大步。

生產(chǎn)的blockmap文件：

1）使用7z壓縮安裝包勋又；

2）讀取安裝包的header苦掘；

3）計(jì)算出每個(gè)file的offset和end得到相應(yīng)的hash生產(chǎn)blockmap。

使用blockmap文件：

1）下載云上的blockmap文件跟本地blockmap文件對(duì)比（從上面截圖可以看出blockmap文件很小楔壤，所以下載并不會(huì)對(duì)應(yīng)用性能產(chǎn)生影響）鹤啡；

2）使用range，request(范圍請(qǐng)求)請(qǐng)求更新內(nèi)容的部分蹲嚣。

6.4.4增量更新方案2：文件替換

還有一種增量更新方式就是文件替換递瑰，只更新需要更新的模塊祟牲。

這種方式只更新需要渲染進(jìn)程的資源，大部分情況下主進(jìn)程的資源不用更改泣矛，所以下載的資源會(huì)比較小疲眷，更新較快。因?yàn)槭窃诰€(xiàn)熱更新您朽，更新完成后不用重新啟動(dòng)軟件，只需要刷新頁(yè)面重新加載資源即可换淆。

其實(shí)之前我覺(jué)的這樣的思路挺好的哗总，看下面的流程圖也是可以實(shí)現(xiàn)的，也很符合商家客服桌面應(yīng)用產(chǎn)品需求倍试。

可是后來(lái)發(fā)現(xiàn)其實(shí)忽略了以下兩個(gè)點(diǎn)：

1）替換用戶(hù)本地文件這個(gè)本身有權(quán)限問(wèn)題（比如windows用戶(hù)安裝到了C盤(pán)讯屈，寫(xiě)入文件是有管理員權(quán)限限制的）；

2）文件被占用問(wèn)題（眾所周知县习，當(dāng)文件夾中存在正在被占用的文件時(shí)涮母，刪除會(huì)失敗）躁愿。

所以在覆蓋原文件同時(shí)需要退出應(yīng)用避免占用，所以這個(gè)方式也不是很可靠。

七括蝠、遇到的問(wèn)題

我們?cè)诨贓lectron開(kāi)發(fā)客服IM桌面端的過(guò)程無(wú)疑遇到了很多問(wèn)題缸托，我揀主要的幾個(gè)問(wèn)題分享一下。

問(wèn)題一：Electron 的硬件加速功能逸雹，在 win7 或者 Linux 系統(tǒng)上营搅，容易出現(xiàn)黑屏或者卡死：

解決方案：判斷是不是win7及以下系統(tǒng)，如果是app.disableHardwareAcceleration()梆砸，禁用當(dāng)前應(yīng)用程序的硬件加速转质。

問(wèn)題二：“Uncaught ReferenceError: require is not defined”：

這個(gè)報(bào)錯(cuò)是試圖在渲染進(jìn)程使用node的時(shí)候出現(xiàn)的，不是不能用帖世，只要開(kāi)啟 主進(jìn)程的nodeIntegration: true就好了休蟹， 但不建議（有安全問(wèn)題）。

解決方案：

問(wèn)題三：“Note：you may have one or two (large) stale temporary file(s) left in your temporary directory (Generally this only happens on Windows 9x)”：

這個(gè)是打包了半天都打不出來(lái)一個(gè)完整的包的情況下出現(xiàn)的狮暑。

解決方案：當(dāng)時(shí)是因?yàn)槲覜](méi)刪除原來(lái)的包導(dǎo)致我放打包文件的C盤(pán)滿(mǎn)了鸡挠。所以刪除一些緩存就好了，nsis打包大概率都是跟磁盤(pán)有關(guān)搬男。

問(wèn)題四：下載npm包特別慢：

解決方案：yarn安裝拣展、Electron相關(guān)的包優(yōu)先使用淘寶鏡像安裝、使用公司鏡像安裝公司內(nèi)部包缔逛。

八备埃、本文小結(jié)

一路開(kāi)發(fā)下來(lái)姓惑，感慨很多。

作為公司第一個(gè)Electron應(yīng)用按脚，不管是在開(kāi)發(fā)上于毙，打包上，或者說(shuō)在部署上辅搬，都遇到了一些挑戰(zhàn)唯沮。

在網(wǎng)上也沒(méi)有比較詳細(xì)的文檔，外面做的好的也不會(huì)把詳細(xì)方案分享出來(lái)堪遂。但是即使遇到了這些問(wèn)題介蛉，也不能否認(rèn)Electron是目前最適配于我們業(yè)務(wù)目標(biāo)以及適配于開(kāi)發(fā)資源的一個(gè)框架。

目前我們已有線(xiàn)上穩(wěn)定版本溶褪，也逐步在推廣到全部商家客服币旧。

接下來(lái)需要完善的開(kāi)發(fā)流程，克服的技術(shù)難點(diǎn)有很多猿妈，商家客服工作臺(tái)應(yīng)用也會(huì)越來(lái)越完善吹菱。

九、參考資料

[1]?Electron官方開(kāi)發(fā)者手冊(cè)

[2]?快速了解新一代跨平臺(tái)桌面技術(shù)——Electron

[3]?Electron初體驗(yàn)(快速開(kāi)始彭则、跨進(jìn)程通信鳍刷、打包、踩坑等)

[4]?Electron 基礎(chǔ)入門(mén) 簡(jiǎn)單明了贰剥，看完啥都懂了

[5]?vivo的Electron技術(shù)棧選型倾剿、全方位實(shí)踐總結(jié)

[6]?融云基于Electron的IM跨平臺(tái)SDK改造實(shí)踐總結(jié)

[7]?閑魚(yú)IM基于Flutter的移動(dòng)端跨端改造實(shí)踐

[8]?網(wǎng)易云信基于Electron的IM消息全文檢索技術(shù)實(shí)踐

（本文已同步發(fā)布于：http://www.52im.net/thread-4159-1-1.html）