Cara menukar tapak web anda menjadi apl desktop dengan Electron

Hari ini, banyak aplikasi desktop yang anda gunakan setiap hari dibina dengan teknologi web seperti HTML, CSS dan JavaScript. Alat seperti Visual Studio Code, Slack, Discord atau Posman Mereka pada dasarnya adalah tapak web yang berfungsi sebagai aplikasi desktop terima kasih kepada rangka kerja yang sangat berkuasa: Electron. Untuk mengetahui lebih lanjut tentang proses ini, anda boleh menyemak cara mengubah apl web kepada apl desktop dengan Chrome.

Tetapi apakah maksud ini sebenarnya? Ini bermakna anda boleh mengambil mana-mana aplikasi web, walaupun halaman mudah dibuat dengan React, Vue atau mana-mana rangka kerja JavaScript moden yang lain, dan mengubahnya menjadi program yang boleh dipasang untuk Windows, Linux atau macOS. Kemungkinan ini telah membuka pintu kepada beribu-ribu pembangun untuk mengubah kerja web mereka menjadi alat desktop asli tanpa mempelajari bahasa atau rangka kerja yang rumit seperti C++ atau Java.

Apakah Elektron dan mengapa ia sangat relevan?

Elektron ialah rangka kerja sumber terbuka yang dibangunkan oleh GitHub yang menggabungkan Chromium (enjin penyemak imbas Google Chrome) dengan Node.js, membolehkan anda menjalankan aplikasi web seolah-olah ia asli pada platform yang berbeza. Dengan kata mudah, Elektron bertindak sebagai pelayar berkapsul yang memuatkan projek web anda dan memberikannya akses kepada ciri sistem pengendalian.

Ini mempunyai banyak kelebihan: anda boleh menggunakan tindanan teknologi yang sama yang anda sudah tahu (HTML, CSS, JS), menggunakan semula komponen dan perpustakaan sedia ada, dan mencipta satu kod sumber untuk berbilang projek. OS.

Struktur asas aplikasi Elektron

Aplikasi dalam Elektron terbahagi kepada dua proses:

• Proses Utama: Ia adalah teras aplikasi, di mana tingkap dicipta dan dikawal menggunakan modul BrowserWindow. Proses ini mempunyai akses penuh kepada sistem pengendalian terima kasih kepada Node.js.
• Proses Penyampai: Di sinilah antara muka pengguna (UI) dipaparkan, bersamaan dengan apa yang anda akan lihat dalam a pelayar web. Setiap tetingkap yang anda buat akan mempunyai proses pemaparnya sendiri.

Proses ini diasingkan atas sebab keselamatan, jadi komunikasi antara mereka adalah perlu untuk mengakses kefungsian asli (seperti membuka fail atau memaparkan pemberitahuan). Ini dilakukan melalui modul ipcMain e ipcRenderer.

Kedua-dua proses boleh mengakses kefungsian Node.js., yang membuka pelbagai kemungkinan seperti membaca fail sistem, membuat permintaan HTTP, pengendalian pangkalan data tempatan, antara lain.

Bermula: Memasang dan Mengkonfigurasi Elektron

Sebelum anda memulakan, anda perlu memasang Node.js y npm (pengurus pakej Node). Anda kemudiannya boleh memasang Electron sebagai pergantungan pembangunan dalam projek web anda:

npm install electron --save-dev

Anda juga boleh memasangnya secara global:

npm install -g electron

Setelah dipasang, anda mesti mencipta fail input proses utama. Mengikut konvensyen ia dipanggil main.js o electron.js dan mesti dirujuk dalam package.json dengan harta main:

"main": "electron.js"

Fail ini akan mengandungi sesuatu seperti berikut untuk membuka apl anda:

const { app, BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  });
  win.loadFile('index.html');
}
app.whenReady().then(createWindow);

Kod ini mencipta tetingkap dengan saiz tertentu yang memuatkan fail anda index.html.

Bagaimana untuk mengintegrasikan aplikasi web ke dalam Electron

Sama ada apl anda dibuat dengan React, Vue, Angular atau JavaScript vanilla, matlamatnya adalah sama: untuk menyampaikan kandungan web kepada proses pemapar. Untuk ini anda mempunyai dua pilihan:

• Mod pembangunan: muatkan apl daripada http://localhost:3000 menggunakan win.loadURL() dalam mod pembangunan.
• Mod pengeluaran: Bina apl web anda dan muatkan daripada file:// secara langsung index.html dengan win.loadFile().

Sebagai contoh, jika anda menggunakan React dengan Vite, selepas melakukannya npm run build, fail yang terhasil terletak di dist/index.html dan ia dimuatkan seperti ini:

mainWindow.loadFile(path.join(__dirname, 'dist', 'index.html'));

Skrip pramuat dan komunikasi antara proses

Untuk meningkatkan keselamatan dan kefungsian, banyak aplikasi menyertakan fail yang dipanggil preload.js yang berjalan sebelum rendering tetapi selepas tetingkap dicipta. Ini membolehkan kaedah tertentu didedahkan secara terkawal.

contextBridge.exposeInMainWorld('electronAPI', {
  closeApp: () => ipcRenderer.send('close')
});

Dan dalam proses utama:

ipcMain.on('close', () => {
  app.quit();
});

Dengan cara ini anda boleh menyampaikan proses tanpa kehilangan keselamatan atau mendedahkan pembolehubah sensitif. Jika anda ingin mengetahui lebih lanjut tentang cara apl desktop berfungsi, anda boleh meneroka artikel mengenai ranap apl desktop. WhatsApp.

Pembungkusan dan pengedaran pelbagai platform

Setelah apl anda berfungsi dengan betul, anda boleh menggunakan alatan seperti pembina elektron o pembungkus elektron Untuk membungkus aplikasi anda ke dalam format yang boleh dipasang:

• Windows: .exe atau pemasang NSIS
• MacOS: .dmg atau .app
• Linux: .AppImage, .deb atau .tar.gz

Anda memasang dengan:

npm install --save-dev electron-builder

Dan anda tentukan dalam anda package.json konfigurasi binaan:

"build": {
  "appId": "com.miempresa.miapp",
  "productName": "MiApp",
  "directories": {
    "output": "dist_electron"
  },
  "files": ,
  "win": {
    "target": "nsis"
  }
}

Kemudian anda jalankan:

npm run build
npm run dist

Penambahbaikan yang boleh anda sepadukan ke dalam apl desktop anda

Setelah apl anda ditukar dan dijalankan sebagai apl desktop, anda boleh mempertingkatkannya dengan ciri asli:

• Tunjukkan pemberitahuan sistem daripada antara muka anda.
• Menu asli fail, penyuntingan, bantuan, dsb.
• Akses sistem fail untuk membaca dan menulis.
• Pintasan papan kekunci adat ditakrifkan secara global.

Anda juga boleh mengintegrasikan perpustakaan seperti:

• enjin slaid-teka-teki untuk permainan teka-teki.
• sqlite3 o nedb untuk pangkalan data tempatan.
• tajam untuk pemprosesan imej.

Adakah Elektron sentiasa pilihan terbaik?

Elektronik mempunyai beberapa kekurangan yang harus dipertimbangkan:

• Penggunaan memori yang tinggi, kerana ia menjalankan Chromium + Node.js.
• Saiz boleh laku yang besar, walaupun untuk apl mudah.
• Isu prestasi pada komputer lama atau rendah RAM.

Namun, jika anda mengoptimumkan kod anda dan mengelakkan memuatkan perpustakaan yang tidak diperlukan, anda boleh mencapai hasil yang baik. Sesetengah apl seperti Visual Studio Code menunjukkan perkara ini. Sekiranya anda berminat dengan cara peranti mudah alih akan berhenti menyokong WhatsApp pada April 2025, ini adalah fakta penting untuk dipertimbangkan.

Semuanya bergantung pada objektif projek andaJika anda memerlukan pembangunan pesat, keserasian merentas platform, dan antara muka moden, Electron adalah ideal. Tetapi jika anda sedang mencari kecekapan sumber maksimum, mungkin membangunkan aplikasi asli adalah untuk anda.

Seperti yang anda lihat, Electron membolehkan anda membina apl desktop dengan teknologi yang sama yang anda gunakan untuk web.. Ia serba boleh, didokumentasikan dengan baik dan mempunyai komuniti yang semakin berkembang. Daripada alat produktiviti kepada permainan mudah, kemungkinan terbuka untuk pembangun yang ingin mengambil pengalaman web mereka di luar penyemak imbas. Jika anda mempunyai projek web yang ingin anda edarkan sebagai apl, tanpa ragu-ragu Elektron ialah alat yang sempurna untuk melakukannya dengan cepat dan tanpa mencipta semula roda..