Оглавление
Electron
Настольные программы на HTML, CSS и JavaScript: окна, главный процесс, IPC и сборка.
1.Начало работы
- Что такое ElectronНастольные программы на HTML, CSS и JavaScript: из чего состоит Electron, кто им пользуется и что понадобится для курса.
- Главный процесс и процесс отрисовкиИз каких процессов состоит программа на Electron, что делает каждый из них и почему они разделены.
- Первое приложение вручнуюСоздаём проект Electron с нуля: package.json, main.js и index.html, и запускаем окно.
- Проект на Electron ForgeСоздание проекта одной командой через Electron Forge: структура папок, команды и отличия от ручного проекта.
- Окно BrowserWindowКак создать окно программы, задать его размер, заголовок и поведение и управлять им из главного процесса.
- Жизненный цикл приложенияСобытия объекта app: готовность, закрытие всех окон, повторная активация и выход, а также разница между Windows, Linux и macOS.
2.Страница и IPC
- HTML, CSS и JavaScript страницыКак подключить к окну стили и скрипт, где лежат файлы страницы и чем страница Electron отличается от сайта.
- Скрипт preload и contextBridgeКак скрипт preload передаёт странице отдельные функции через contextBridge и почему страница не получает Node.js целиком.
- Безопасность по умолчаниюИзоляция контекста, отключённый Node.js, песочница и Content-Security-Policy: что они защищают и почему их не стоит выключать.
- IPC: от страницы к главному процессуКак страница вызывает код главного процесса и получает ответ: ipcMain.handle, ipcRenderer.invoke и мост в preload.
- IPC: от главного процесса к страницеКак главный процесс сам отправляет сообщение окну через webContents.send и как страница подписывается на него через preload.
3.Возможности настольной программы
- Чтение и запись файловСохраняем заметки в файл: модуль fs в главном процессе, папка данных программы app.getPath('userData') и вызов через IPC.
- Системные диалогиОкна открытия и сохранения файла и окно с вопросом: модуль dialog в главном процессе и вызов со страницы.
- Меню приложенияСобственное меню программы: шаблон, Menu.buildFromTemplate, готовые роли, клавиши и отправка команды странице.
- Контекстное менюМеню по правому щелчку: Menu.popup, меню для полей ввода и меню для конкретной заметки через IPC.
- Значок в трееЗначок программы в области уведомлений: класс Tray, подсказка, меню и сворачивание окна в трей.
- УведомленияСистемные уведомления из главного процесса и со страницы: класс Notification, щелчок по уведомлению и особенности Windows.
- Несколько оконВторое окно для заметки, передача данных через адрес страницы, дочерние и модальные окна и учёт открытых окон.
- Горячие клавишиТри вида сочетаний клавиш в Electron: клавиши меню, глобальные сочетания globalShortcut и обработка клавиш на странице.
4.Разработка и выпуск
- Vite и ReactИнтерфейс программы на React или Vue: шаблон Electron Forge с Vite, подключение React и связь компонентов с preload.
- ОтладкаКак искать ошибки в Electron: DevTools для страницы, вывод и отладчик главного процесса, отладка в VS Code и падения окна.
- Сборка и установщикиКак превратить проект в программу и установщик с Electron Forge: импорт в ручной проект, команды package и make, мейкеры и значок.
- АвтообновлениеКак программа на Electron сама получает новые версии: публикация релизов, модуль update-electron-app и встроенный autoUpdater.
- Подпись кодаЗачем подписывать программу, что нужно для подписи в macOS и Windows и как указать сертификаты в Electron Forge.