Plattformneutrale HTML-Anwendungen mit Electron

Umverpackt

Holger Schwichtenberg

Zum Entwickeln plattformneutraler Anwendungen für Linux, macOS und Windows hat sich Electron etabliert, mit dem man eine Webanwendung in ein Desktop-Programm verpackt. iX zeigt, wie das geht.

Die Idee, eine Web- in eine Desktop-Anwendung zu verpacken, ist fast so alt wie das kommerzielle World Wide Web selbst. Schon früh stellten Firmen ihre Produktkataloge ins Netz. Sie wollten aber weiterhin ihren noch Web-losen Kunden eine CD mit Desktop-Oberfläche anbieten, ohne dafür eine separate Anwendung erstellen zu müssen.

In Desktop-Programme verpackte Webanwendungen heißen heutzutage „hybride Anwendungen“ und erleben einen Boom, seit es durch das Aufkommen der Smartphones viele Betriebssysteme zu bedienen gilt. In der Welt der Mobilgeräte ist hier Cordova führend, das iX demnächst vorstellen wird. Für die PC-Betriebssysteme hat sich Electron etabliert.

Electron ist nicht nur ein Open-Source-Projekt auf GitHub (siehe ix.de/ix1802108, [a]), sondern auch ein Produkt der Firma GitHub, die es als Basis des plattformunabhängigen Editors Atom schuf. Mittlerweile gibt es neben Atom und dem Desktop-Client für GitHub zahlreiche Electron nutzende Programme, etwa Desktop-Varianten von WhatsApp, WordPress, Slack und Flow. Eine umfangreiche Liste findet man online [b].

Ein Prozess überwindet die Sandbox

Electron-Anwendungen laufen in Chromium, dem einbettbaren Open-Source-Kern von Googles Browser Chrome [c]. Eine Anwendung, die in einer Webbrowser-Komponente läuft, unterliegt denselben Sandbox-Restriktionen wie eine Web-App und kann deshalb nur eingeschränkt auf das Netz und das Betriebssystem zugreifen. Electron überwindet die Sandbox, indem es neben dem „Renderer Process“ genannten Chromium-Prozess einen weiteren „Main Process“ startet (siehe Abbildung 1), der alle APIs und Ressourcen verwenden darf, für die der angemeldete Benutzer berechtigt ist. Dieser Prozess setzt auf Node.js, was die Funktionsvielfalt Tausender NPM-Pakete eröffnet [d]. So erlaubt etwa fs den Zugriff auf das Dateisystem, und username liefert den angemeldeten Benutzer.

Für den Main Process stellt Electron eigene Funktionen bereit, zum Beispiel zum Ermitteln der Bildschirmauflösung sowie zum Erstellen von Menüs, Dateidialogen und Benachrichtigungen. Eine zentrale Funktion der Electron-Bibliothek ist die Kommunikation zwischen Main und Renderer Process. Wem Funktionen fehlen (zum Beispiel zum Zugriff auf proprietäre Hardware), der kann native Erweiterungen für Node.js mit der N-API in C oder C++ schreiben [e] und als NPM-Paket in eine Electron-Anwendung einbinden.

Abbildung 2 zeigt eine Collage der Desktop-Variante von MiracleList auf Windows, Linux und macOS. MiracleList ist eine beispielhafte Aufgabenverwaltung für den Browser in Anlehnung an die bekannte Anwendung WunderList. Sie entstand in einem dreiteiligen iX-Tutorial (siehe [1], [2] und [3]) mit TypeScript, Angular und Twitter Bootstrap sowie diversen frei verfügbaren Steuerelementen [f]. Dieser Artikel zeigt, wie sie sich mit Electron in eine Desktop-Anwendung verpacken lässt. Die Webanwendung bildet den Renderer Process mit einigen Erweiterungen für den Datenaustausch mit dem Main Process. Jener ist ganz neu zu schreiben, doch der Aufwand dafür hält sich in Grenzen.

Grundsätzlich kann die Webanwendung beliebige CSS- und JavaScript-Frameworks einsetzen. Einzelne Schwierigkeiten wird dieser Beitrag beleuchten. Ein speziell auf Electron abgestimmtes CSS-Framework ist Photon [g]. Das vollautomatische Verpacken einer beliebigen Website in eine Electron-Webanwendung übernimmt Nativefier [h]. Es fügt jedoch keine Funktionen hinzu und bietet keine Integration mit dem Desktop. Hier soll stattdessen eine vollintegrierte Electron-Anwendung manuell entstehen.

TypeScript bringt mehr Komfort

{
    "name": "miraclelistelectron",
    "version": "0.6.3-Beta1",
    "main": "main.js",
    "dependencies": {
        "moment": "^2.17.1",
        "username": "^2.3.0"
    },
    "devDependencies": {
        "@types/node": "^6.0.64",
        "@types/username": "^1.0.28",
        "electron": "1.7.9"
    }
}

Das MiracleList-Projekt wurde um den Ordner Electron ergänzt (siehe Abbildung 3). Das Verzeichnis /src umfasst die bisherige Webanwendung, /Electron/src den Quellcode (TypeScript-Dateien) für den neuen Main Process und Grafiken für das Anwendungssymbol. /Electron enthält eine passende Konfigurationsdatei für TypeScript (tsconfig.json), package.json für die einzubindenden NPM-Pakete (und den dazu korrespondierenden Ordner nodes_modules, in Abbildung 3 ausgeblendet) sowie mehrere PowerShell-Skripte für das Übersetzen, Debuggen und Ausliefern der Electron-Anwendung. Die PowerShell gibt es inzwischen auch für Linux und macOS [i]. Wer nicht mit ihr arbeiten will, kann die in package.json (siehe Listing 1) bereitgestellten NPM-Skripte benutzen.

Dieser Beitrag verwendet TypeScript zum Implementieren der Electron-Anwendung. Mit purem JavaScript ist dies ebenso möglich, allerdings mit weniger Komfort, da dabei die Typdefinitionen und die darauf aufbauende Eingabeunterstützung in Editoren wie Visual Studio Code fehlen. Das NPM-Paket electron enthält die passenden TypeScript-Definitionen. Sinnvolle Ergänzung sind die TypeScript-Editionen für Node.js (@types/node).