線上Electron應用具備哪些特徵？

2022 年 11 月 9 日
筆記
Node.js

新用戶購買《Electron + Vue 3 桌面應用開發》，加小冊專屬微信群，參與群抽獎，送《深入淺出Electron》、《Electron實戰》作者簽名版。

1等獎：《深入淺出Electron》+《Electron實戰》

2等獎：《深入淺出Electron》

3等獎：《Electron實戰》

抽獎活動是掘金組織的，僅限近幾日加入微信群的新成員（目前人還不多），我負責抽獎、郵寄，2022年11月20日開始抽獎。凡參與抽獎的讀者都有機會中獎。

在上一節中我們介紹了如何升級 Electron 應用，現在我們已經介紹完了如何開發一個 Electron 應用以及如何把 Electron 應用分發給用戶。如果按照一個產品的生命周期來考慮，那麼我們現在面對的是如何觀察、分析、調試線上應用了，如果你不了解 Electron 應用在用戶側的特徵，那麼就很難正確的分析線上應用的問題。

本節我們通過介紹 Electron 應用安裝目錄的結構、快取目錄的結構、註冊表資訊、全量升級快取目錄的結構等資訊來介紹線上應用的特徵，除此之外我們還介紹了開發環境下 electron npm 包和 electron-builder npm 包的特徵，以便於我們分析開發環境下的問題。

應用程式安裝目錄

如果你在使用 electron-builder 打包你的應用時設置了不允許用戶修改應用程式安裝目錄，那麼你的應用程式會安裝在用戶的如下目錄中：

64 位應用程式的安裝目錄：C:\Program Files\\[yourAppName]
32 位應用程式的安裝目錄：C:\Program Files (x86)\\[yourAppName]

應用程式安裝目錄下的文件及其功用如下所示：

應用程式的安裝目錄
├─ locales（Electron的多國語言文件）
│ │ ├─ en-GB.pak（英國英語）
│ │ ├─ en-US.pak（美國英語）
│ │ ├─ zh-CN.pak（簡體中文）
│ │ ├─ zh-TW.pak（繁體中文）
│ │ ├─ .....（其他國家語言文件，一般情況下可以刪除）
├─ resources（應用程式資源及編譯後的源碼）
│  ├─ app.asar（編譯後的源碼壓縮文檔）
│  ├─ app.asar.unpacked（編譯後的源碼未壓縮文檔）
│  ├─ app（如果沒有app.asar或app.asar.unpacked，則編譯後源碼文檔在此目錄下）
│  ├─ app-update.yml（應用程式升級相關的配置文件）
│  ├─ .....（通過electron-builder配置的其他的額外資源）
├─ swiftshader（圖形渲染引擎相關庫）
├─ yourApp.exe（應用程式可執行文件，其實就是electron.exe修改圖標和文件名後得來的）
├─ UnInstall yourApp.exe（卸載應用程式的可執行文件）
└─ ......（其他Electron應用程式使用的二進位資源）

Electron 應用在 Mac 作業系統上安裝之後，會以 app 應用的形式出現在用戶的應用程式目錄下，開發者可以通過右擊菜單的顯示包內容來查看應用程式內的文件組織情況，如下所示：

應用程式.app
├─ Contents（根目錄）
│ │ ├─ _CodeSignature（存放應用程式的簽名資訊）
│ │ ├─ Frameworks（存放Electron相關的二進位資源）
│ │ ├─ Info.plist（應用程式的配置文件，包含應用程式名稱、id、圖標以及底層介面許可權的資訊）
│ │ ├─ Resources（應用程式資源及編譯後的源碼）
│ │ │ ├─ app-update.yml（應用程式升級相關的配置文件）
│ │ │ ├─ app.asar（編譯後的源碼壓縮文檔）
│ │ │ ├─ app.asar.unpacked（編譯後的源碼未壓縮文檔）
│ │ │ ├─ app（如果沒有app.asar或app.asar.unpacked文件，則編譯後源碼文檔在此目錄下）
│ │ │ ├─ ...（Electron內置的多國語言文件）
└─└─└─ ...（通過electron-builder配置的其他的額外資源）

應用程式快取目錄

用戶第一次啟動 Electron 應用後，Electron 會在如下目錄創建相應的快取文件，該目錄的文件結構及功能說明如下：

C:\Users\[yourOsUserName]\AppData\Roaming\[yourAppName]
├─ IndexedDB（Electron應用渲染進程IndexedDB數據存放目錄）
├─ Local Storage（Electron應用渲染進程Local Storage數據存放目錄）
├─ Session Storage（Electron應用渲染進程Session Storage數據存放目錄）
├─ Crashpad（Electron應用崩潰日誌數據存放目錄）
├─ Code Cache（Electron應用渲染進程源碼文件快取目錄，wasm的快取也會存在此處）
├─ Partitions（如果你的應用中適應了自定義協議，或根據字元串產生了session，此目錄將有相應的內容）
├─ GPUCache（Electron應用渲染進程GPU運行過程產生的快取數據）
└─ ......（其他Electron渲染進程快取文件）

Mac 作業系統下的快取目錄為：

MacintoshHD/用戶/[yourOsUserName]/資源庫/ApplicationSupport/[yourAppName]

該目錄下的內容與子目錄結構與 Windows 作業系統類似，不再贅述。

需要注意的是，雖然以上目錄內的文件都是加密存儲的，但你只要把這個目錄下的文件拷貝到另一台機器上，就可以用一個偽造的 Electron 程式讀取到這些快取文件內的數據。

另外，我們前面章節介紹的客戶端資料庫文件也是存放在這個目錄下的。

Electron 為我們提供了一個便捷的 API 來獲取此路徑，此方法執行時會判斷當前應用正運行在什麼作業系統上，然後根據作業系統的名稱返回具體的路徑地址。

app.getPath("userData");

註冊表鍵值

如果開發者使用 Electron 提供的開機自啟動 API，為應用程式設置了開機自啟動功能，那麼在 Windows 作業系統下，用戶註冊表如下路徑下會增加一個鍵值對：

電腦\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run
鍵：electron.app.[yourAppName]
值：C:\Program Files (x86)\[yourAppName]\[yourAppName].exe

設置開機自啟動的程式碼如下所示：

import { app } from "electron";
app.setLoginItemSettings({
  openAtLogin: true,
});

另外 99% 的 Electron 應用是通過安裝包分發給最終用戶的，有安裝包勢必就有卸載程式，作業系統一般會在註冊表如下三個路徑下記錄系統的卸載程式路徑：

電腦\HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Uninstall
電腦\HKEY_LOCAL_MACHINE\Software\\Wow6432Node\\Microsoft\\Windows\\CurrentVersion\\Uninstall
電腦\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Uninstall

如果開發者使用 app 對象的 setAsDefaultProtocolClient 方法，把自己的應用設置成可以通過外部連接喚起的應用，那麼這個操作也會在用戶的註冊表內留下痕迹，如下為 GitHubDesktop 在我的註冊表中寫入的內容：

鍵：電腦\HKEY_CURRENT_USER\Software\Classes\github-windows\shell\open\command
值："C:\Users\liuxiaolun\AppData\Local\GitHubDesktop\app-2.9.0\GitHubDesktop.exe" --protocol-launcher "%1"

如你所見，當用戶點擊連接喚起我們的應用時，這個註冊表鍵值不但給我的應用傳遞了–protocol-launcher 參數，還中轉了連接中的參數給我的應用。

Mac 沒有註冊表，相關的資訊都是通過 Info.plist 文件和應用程式共同完成的。

升級程式快取目錄

前文我們介紹了全量升級 Electron 應用的方案，當 electron-updater 檢測到升級伺服器上存在新版本的應用程式時，會下載新版本相關的文件，並保存在如下目錄中：

C:\Users\[userName]\AppData\Local\[appName]-updater\pending

下載完成後會校驗新版本安裝文件哈希值是否與伺服器上的安裝文件的哈希值相同。

任務欄快捷方式

如果用戶把應用程式的快捷方式固定到任務欄，這個快捷方式的存放路徑為：

C:\Users\[userName]\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar

在一些特殊的情況下，我們可能要更新這個快捷方式的目標程式，比如用戶先安裝了 32 位的應用程式，又安裝 64 位的應用程式，此時用戶固定在任務欄的圖標指向的目標程式路徑就是錯的了。

Electron 為我們提供了讀寫快捷方式的 API：shell 模組下的 readShortcutLink 和 writeShortcutLink，開發者可以使用這兩個 API 來更新任務欄上的快捷方式。

Electron npm 包的特徵

Electron npm 包會被安裝到工程的如下目錄中：

yourSolutionDir\node_modules\electron

這個目錄下 dist 子目錄中存放著 Electron 的二進位文件，我們開發調試應用時，啟動的就是下面這個應用程式：

yourSolutionDir\node_modules\electron\dist\electron.exe

這個包的導出文件是 index.js，這個文件並沒有什麼特殊的邏輯，只是返回了上面 electron.exe 的路徑。如果你還記得我們在「如何開發 Vite3 插件構建 Electron 開發環境」章節中介紹的知識，我們就是通過require("electron")獲取 electron.exe 的路徑的，如下程式碼所示：

let electronProcess = spawn(require("electron").toString(), [], {});

安裝 Electron npm 包時，npm 會在如下路徑下載 Electron 的二進位資源：

//github.com/electron/electron/releases/download/v20.1.3/electron-v20.1.3-win32-x64.zip

這個地址包含如下了三個部分：

鏡像部分：//github.com/electron/electron/releases/download/。
版本部分：v11.1.0/。
文件部分：electron-v11.1.0-win32-x64.zip。

這三部分聯合起來最終構成了下載地址，每個部分都有其默認值，也有對應的重寫該部分值的環境變數。

鏡像部分的環境變數：ELECTRON_MIRROR。
版本部分的環境變數：ELECTRON_CUSTOM_DIR。
文件部分的環境變數：ELECTRON_CUSTOM_FILENAME。

如果你因為網路環境問題而無法成功安裝 Electron npm 包，那麼可以嘗試設置 ELECTRON_MIRROR 的環境變數為//npm.taobao.org/mirrors/electron/，這是阿里巴巴團隊為中國開發者提供的鏡像地址。

npm 會首先把下載到的 Electron 可執行文件及其二進位資源壓縮包放置到如下目錄中：

C:\Users\ADMINI~1\AppData\Local\Temp

文件下載完成後，npm 會把它複製到快取目錄中以備下次使用。默認的快取目錄為：

C:\Users\[your os username]\AppData\Local\electron\Cache

開發者可以通過設置名為 electron_config_cache 的環境變數來自定義快取目錄。知道了快取目錄的位置之後，開發者就可以先手動把 Electron 可執行文件及其二進位資源壓縮包和哈希文件放置到相應的快取目錄中。這樣再通過 npm install 命令安裝 Electron 依賴包時，就會先從你的快取目錄里獲取相應的文件，而不是去網路上下載了。這對於工作在無外網環境下的開發者來說，無疑是一種非常有價值的手段。

需要注意的是快取目錄子目錄的命名方式是有要求的，如下所示：

//二進位包文件的路徑
[你的快取目錄]/httpsgithub.comelectronelectronreleasesdownloadv11.1.0electron-v11.1.0-win32-x64.zip/electron-v9.2.0-win32-x64.zip
//哈希值文件的路徑
[你的快取目錄]/httpsgithub.comelectronelectronreleasesdownloadv11.1.0SHASUMS256.txt/SHASUMS256.txt

路徑中[你的快取目錄]下的子目錄的命名方式看起來有些奇怪，這其實就是下載地址格式化得來的(去除了 url 路徑中的斜杠，使得其能成為文件路徑)

electron-builder npm 包的特徵

electron-builder 也包含一些二進位資源，這些二進位資源主要為生成安裝包和應用程式簽名服務。這些二進位資源默認存放在如下目錄中：

安裝包製作工具：C:\Users\yourUserName\AppData\Local\electron-builder\Cache\nsis
應用程式簽名工具：C:\Users\yourUserName\AppData\Local\electron-builder\Cache\winCodeSign

electron-builder 下載並快取 Electron 的邏輯與安裝 Electron 依賴包時的下載和快取邏輯不同。electron-builder 下載 Electron 時使用的鏡像環境變數為： ELECTRON_BUILDER_BINARIES_MIRROR，快取路徑環境變數為： ELECTRON_BUILDER_CACHE。

當開發者在 64 位作業系統上打 32 位的應用程式安裝包時，electron-builder 會去伺服器下載 32 位的 Electron 二進位包，從而完成交叉編譯的需求，這實際上這並不是真正的交叉編譯。

總結

本節我們先介紹了 Electron 應用安裝目錄的結構，不知道你有沒有注意到 Windows 安裝目錄和 Mac 安裝目錄的文件結構差異是非常巨大的；接著我們介紹了 Electron 應用在 Windows 和 Mac 作業系統下的快取目錄，這兩個作業系統下的快取目錄作用是相同的、之後我們介紹了一個 Electron 應用會在 Windows 作業系統下留下哪些註冊表資訊、之後我們還介紹 Electron 應用全量升級時升級文件的快取目錄。最後介紹的 electron npm 包和 electron-builder npm 包的特徵主要是為了方便我們分析開發環境下的問題。

知道了 Electron 應用具備哪些特徵之後，下一節我們將介紹如何調試用戶側的 Electron 應用。

Tags: Node.js