Electron peut apporter votre application Web sur le bureau. Voici comment commencer

Electron est un cadre qui conditionne votre application Web avec une copie de Chrome, ce qui lui permet de s'exécuter sur le bureau d'un utilisateur avec des applications natives. Il est facile à installer et ne nécessite que de déposer votre index.html et autres dépendances.

Qu'est-ce qu'Electron et comment ça marche?

Electron est essentiellement un conteneur de bureau pour votre application Web. Il est construit au-dessus de Chromium, qui est la branche open-source de Google Chrome sans les fonctionnalités spécifiques à Google. Chaque fois que vous ouvrez une application Electron, elle ouvre une nouvelle fenêtre de navigateur, sauf qu'elle est verrouillée sur votre page chargée à partir des fichiers de l'application et n'a pas la barre d'URL ou d'autres fonctionnalités du navigateur. Cependant, vous aurez toujours accès aux outils de développement de Chromium pour déboguer votre application.

Si l'application est assez rapide, vous ne sauriez probablement même pas que vous utilisiez une page Web au lieu d'une application native.

Le grand avantage d'Electron est qu'il rend votre application multiplateforme prête à l'emploi. Étant donné que tout fonctionne sur une variante de Chromium et que Chromium a des versions pour Windows, macOS et Linux, toute application Electron peut être facilement intégrée pour n'importe quel système d'exploitation. Vous n'avez pas à vous soucier de la compatibilité, car la seule chose qui change est la base sur laquelle votre application fonctionne.

Electron est couramment utilisé aux côtés d'un cadre Web comme React, Vue ou Angular pour créer de puissantes applications Web. Vous avez accès à l'ensemble npm bibliothèque, quelque chose que vous n'avez pas avec une application Web régulière. L'application Electron emballée peut même être mise à jour automatiquement comme un vrai site Web.

De plus, étant donné qu'Electron charge votre application Web à partir d'un fichier compressé plutôt que de vos serveurs, les temps de chargement peuvent être considérablement réduits, car aucun contenu n'est envoyé sur le réseau (à part les appels d'API). De plus, cela prélève une certaine charge sur vos serveurs si la plupart de votre base d'utilisateurs décide d'utiliser l'application de bureau.

Le principal inconvénient d'Electron par rapport à une application native est la performance. Parce qu'elle ouvre essentiellement une nouvelle instance de Chrome, les applications Electron peuvent utiliser beaucoup plus de RAM que leurs homologues natives. Vous n'avez pas non plus la vitesse des langages de bas niveau comme C, car tout sera écrit en JavaScript, bien que ce ne soit pas plus lent que quelque chose qui s'exécute dans un navigateur, et il n'est pas destiné à remplacer les applications qui doivent faire pleine utilisation du métal.

Comment commencer

Electron est étonnamment facile à installer. Bien que vous puissiez installer le npm package et l'importer dans un nouveau projet Node, l'équipe Electron fournit un projet de démarrage rapide avec une partie du passe-partout préconfiguré. Vous pouvez également obtenir d'autres modèles, tels que le passe-partout à réaction électronique, fourni avec React préconfiguré.

Tout ce dont vous aurez besoin pour exécuter Electron est d’installer Node. Ensuite, vous pouvez cloner le référentiel:

git clone https://github.com/electron/electron-quick-start

cd dans le répertoire du projet et installez Electron et ses dépendances associées avec:

npm install

De là, vous pouvez exécuter npm start pour démarrer le serveur de développement, ce qui ouvrira la valeur par défaut index.html avec le Hello World:

Vous pouvez remplacer ceci index.html avec votre site Web et déplacez toutes vos dépendances. C’est vraiment tout ce qu’il faut; par exemple, voici un modèle Bootstrap chargé dans Electron, fonctionnant parfaitement sans toucher à aucun code:

Bien que vous puissiez le laisser ainsi, Electron propose d'autres fonctionnalités qui améliorent l'expérience de bureau que vous souhaitez configurer.

Pimenter Electron

De nombreuses applications Electron choisissent de renoncer à la barre supérieure par défaut, ce qui donne à l'application un aspect plus net. Par exemple, Slack (qui utilise Electron et React) n'a pas la barre supérieure; au lieu de cela, le contenu atteint tout le chemin vers le haut de la fenêtre et de l'espace est fait pour les contrôles de fenêtre macOS.

Cependant, cela ne fonctionne pas bien sous Windows; vous pouvez toujours masquer la barre de titre avec frame: false, mais cela masque également les commandes de la fenêtre, ce qui rend difficile la fermeture native de l'application.

Sur macOS cependant, vous pouvez obtenir cet effet en modifiant la fonction d'initialisation dans main.js, où la fenêtre du navigateur est créée et en spécifiant titleBarStyle: 'hidden'. Cette propriété sera ignorée par Windows.

mainWindow = new BrowserWindow({
    titleBarStyle: 'hidden',
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

De plus, vous pouvez utiliser hiddenInset pour mettre plus de remplissage entre les contrôles de fenêtre et le bord de la fenêtre. Quoi qu'il en soit, vous devriez probablement avoir quelque chose de statique dans ce coin (comme une barre latérale) pour l'empêcher de paraître bizarre lors du défilement.

Cela ne désactive pas le déplacement de la fenêtre, mais vous pouvez l'ajouter manuellement en créant un invisible div placé absolument en haut de l'écran, et donnez-lui la -webkit-app-region: drag; propriété.

De plus, vous pouvez utiliser d'autres intégrations système telles que les menus de bureau personnalisés, les intégrations macOS Dock, TouchBar et Windows Taskbar, et le glisser-déposer de fichiers. Toutes ces intégrations se produisent via l'API Electron et ne touchent pas le code de votre application, sauf si vous le souhaitez.

Construire votre application

Pour réellement emballer votre application pour la production, vous voudrez utiliser un outil comme le générateur d'électrons. Vous pouvez également télécharger manuellement les binaires prédéfinis d'Electron et les empaqueter avec votre application, mais le constructeur est beaucoup plus simple.

Ajoutez-le à votre projet:

yarn add electron-builder --dev

Spécifiez une configuration de build dans votre package.json (documentation de toutes les options):

"build": {
  "appId": "your.id",
  "mac": {
    "category": "your.app.category.type"
  }
}

Ajoutez les icônes de votre application et ajoutez le electron-builder script à votre package.json pour une utilisation facile:

"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}

Maintenant, lorsque vous exécutez npm dist, votre application sera conditionnée dans un format distribuable.

Une chose que vous voudrez ajouter (et vérifier que cela fonctionne) est la mise à jour automatique. Sinon, vous n'aurez aucun moyen de proposer des modifications aux utilisateurs comme vous le feriez avec une application Web standard. Vous pouvez ajouter cette fonctionnalité avec le update-electron-app bibliothèque.