Elektron ist ein framework, dass Pakete, die dein web-Anwendung mit einer Kopie von Chrome, so dass es zu laufen, auf den desktop eines Benutzers neben nativen Anwendungen. Es ist einfach zu installieren und erfordert nur Sie fallen in Ihre index.html und andere Abhängigkeiten.
Was Ist Elektron, und Wie Funktioniert Es?
Elektron ist im wesentlichen ein desktop-container für Ihre web-app. Es basiert auf Chromium, der open-source-Zweig von Google Chrome ohne die Google-spezifischen features. Jedes mal, wenn Sie öffnen ein Elektron app, es öffnet sich ein neues browser-Fenster, außer es ist gesperrt auf Ihre Seite geladen aus dem app-Dateien, und nicht über die URL-Leiste oder andere browser-Funktionen. Obwohl, Sie haben immer noch Zugriff auf Chromium-Entwickler-Tools für das debugging Ihrer Anwendung.
Wenn die app ist flott genug, würden Sie wahrscheinlich nicht einmal wissen, Sie wurden mit einer Webseite anstatt einer nativen app.
Der große Vorteil des Elektrons ist, dass es macht Ihren app-cross-Plattform aus der box. Weil es läuft alles auf eine Variante von Chrom, und Chrom hat die builds für Windows, macOS und Linux, jedem Elektron die app lässt sich leicht gebündelt für alle OS. Sie müssen nicht um Kompatibilität zu kümmern, das einzige was sich ändert, ist die Basis, dass Ihre app ausgeführt wird.
Elektron wird Häufig verwendet, neben einem web-framework wie Reagieren, Vue, oder Winkel, um leistungsfähige web-Anwendungen. Sie haben Zugriff auf das gesamte npm-Bibliothek, etwas, das Sie nicht haben, mit einem normalen web-app. Die verpackten Elektronen-app kann sogar automatisch aktualisiert, genau wie eine echte website.
Plus, da die Elektronen lädt Ihre web app aus eine gepackte Datei, anstatt eigene Server, die Ladezeiten werden drastisch gesenkt, da es keine Inhalte über das Netzwerk gesendet werden (neben API-Aufrufe). Zusätzlich, dies dauert einige Last von Ihren Servern, wenn die meisten Ihre userbase entscheidet sich für den Einsatz der desktop-app.
Der Haupt-Nachteil des Elektrons im Vergleich zu einer nativen app ist die Leistung. Denn es ist im wesentlichen das öffnen einer neuen Instanz von Chrome, Elektron apps können viel mehr RAM als Ihre nativen Gegenstücke. Sie haben auch nicht die Geschwindigkeit des low – level-Sprachen wie C, alles wird in JavaScript geschrieben, aber es wird nicht langsamer, als etwas, das in einem browser ausgeführt wird, und es ist nicht beabsichtigt, ersetzen Sie Anwendungen, die volle Nutzung des Metalls.
Wie, um loszulegen
Elektron ist überraschend einfach einzurichten. Während Sie könnten, installieren Sie das npm-Paket und importieren Sie Sie in einen neuen Knoten Projekt, das Elektron team bietet eine quick-start-Projekt mit einigen der vorformulierten vorkonfiguriert. Sie können auch andere Vorlagen, wie z.B. Elektronen-reagieren-boilerplate, das kommt mit Reagieren vorkonfiguriert.
Alles, was Sie ausführen müssen, Elektron um Knoten installiert. Dann können Sie Klonen das repo:
git clone https://github.com/electron/electron-quick-start
cd zum Projekt-Verzeichnis, und installieren Elektron und die zugehörigen Abhängigkeiten mit:
npm installieren
Von hier aus können Sie laufen npm Start starten der Entwicklungs-server, öffnen Sie die Standard-index.html mit der Hallo Welt:
Sie kann diese ersetzen index.html mit Ihrer website, und verschieben Sie alle Ihre Abhängigkeiten über. Das ist wirklich alles was man braucht; zum Beispiel, hier ist ein Bootstrap-template geladen Elektronen, funktioniert perfekt, ohne Berührung der code:
Obwohl man könnte es so belassen, Electron bietet andere features, die die desktop-Erfahrung besser, die Sie konfigurieren möchten.
Würzen Elektron
Viele Elektronen-apps wählen Sie zu verzichten, den Standard-top-bar insgesamt gibt die Anwendung ein cleaner look. Zum Beispiel, Slack (die Elektronen und Reagieren) nicht die top-bar, anstatt der Inhalt erreicht den ganzen Weg an die Spitze der Fenster, und Raum ist für die macOS-Fenster-Steuerelemente.
Das funktioniert nicht gut auf Windows, obwohl, können Sie immer noch verstecken die Titelleiste mit Rahmen: false, aber es verbirgt sich auch die Fenster-Steuerelemente zusammen, so dass es schwer zu beenden Sie die app nativ.
Auf macOS jedoch, diesen Effekt erreichen Sie durch Bearbeiten der Initialisierungs-Funktion in main.js, wo Sie das browser-Fenster erstellt, und die Angabe titleBarStyle: ‘versteckt’. Diese Eigenschaft wird ignoriert, die von Windows.
mainWindow = new Lässt({
titleBarStyle: ‘hidden’,
Breite: 800,
Höhe: 600,
webPreferences: {
Vorspannung: Pfad.join(__dirname, ‘preload.js’)
}
})
Darüber hinaus können Sie hiddenInset mehr Polsterung zwischen den controls und den Rand des Fensters. So oder so, sollten Sie wahrscheinlich etwas statisch in der Ecke (wie ein Kasten) um zu verhindern, dass es aus der Betrachtung seltsam beim scrollen.
Dies gilt deaktivieren, ziehen Sie das Fenster um, aber Sie können hinzufügen, dass wieder manuell durch die Schaffung einer unsichtbaren div platziert absolut am oberen Rand des Bildschirms, und geben Sie es in die -webkit-app-region: ziehen; Eigentum.
Darüber hinaus können Sie Gebrauch machen von anderen system-Integrationen wie benutzerdefinierte desktop-Menüs, macOS Dock, TouchBar, und die Windows-Taskleiste Integrationen, und die Datei per drag & drop. Alle diese Integrationen geschehen durch die Elektron-API und berühren Sie nicht Ihre app-code, es sei denn, Sie wollen es zu.
Bauen Sie Ihre App
Tatsächlich-Paket der app für die Produktion, Sie werden wollen, nutzen Sie ein tool wie Elektron-builder. Man könnte auch manuell herunterladen Elektronen vorkompilierten und packen Sie es mit Ihrer Anwendung, aber der builder ist viel einfacher.
Fügen Sie es zu Ihrem Projekt:
Garn hinzufügen Elektron-builder –dev
Geben Sie eine build-Konfiguration in Ihrem Paket.json (Dokumentation aller Optionen):
“bauen”: {
“appId”: “Ihr.id”,
“mac”: {
“Kategorie”: “Ihr.app.Kategorie.Typ”
}
}
Fügen Sie Ihre app-Symbole, und fügen Sie die Elektron-builder-Skript, um Ihr Paket.json für die einfache Nutzung:
“scripts”: {
“pack”: “Elektron-builder –dir”,
“dist”: “Elektron-builder”
}
Nun, beim ausführen von npm dist, Sie app wird verpackt in ein ausführbares format.
Eine Sache, die Sie hinzufügen möchten, und stellen Sie sicher, dass es funktioniert) ist die automatische Aktualisierung. Andernfalls werden Sie nicht eine Möglichkeit haben, drücken Sie die änderungen an den Benutzern wie würden Sie mit einem normalen web-Anwendung. Sie können diese Funktion mit der update-Elektron-app-Bibliothek.