Иногда вам может потребоваться, чтобы ваше приложение на основе Electron продолжало работать в фоновом режиме, будучи скрытым от пользователя. Вот некоторые варианты использования: Получать push-уведомления, быстрый перезапуск и т. Д.
Что означает «фон»?
Как вы, возможно, уже знаете, в Electron есть два процесса; Renderer и Main. Процесс рендерера отвечает за отображение содержимого в окне. Думайте о Renderer как о клиентской стороне приложения. Главный - это фактический фоновый процесс, который делает то, что мы обычно делаем на стороне сервера.
Поэтому, когда мы говорим о запуске Electron в фоновом режиме, мы имеем в виду, что должен быть запущен только основной процесс и скрыть весь процесс рендеринга. Это так просто (ну, не так просто). Посмотрим, как этого добиться.
Какие у нас есть варианты?
Мы можем просто скрыть все окна приложения и не вызывать app.quit (). Это должно сработать, правда? Но это не так. Даже если все окна закрыты / скрыты, значок приложения останется в доке или на стартовой панели платформы. Который пользователь может щелкнуть, чтобы повторно запустить приложение, или щелкнуть правой кнопкой мыши и полностью выйти из него, чего мы не хотим.
Вы можете подумать, что: Ну, мы могли бы использовать что-то вроде этого:
app.on («окно-все-закрыто», app.dock.hide)
И вы будете правы, моя добрая мадам (или сэр)! Но .dock доступен только в macOS, и даже если мы будем использовать подобное решение для других платформ, у нас возникнет еще одна проблема, связанная с UX; Пользователи не будут знать, запущено приложение или нет. Так что, если бы они захотели закрыть приложение или перезапустить, какие у них были бы варианты?
Я видел еще одну закономерность в сообществе электронов и в отрасли как возможное решение; Трейменное меню.
Как следует из названия, меню остается на «панели задач» ОС. Для macOS это верхняя строка меню, а для Windows - правая нижняя часть панели запуска.
Как и в доке, на панели задач виден только значок, и при нажатии на него отображается меню. Вы также можете показать целое окно, прикрепленное к значку, но мы не будем рассматривать это в этой статье.
Сохранение приложения Electron в фоновом режиме
Итак, теперь фактические шаги и код, чтобы приложение Electron работало в фоновом режиме:
- Прослушайте событие window-all-closed в app и не закройте приложение, а вместо этого скройте все окна средства визуализации и значок в док.
- Создайте или просто сохраните меню лотка.
- Воссоздайте окно, когда пользователи попросят об этом из меню на панели задач.
1. По первому пункту все просто. Вместо этого, как мы обычно делаем:
app.on (‘window-all-closed’, () = ›{app.quit ()})
Мы собираемся сделать:
app.on ('window-all-closed', () = ›{
app.dock.hide () // для macOS
// используйте ту же логику для других ОС, которые вам нужны < br />})
2. Создайте или сохраните меню «Лоток». Мы можем либо создать меню в трее при запуске приложения, либо создать его только тогда, когда все окна будут закрыты на шаге 1. Я просто создам его при запуске приложения. Помните: значок необходим для меню в трее.
3. Меню в лотке. Я просто добавляю две опции в контекстное меню Трея: один - показать приложение, а другой - полностью выйти из него.
Запуск этого кода создаст окно и лоток. Поднос останется там, даже когда все окна закрыты. Пользователь по-прежнему сможет полностью выйти из приложения.
Я немного изменил код быстрого запуска push-уведомлений, чтобы добавить код, связанный с Tray. Вы можете использовать или изменять его по своему усмотрению.
Если у вас есть какая-либо другая техника, которая касается UX, а также функциональности, пожалуйста, дайте мне знать!
Связанное чтение: Узнайте, как добавить push-уведомления в приложения Electron.
👉🏼 Подпишитесь на меня в Твиттере, чтобы узнать больше о технических материалах.
