So verwandeln Sie Ihre Website mit Electron in eine Desktop-App

Heutzutage basieren viele Desktop-Anwendungen, die Sie täglich nutzen, auf Web-Technologien wie HTML, CSS und JavaScript. Werkzeuge wie Visual Studio Code, Slack, Discord oder Postman Im Wesentlichen handelt es sich dabei um Websites, die dank eines sehr leistungsstarken Frameworks als Desktop-Anwendungen funktionieren: Elektron. Um mehr über diesen Vorgang zu erfahren, können Sie sich ansehen, wie Sie mit Chrome Web-Apps in Desktop-Apps umwandeln.

Aber was bedeutet das wirklich? Das bedeutet, dass Sie jede beliebige Webanwendung verwenden können, sogar eine einfache Seite, die mit React, Vue oder jedes andere moderne JavaScript-Frameworkund wandeln Sie es in ein installierbares Programm um für Windows, Linux oder macOS. Diese Möglichkeit hat Tausenden von Entwicklern die Tür geöffnet, ihre Webarbeit in native Desktop-Tools umzuwandeln, ohne komplizierte Sprachen oder Frameworks wie C++ oder Java lernen zu müssen.

Was ist Electron und warum ist es so relevant?

Electron ist ein Open-Source-Framework, entwickelt von GitHub welches Chromium (die Browser-Engine) kombiniert Google Chrome) mit Node.js, sodass Sie Webanwendungen auf verschiedenen Plattformen ausführen können, als wären sie nativ. In einfachen Worten: Electron fungiert als gekapselter Browser das Ihr Webprojekt lädt und ihm Zugriff auf Betriebssystemfunktionen gewährt.

Dies hat viele Vorteile: Sie können denselben Technologie-Stack verwenden, den Sie bereits kennen (HTML, CSS, JS), vorhandene Komponenten und Bibliotheken wiederverwenden und einen einzigen Quellcode für mehrere Projekte erstellen. OS.

Grundstruktur einer Electron-Anwendung

Eine App in Electron ist hauptsächlich in zwei Prozesse unterteilt:

• Hauptprozess: Es ist der Kern der Anwendung, in dem Fenster mit dem Modul erstellt und gesteuert werden BrowserWindow. Dieser Prozess hat dank Node.js vollen Zugriff auf das Betriebssystem.
• Renderer-Prozess: Hier wird die Benutzeroberfläche (UI) gerendert, die dem entspricht, was Sie in einem Web-Browser. Jedes von Ihnen erstellte Fenster verfügt über einen eigenen Renderer-Prozess.

Diese Prozesse sind aus Sicherheitsgründen isoliert, daher ist eine Kommunikation zwischen ihnen erforderlich, um auf native Funktionen zuzugreifen (z. B. das Öffnen von Dateien oder das Anzeigen von Benachrichtigungen). Dies geschieht durch Module ipcMain e ipcRenderer.

Beide Prozesse können auf die Funktionalität von Node.js zugreifen., was eine Reihe von Möglichkeiten eröffnet, wie das Lesen von Systemdateien, das Stellen von HTTP-Anfragen, die Handhabung Datenbanken unter anderem lokal.

Erste Schritte: Installieren und Konfigurieren von Electron

Bevor Sie beginnen, müssen Sie installiert haben Node.js y npm (der Node-Paketmanager). Anschließend können Sie Electron als Entwicklungsabhängigkeit in Ihrem Webprojekt installieren:

npm install electron --save-dev

Sie können es auch global installieren:

npm install -g electron

Nach der Installation müssen Sie die Hauptprozess-Eingabedatei erstellen. Konventionell heißt es main.js o electron.js und muss in der paket.json mit der Immobilie main:

"main": "electron.js"

Diese Datei enthält zum Öffnen Ihrer App etwa Folgendes:

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

Dieser Code erstellt ein Fenster mit einer bestimmten Größe, das Ihre Datei lädt index.html.

So integrieren Sie eine Webanwendung in Electron

Ob Ihre App mit React, Vue, Angular oder Vanilla JavaScript, das Ziel ist dasselbe: den Webinhalt dem Renderer-Prozess bereitzustellen. Hierzu haben Sie zwei Möglichkeiten:

• Entwicklungsmodus: Laden Sie die App von http://localhost:3000 Verwendung win.loadURL() im Entwicklungsmodus.
• Produktionsmodus: Erstellen Sie Ihre Web-App und laden Sie von file:// direkt die index.html mit win.loadFile().

Wenn Sie beispielsweise React mit Vite verwenden, nachdem Sie npm run build, die resultierende Datei befindet sich in dist/index.html und es wird folgendermaßen geladen:

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

Vorladen von Skripten und Interprozesskommunikation

Um die Sicherheit und Funktionalität zu verbessern, enthalten viele Anwendungen eine Datei namens preload.js das vor dem Rendern, aber nach der Erstellung des Fensters ausgeführt wird. Dadurch können bestimmte Methoden kontrolliert offengelegt werden.

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

Und im Hauptprozess:

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

Auf diese Weise können Sie Prozesse kommunizieren, ohne die Sicherheit zu verlieren oder sensible Variablen preiszugeben. Wenn Sie mehr über die Funktionsweise von Desktop-Apps erfahren möchten, können Sie den Artikel zum Absturz der Desktop-App lesen. WhatsApp.

Plattformübergreifende Verpackung und Verteilung

Sobald Ihre App ordnungsgemäß funktioniert, können Sie Tools wie Elektronenbauer o Elektronenpaketierer So verpacken Sie Ihre Anwendung in installierbare Formate:

• Windows: .exe- oder NSIS-Installationsprogramme
• macOS: .dmg oder .app
• Linux: .AppImage, .deb oder .tar.gz

Die Installation erfolgt mit:

npm install --save-dev electron-builder

Und Sie definieren in Ihrem package.json die Build-Konfiguration:

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

Dann führen Sie aus:

npm run build
npm run dist

Verbesserungen, die Sie in Ihre Desktop-App integrieren können

Sobald Sie Ihre App konvertiert haben und als Desktop-App ausführen, können Sie sie mit nativen Funktionen erweitern:

• Benachrichtigungen anzeigen des Systems von Ihrer Schnittstelle aus.
• Native Menüs Datei, Bearbeiten, Hilfe usw.
• Zugriff auf das Dateisystem zum Lesen und Schreiben.
• Tastaturkürzel personalisiert global definiert.

Sie können auch Bibliotheken integrieren wie:

• Schiebepuzzle-Engine für Puzzlespiele.
• sqlite3 o nedb für lokale Datenbanken.
• scharf zur Bildverarbeitung.

Ist Electron immer die beste Option?

Elektronik hat einige desventajas das sollte beachtet werden:

• Hoher Speicherverbrauch, da es Chromium + Node.js ausführt.
• Beträchtliche Größe der ausführbaren Datei, auch für einfache Apps.
• Leistungsprobleme auf älteren Computern oder Computern mit wenig RAM.

Wenn Sie Ihren Code optimieren und das Laden unnötiger Bibliotheken vermeiden, können Sie dennoch gute Ergebnisse erzielen. Einige Apps wie Visual Studio Code demonstrieren dies. Falls Sie wissen möchten, dass die Unterstützung für WhatsApp auf Mobilgeräten im April 2025 eingestellt wird, sollten Sie dies berücksichtigen.

Es hängt alles vom Ziel Ihres Projekts abWenn Sie schnelle Entwicklung, plattformübergreifende Kompatibilität und eine moderne Benutzeroberfläche benötigen, ist Electron ideal. Wenn Sie jedoch auf der Suche nach maximaler Ressourceneffizienz sind, ist die Entwicklung nativer Apps vielleicht das Richtige für Sie.

Wie du gesehen hast, Mit Electron können Sie Desktop-Apps mit denselben Technologien erstellen, die Sie für das Web verwenden.. Es ist vielseitig, gut dokumentiert und hat eine wachsende Community. Von Produktivitätstools bis Videospiele Ganz einfach: Entwicklern, die ihr Web-Erlebnis über den Browser hinaus erweitern möchten, stehen die Möglichkeiten offen. Wenn Sie ein Webprojekt haben, das Sie als App verbreiten möchten, dann Electron ist das perfekte Tool, um dies schnell und ohne das Rad neu erfinden zu müssen, zu erledigen..