ساخت اپلیکیشن دسکتاپ با Electron

ساخت اپلیکیشن دسکتاپ با تکنولوژی‌های وب

بسیاری از نرم‌افزارهایی که هر روز استفاده می‌کنید — Visual Studio Code، Slack، Discord و Figma دسکتاپ — با Electron ساخته شده‌اند. Electron موتور مرورگر Chromium و Node.js را کنار هم قرار می‌دهد تا بتوانید با HTML، CSS و JavaScript یک اپلیکیشن واقعی برای ویندوز، مک و لینوکس بسازید که به فایل‌ها، منوها و اعلان‌های سیستم‌عامل دسترسی دارد.

مانیتور iMac، کیبورد بی‌سیم و تبلت روی میز چوبی؛ یک اپلیکیشن برای همه‌ی سیستم‌عامل‌های دسکتاپ

معماری دو پروسسی

درک این بخش کلید کار با Electron است:

Main Process: یک پروسس Node.js که پنجره‌ها را می‌سازد، به سیستم‌عامل دسترسی دارد و چرخه‌ی عمر برنامه را مدیریت می‌کند.
Renderer Process: هر پنجره یک صفحه‌ی وب مستقل است که رابط کاربری را نمایش می‌دهد؛ می‌تواند React، Vue یا HTML ساده باشد.
Preload Script: پلی امن بین این دو که فقط توابع مشخصی را در اختیار صفحه قرار می‌دهد.

شروع سریع

npm create electron-app@latest my-desktop-app -- --template=vite-typescript
cd my-desktop-app
npm start

ساخت پنجره‌ی اصلی

// main.ts
import { app, BrowserWindow, ipcMain, dialog } from "electron"
import path from "node:path"
import { readFile } from "node:fs/promises"

function createWindow() {
  const win = new BrowserWindow({
    width: 1100,
    height: 720,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false,
    },
  })
  win.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL)
}

ipcMain.handle("file:open", async () => {
  const { filePaths } = await dialog.showOpenDialog({ properties: ["openFile"] })
  if (!filePaths[0]) return null
  return readFile(filePaths[0], "utf8")
})

app.whenReady().then(createWindow)

میز کار با اسپیکر، مانیتور و فیگور کوچک؛ محیط دسکتاپ که اپلیکیشن در آن اجرا می‌شود

ارتباط امن با IPC

صفحه‌ی وب نباید مستقیماً به Node.js دسترسی داشته باشد؛ در غیر این صورت یک آسیب‌پذیری XSS کوچک می‌تواند به اجرای دستور روی سیستم کاربر منجر شود. به همین دلیل فقط توابع مشخص را از طریق Preload در اختیار صفحه قرار می‌دهیم:

// preload.ts
import { contextBridge, ipcRenderer } from "electron"

contextBridge.exposeInMainWorld("api", {
  openFile: () => ipcRenderer.invoke("file:open"),
})

// داخل کامپوننت React
const content = await window.api.openFile()

قابلیت‌های بومی سیستم‌عامل

منوی برنامه و منوی راست‌کلیک با کلاس Menu.
آیکون در System Tray برای اپلیکیشن‌هایی که در پس‌زمینه اجرا می‌شوند.
اعلان‌های دسکتاپ با کلاس Notification.
میان‌برهای سراسری با globalShortcut.
شروع خودکار همراه با ورود کاربر به سیستم‌عامل.

قطعات یک دستگاه الکترونیکی که مرتب کنار هم چیده شده‌اند؛ اجزای مختلف یک اپلیکیشن Electron

بسته‌بندی و انتشار

Electron Forge یا electron-builder فایل‌های نصبی را برای هر سیستم‌عامل می‌سازند:

npm run make
# خروجی: Setup.exe برای ویندوز، dmg برای مک، deb و AppImage برای لینوکس

برای انتشار حرفه‌ای، فایل‌ها را امضای دیجیتال کنید تا ویندوز و مک هشدار امنیتی نمایش ندهند و با electron-updater قابلیت به‌روزرسانی خودکار را اضافه کنید.

لپ‌تاپ روی میز کنار پنجره با نور ملایم؛ اپلیکیشن دسکتاپ در محیط کار واقعی کاربر

چالش‌ها و راه‌حل‌ها

حجم زیاد: هر اپلیکیشن Chromium را همراه دارد. با حذف وابستگی‌های اضافه و فشرده‌سازی، حجم را کنترل کنید.
مصرف حافظه: پنجره‌های پنهان را ببندید و کارهای سنگین را به Worker Thread بسپارید.
امنیت: همیشه contextIsolation را فعال نگه دارید و هرگز محتوای راه دور غیرقابل‌اعتماد را با دسترسی Node بارگذاری نکنید.
جایگزین سبک‌تر: اگر حجم برایتان حیاتی است، Tauri را هم بررسی کنید که از WebView خود سیستم‌عامل استفاده می‌کند.

ماشین تحریر قدیمی، کتاب و عینک روی میز چوبی؛ از ابزارهای کلاسیک تا نرم‌افزارهای دسکتاپ مدرن

جمع‌بندی

Electron به توسعه‌دهندگان وب اجازه می‌دهد بدون یادگیری C++ یا Swift، اپلیکیشن دسکتاپ کامل و چندسکویی بسازند. با رعایت معماری امن IPC و بهینه‌سازی منابع، می‌توانید نرم‌افزاری بسازید که هم ظاهر مدرن وب را دارد و هم قدرت یک برنامه‌ی بومی دسکتاپ.