Que fait desktop ?
Guide de développement desktop Electron — gestionnaires IPC, contrôleurs, scripts de préchargement, gestion des fenêtres/menus.
Ce guide couvre les aspects fondamentaux du développement d'applications de bureau avec Electron, en mettant l'accent sur les bonnes pratiques pour la communication inter-processus (IPC), la séparation des responsabilités entre processus principal et de rendu, et la gestion des composants d'interface natifs.
Concepts clés
- IPC Handlers : Définition et enregistrement des canaux de communication sécurisés entre le processus principal et les processus de rendu.
- Controllers : Logique métier côté processus principal, organisée en modules réutilisables.
- Preload Scripts : Scripts injectés dans les pages web pour exposer des API sécurisées au processus de rendu via
contextBridge. - Window Management : Création, configuration et gestion des fenêtres BrowserWindow, y compris les paramètres multi-écrans.
- Menu Management : Construction de menus d'application et contextuels avec
MenuetMenuItem.
Structure recommandée
project/
├── main/ # Processus principal
│ ├── ipc/ # Gestionnaires IPC
│ ├── controllers/ # Contrôleurs métier
│ └── windows/ # Gestion des fenêtres
├── preload/ # Scripts de préchargement
├── renderer/ # Processus de rendu (interface utilisateur)
└── package.json
Bonnes pratiques
- Sécurité : Utilisez toujours
contextBridgedans le preload pour exposer des API. ÉviteznodeIntegration: true. - Séparation des responsabilités : Les contrôleurs ne doivent pas dépendre directement d'Electron. Utilisez l'injection de dépendances.
- Gestion des erreurs : Gérez les erreurs IPC dans les deux sens (request/réponse).
- Performance : Évitez d'exposer trop de fonctionnalités dans le preload. Minimisez les appels IPC fréquents.
Exemple de handler IPC
// main/ipc/hello.js
const { ipcMain } = require('electron');
ipcMain.handle('greet:hello', async (event, name) => {
return `Bonjour, ${name} !`;
});
Exemple de preload script
// preload/index.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
greet: (name) => ipcRenderer.invoke('greet:hello', name)
});