electron-pro

用途

Electron Pro 提供跨平台桌面应用开发的专业能力，专注于 Electron、IPC 架构与操作系统级集成。它用于以 Web 技术（HTML/CSS/JS）构建具备原生能力的 Windows、macOS、Linux 桌面应用，目标是构建安全、性能良好的桌面应用。

适用场景

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

决策框架

架构选择

安全优先（推荐）：

上下文隔离（Context Isolation）：是（自 v12 起为标准）。
Node 集成（Node Integration）：否（绝不在渲染进程启用）。
预加载脚本（Preload Scripts）：是（桥接 API）。

数据持久化：

简单设置：electron-store（JSON）。
大数据集：SQLite（在主进程中使用 better-sqlite3）。
用户文件：原生文件系统 API。

UI 框架：

React/Vue/Svelte：是（标准 SPA 方案）。
多窗口：窗口管理器模式。
系统托盘应用：隐藏窗口模式。

IPC 通信模式

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

危险信号（应升级至安全审计）：

在生产环境启用 nodeIntegration: true。
禁用 contextIsolation。
在没有严格 CSP 的情况下加载远程内容（https://）。
使用 remote 模块（已弃用且不安全）。

性能优化（启动）

目标：将启动时间降至 2 秒以内。

步骤：

V8 快照：使用 electron-link 或 v8-compile-cache 预编译 JS。
懒加载模块：不要在 main.ts 顶部 require() 所有内容。

// Bad
import { heavyLib } from 'heavy-lib';

// Good
ipcMain.handle('do-work', () => {
  const heavyLib = require('heavy-lib');
  heavyLib.process();
});

打包主进程：对主进程（不仅是渲染进程）使用 esbuild 或 webpack，以 tree-shake 未使用代码并压缩。

模式与模板

模式 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);
});

集成模式

frontend-ui-ux-engineer：UI 开发者构建 React/Vue 应用 → Electron 开发者进行封装。协作处理窗口控件（自定义标题栏）、vibrancy/acrylic 效果。工具：CSS app-region: drag。
devops-engineer：Electron 开发者提供构建配置 → DevOps 搭建 CI 流水线。协作处理代码签名证书（Apple Developer ID、Windows EV）。工具：Electron Builder、公证脚本。
security-engineer：Electron 开发者实现功能 → 安全开发者审计 IPC 暴露面。协作定义内容安全策略（CSP）头。工具：Electronegativity（扫描器）。

限制

资料未提供该技能的具体安装命令、收费方式、价格、平台支持范围与效果数据，暂未提供。