Electron應用更新的一個簡單方案

stormjun 發布于2019-08-21 12:04 / 3381人閱讀

摘要：如果第一次分發倒是沒啥問題，但是每次都這樣整個應用讓運營手動更新，運營肯定不爽，必須得搞個自動更新方案出來。根據這樣的更新方案，項目的目錄結構也得做一點改變，在我的項目下主要三個文件夾，，。

第一次開發Electron應用 背景

由于工作內容大多是一些日常活動，雖然活動都以已經做好模板為主，實際并不需要什么開發量，一般都是調一下按鈕的位置、顏色、字體大小什么的就可以立即發布，但是運營覺得活動什么都要經過開發才能發布，影響他們的運營效率（╮(╯▽╰)╭ ），開始下達開發指令：希望能夠模塊化，通過拖拉就可以生成一個活動（°(°ˊДˋ°) ° 大致可以理解為類型MAKA這樣生成H5的工具），好吧，么有交互，么有設計，給你這么大的空間，好好發揮，搞好加雞腿。╮(╯▽╰)╭一臉懵逼，表示么有做過，得回去好好思考一下。。。

Electron大法好

經過一段時間深入思考（掙扎糾結良久，快吐血了），(╯▔＾▔)╯覺得使用Electron搞能夠最大程度降低難度（本來也想做成后臺應用的，但是我的直覺告訴我，怎么簡單怎么來），能用web技術開發（效率扛扛），能利用巨多的nodejs模塊（支持大大的好），能夠擺脫兼容性問題（只需兼容一個瀏覽器，是一個啊，聽著都幸福）。以上就是選擇Electron開發的原因。

如何更新

既然要做成客戶端，更新是個大問題，如果整個應用更新，基本開發完之后打包壓縮72M（沒有做任何優化，依賴的包比較多，node_modules壓縮后也有20M），應該算是很大的了。如果第一次分發倒是沒啥問題，但是每次都這樣整個應用讓運營手動更新，運營肯定不爽，必須得搞個自動更新方案出來。
在Github看了一遍文檔，是有專門一節介紹自動更新的傳送門，Electron團隊也很貼心，給了一系列的解決方案，只是感覺自己用不上那么高大上的技術（我只需要更簡單一點就可以了），好(╯▔＾▔)╯，決定自己擼一套出來。
首先利用electron-packager，打包出來的Electron應用（因為公司都是windows，只針對windows打包即可，但是打包過程也是相當耗時，時間大多耗在復制node_modules文件夾），很容易就發現electron-packager生成其實就是一個模板，每次內容改變就只是resources文件夾下面的內容改變而已，如果我們不需要復制node_modules的文件夾的內容，打包速度會提高很多（其實一般來說node_modules也不會經常改變），開始設想把node_modules 和 src(代碼)分開打包，這樣以后更新的話，只更新src目錄也相當快。

ASAR文件

在看Electron文檔時，看到了Electron內部是支持一種叫asar格式的文件，那asar到底是一種什么樣的格式呢，Github的官方介紹是這樣的：

Asar is a simple extensive archive format, it works like tar that concatenates all files together without compression, while having random access support.

可見這種文件格式只是簡單把文件整理到一起，并沒有壓縮，可以當做它是一個文件夾來訪問里面的文件，還有很重要的一點，你只能讀取不能寫入。
有了這種文件格式就提供了一個思路，把node_modules 和 src 分別打包成node_modules.asar 和 src.asar，當應用啟動的時候直接require對應src.asar文件，在src.asar里面的代碼再執行創建窗口和加載頁面。
然后應用更新也只更新node_modules.asar 和 src.asar這兩個文件，這樣的話，整體的更新粒度是縮小了，當然你如果有更高的要求要做到那種更小粒度（針對代碼某個文件級別的更新）可能得再思考一下了，但是在我當前的場景下是足夠用了。

一點小問題

還有一點小問題，src.asar里面的代碼怎么尋找到node_modules.asar里面的模塊尼，換句話說就是怎么把node_modules.asar放到模塊的查找路徑上，這里貼一下我所使用的方法:

require("module").globalPaths.unshift(require("path").join(process.cwd(), "resources/node_modules.asar"));

只要加到globalPaths上，且放到第一個（查找更快點）。

根據這樣的更新方案，項目的目錄結構也得做一點改變，在我的項目下主要三個文件夾：app，node_modules，src。node_modules 和 src就不用多說，那現在的app目錄下的代碼到底要干些啥尼

1. 先檢查有沒有文件需要更新，如果有彈出更新窗口（代碼先請求一個manifest.json文件，里面有文件的MD5，用現有的文件做對比）
跳到2，沒有就跳到3
2. 依次下載對應的文件，例如：src.asar.update, node_modules.asar.update，下載完成后，直接替換舊的文件
3. 最后require("src.asar").createApp()創建主界面，現在就能保證應用啟動時都是最新的代碼（只要下載沒出問題）

結束

就這樣一個簡單的方案，運營也沒在抱怨更新麻煩，皆大歡喜。當然面對真實用戶場景，應該還有很多欠缺的地方，以后慢慢再學習改進(╯▔＾▔)╯。

云服務器 GPU云服務器一個不錯的應用簡單編寫一個html 應用更新您編一個簡單點的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87418.html

Electron應用更新的一個簡單方案

摘要：如果第一次分發倒是沒啥問題，但是每次都這樣整個應用讓運營手動更新，運營肯定不爽，必須得搞個自動更新方案出來。根據這樣的更新方案，項目的目錄結構也得做一點改變，在我的項目下主要三個文件夾，，。第一次開發Electron應用背景由于工作內容大多是一些日常活動，雖然活動都以已經做好模板為主，實際并不需要什么開發量，一般都是調一下按鈕的位置、顏色、字體大小什么的就可以立即發布，但是運營覺...

CastlePeaK 2019-08-01 17:27 評論0 收藏0
Electron 打包Mac安裝包代碼簽名問題解決方案

摘要：最近一直在做應用的打包，集成版本的自動更新時出現了問題。針對上述上打包無法進行正確代碼簽名的問題，通過設置環境變量和使用進行代碼簽名可以解決。最近一直在做electron應用的打包，集成mac版本的自動更新時出現了問題。具體打包流程請參考：Electron 桌面應用打包（npm run build）簡述(windows + mac)Electron應用集成自動更新功能可參考：Elec...

taoszu 2019-08-22 13:53 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 軟件自動更新

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

phpmatt 2019-08-02 15:16 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 軟件自動更新

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

leiyi 2019-08-23 18:05 評論0 收藏0