Jak przekształcić swoją witrynę internetową w aplikację desktopową za pomocą Electron

Obecnie wiele aplikacji desktopowych, z których korzystasz codziennie, zostało stworzonych przy użyciu technologii internetowych, takich jak: HTML, CSS i JavaScript. Narzędzia takie jak Visual Studio Code, Slack, Discord lub Postman Są to zasadniczo strony internetowe, które dzięki bardzo mocnemu frameworkowi działają jak aplikacje desktopowe: Elektron. Aby dowiedzieć się więcej na temat tego procesu, sprawdź, jak przekształcić aplikacje internetowe w aplikacje komputerowe za pomocą przeglądarki Chrome.

Ale co to właściwie oznacza? Oznacza to, że możesz wziąć dowolną aplikację internetową, nawet prostą stronę stworzoną za pomocą React, Vue lub jakikolwiek inny nowoczesny framework JavaScripti przekształcić go w program instalacyjny Windows, Linux lub macOS. Możliwość ta otworzyła drzwi tysiącom programistów, którzy mogą przekształcić swoją pracę w sieci w natywne narzędzia desktopowe bez konieczności nauki skomplikowanych języków lub frameworków, takich jak C++ czy Java.

Czym jest Electron i dlaczego jest tak istotny?

Electron to otwartoźródłowy framework opracowany przez GitHub który łączy Chromium (silnik przeglądarki) Google Chrome) z Node.js, co pozwala na uruchamianie aplikacji internetowych tak, jakby były natywne dla różnych platform. Krótko mówiąc, Electron działa jako zamknięta przeglądarka który ładuje Twój projekt internetowy i zapewnia mu dostęp do funkcji systemu operacyjnego.

Rozwiązanie to ma wiele zalet: możesz używać tych samych technologii, które już znasz (HTML, CSS, JS), ponownie wykorzystywać istniejące komponenty i biblioteki oraz tworzyć jeden kod źródłowy dla wielu projektów. OS.

Podstawowa struktura aplikacji Electron

Aplikacja w Electronie dzieli się głównie na dwa procesy:

• Główny proces:Jest to rdzeń aplikacji, w którym okna są tworzone i kontrolowane za pomocą modułu BrowserWindow. Proces ten ma pełny dostęp do systemu operacyjnego dzięki Node.js.
• Proces renderowania:Tutaj renderowany jest interfejs użytkownika (UI), który jest równoważny temu, co można zobaczyć w przeglądarka internetowa. Każde utworzone okno będzie miało swój własny proces renderowania.

Procesy te są odizolowane ze względów bezpieczeństwa, więc komunikacja między nimi jest konieczna, aby uzyskać dostęp do natywnych funkcji (takich jak otwieranie plików lub wyświetlanie powiadomień). Odbywa się to za pomocą modułów ipcMain e ipcRenderer.

Oba procesy mogą uzyskać dostęp do funkcjonalności Node.js., co otwiera szereg możliwości, takich jak odczytywanie plików systemowych, wysyłanie żądań HTTP, obsługa Bazy danych lokalne i inne.

Pierwsze kroki: Instalowanie i konfigurowanie Electron

Zanim zaczniesz, musisz zainstalować node.js y Npm (menedżer pakietów Node). Następnie możesz zainstalować Electron jako zależność programistyczną w swoim projekcie internetowym:

npm install electron --save-dev

Można również zainstalować go globalnie:

npm install -g electron

Po zainstalowaniu należy utworzyć plik wejściowy głównego procesu. Zgodnie z konwencją nazywa się to main.js o electron.js i musi być podany w referencjach pakiet.json z nieruchomością main:

"main": "electron.js"

Ten plik będzie zawierał coś takiego, co umożliwi otwarcie Twojej aplikacji:

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);

Ten kod tworzy okno o określonym rozmiarze, które ładuje Twój plik index.html.

Jak zintegrować aplikację internetową z Electron

Niezależnie od tego, czy Twoja aplikacja została stworzona z React, Vue, Angular lub zwykły JavaScript, cel jest ten sam: dostarczyć zawartość internetową do procesu renderującego. W tym celu masz dwie możliwości:

• Tryb rozwoju:załaduj aplikację z http://localhost:3000 przy win.loadURL() w trybie programistycznym.
• Tryb produkcji:Zbuduj swoją aplikację internetową i załaduj ją z file:// bezpośrednio index.html z win.loadFile().

Na przykład, jeśli używasz React z Vite, po wykonaniu npm run build, wynikowy plik znajduje się w dist/index.html i ładuje się tak:

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

Wstępne ładowanie skryptów i komunikacja międzyprocesowa

Aby zwiększyć bezpieczeństwo i funkcjonalność, wiele aplikacji zawiera plik o nazwie preload.js który uruchamia się przed renderowaniem, ale po utworzeniu okna. Umożliwia to kontrolowane ujawnianie niektórych metod.

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

A w głównym procesie:

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

W ten sposób można komunikować procesy bez utraty bezpieczeństwa i narażania poufnych zmiennych. Jeśli chcesz dowiedzieć się więcej o tym, jak działają aplikacje komputerowe, zapoznaj się z artykułem na temat awarii aplikacji komputerowych. WhatsApp.

Pakowanie i dystrybucja multiplatformowa

Gdy Twoja aplikacja będzie działać prawidłowo, możesz użyć narzędzi takich jak: budowniczy elektronów o pakowacz elektronów Aby spakować aplikację do formatów instalacyjnych:

• Windows: Instalatory .exe lub NSIS
• macOS: .dmg lub .app
• Linux: .AppImage, .deb lub .tar.gz

Instalujesz za pomocą:

npm install --save-dev electron-builder

I definiujesz w swoim package.json konfiguracja kompilacji:

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

Następnie uruchamiasz:

npm run build
npm run dist

Ulepszenia, które możesz zintegrować ze swoją aplikacją na komputer

Po przekonwertowaniu aplikacji i uruchomieniu jej jako aplikacji komputerowej możesz ją rozszerzyć o funkcje natywne:

• Pokaż powiadomienia systemu z poziomu interfejsu.
• Menu natywne plik, edycja, pomoc, itp.
• Dostęp do systemu plików do czytania i pisania.
• Skróty klawiszowe niestandardowe zdefiniowane globalnie.

Można również zintegrować biblioteki takie jak:

• Silnik do łamigłówek-przesuwanych do gier logicznych.
• sqlite3 o nie dla baz danych lokalnych.
• ostry do przetwarzania obrazu.

Czy Electron zawsze jest najlepszym wyborem?

Elektronika ma pewne wady należy to rozważyć:

• Duże zużycie pamięci, ponieważ działa w oparciu o Chromium + Node.js.
• Znaczny rozmiar pliku wykonywalnego, nawet w przypadku prostych aplikacji.
• Problemy z wydajnością na starszych komputerach lub komputerach z małą ilością pamięci RAM.

Mimo wszystko, jeśli zoptymalizujesz swój kod i unikniesz ładowania niepotrzebnych bibliotek, możesz osiągnąć dobre rezultaty. Niektóre aplikacje, np. Visual Studio Code, to demonstrują. Jeśli interesuje Cię, w jaki sposób urządzenia mobilne przestaną obsługiwać WhatsApp w kwietniu 2025 r., jest to istotny fakt, który warto wziąć pod uwagę.

Wszystko zależy od celu Twojego projektuJeśli zależy Ci na szybkim rozwoju, kompatybilności międzyplatformowej i nowoczesnym interfejsie, Electron będzie dla Ciebie idealnym rozwiązaniem. Jeśli jednak zależy Ci na maksymalnej efektywności wykorzystania zasobów, być może tworzenie aplikacji natywnych będzie dla Ciebie odpowiednim rozwiązaniem.

Jak widzisz, Dzięki Electron możesz tworzyć aplikacje desktopowe przy użyciu tych samych technologii, których używasz w aplikacjach internetowych.. Jest wszechstronny, dobrze udokumentowany i ma rosnącą społeczność. Od narzędzi zwiększających produktywność do gra proste, otwierają się możliwości dla deweloperów, którzy chcą korzystać z Internetu poza przeglądarką. Jeśli masz projekt internetowy, który chcesz udostępnić jako aplikację, bez wątpienia Electron to idealne narzędzie, aby zrobić to szybko i bez konieczności ponownego wyważania otwartych drzwi..