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

新使用者購買《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 的二進位制資源：

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

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

• 映象部分：https://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 的環境變數為https://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 應用。