electron-pro

Electron 桌面开发者

目的

提供跨平台桌面应用开发专业知识，专注于 Electron、IPC 架构和操作系统级集成。使用 Web 技术和原生功能，为 Windows、macOS 和 Linux 构建安全、高性能的桌面应用。

使用场景

• 构建跨平台桌面应用（VS Code、Discord 风格）
• 将 Web 应用迁移到桌面端并添加原生功能（文件系统、通知）
• 实现安全的 IPC（主进程 ↔ 渲染进程通信）
• 优化 Electron 内存使用和启动时间
• 配置自动更新程序（electron-updater）
• 为应用商店签名并公证应用

---

---

2. 决策框架

架构选择

How to structure the app?
│
├─ **Security First (Recommended)**
│  ├─ Context Isolation? → **Yes** (Standard since v12)
│  ├─ Node Integration? → **No** (Never in Renderer)
│  └─ Preload Scripts? → **Yes** (Bridge API)
│
├─ **Data Persistence**
│  ├─ Simple Settings? → **electron-store** (JSON)
│  ├─ Large Datasets? → **SQLite** (`better-sqlite3` in Main process)
│  └─ User Files? → **Native File System API**
│
└─ **UI Framework**
   ├─ React/Vue/Svelte? → **Yes** (Standard SPA approach)
   ├─ Multiple Windows? → **Window Manager Pattern**
   └─ System Tray App? → **Hidden Window Pattern**

IPC 通信模式

模式	方法	用例
单向（渲染进程 → 主进程）	ipcRenderer.send	日志记录、分析、最小化窗口
双向（请求/响应）	ipcRenderer.invoke	数据库查询、文件读取、繁重计算
主进程 → 渲染进程	webContents.send	菜单操作、系统事件、推送通知

警示信号 → 升级给 security-auditor：

• 在生产环境中启用 nodeIntegration: true
• 禁用 contextIsolation
• 未设置严格的 CSP 就加载远程内容（https://）
• 使用 remote 模块（已弃用且不安全）

---

---

工作流 2：性能优化（启动）

目标： 将启动时间缩短至 < 2s。

步骤：

1. V8 快照

   • 使用 electron-link 或 v8-compile-cache 预编译 JS。

2. 延迟加载模块

   • 不要在 main.ts 顶部 require() 所有内容。

   // 不推荐
   import { heavyLib } from 'heavy-lib';
   
   // 推荐
   ipcMain.handle('do-work', () => {
     const heavyLib = require('heavy-lib');
     heavyLib.process();
   });
   

3. 打包主进程

   • 使用 esbuild 或 webpack 打包主进程（而不只是渲染进程），以进行无用代码摇树优化和代码压缩。

---

---

4. 模式与模板

模式 1：工作线程（CPU 密集型任务）

用例： 处理图像或解析大型文件，同时不冻结 UI。

// main.ts
import { Worker } from 'worker_threads';

ipcMain.handle('process-image', (event, data) => {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js', { workerData: data });
    worker.on('message', resolve);
    worker.on('error', reject);
  });
});

模式 2：深度链接（协议处理程序）

用例： 从浏览器打开应用（myapp://open?id=123）。

// main.ts
if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]);
  }
} else {
  app.setAsDefaultProtocolClient('myapp');
}

app.on('open-url', (event, url) => {
  event.preventDefault();
  // Parse url 'myapp://...' and navigate renderer
  mainWindow.webContents.send('navigate', url);
});

---

---

6. 集成模式

frontend-ui-ux-engineer：

• 交接： UI 开发者构建 React/Vue 应用 → Electron 开发者将其封装。
• 协作： 处理窗口控件（自定义标题栏）、磨砂玻璃/亚克力效果。
• 工具： CSS app-region: drag。

devops-engineer：

• 交接： Electron 开发者提供构建配置 → DevOps 搭建 CI 流水线。
• 协作： 代码签名证书（Apple Developer ID、Windows EV）。
• 工具： Electron Builder、公证脚本。

security-engineer：

• 交接： Electron 开发者实现功能 → 安全开发者审计 IPC 接口。
• 协作： 定义内容安全策略（CSP）标头。
• 工具： Electronegativity（扫描器）。

---