В этой статье блога мы рассмотрим различные способы скрытия приложения Electron.js на панели задач. Панель задач, также известная как область уведомлений или панель задач, обеспечивает удобный способ свернуть приложения, сохраняя при этом их доступность. Мы рассмотрим различные подходы, сопровождаемые примерами кода, для реализации этой функциональности в вашем приложении Electron.js.

Метод 1: Модуль Tray
Модуль Tray в Electron.js позволяет создавать значки на панели задач и управлять ими. Используя этот модуль, вы можете скрыть окно приложения и вместо него отобразить значок на панели задач. Вот пример фрагмента кода:

const { app, Tray } = require('electron');
let tray = null;
app.on('ready', () => {
  tray = new Tray('path/to/icon.png');
  tray.on('click', () => {
    // Show or restore the application window
    // Example: mainWindow.show();
  });
});

Метод 2: минимизация окна
Другой подход заключается в сворачивании окна приложения на панели задач, когда пользователь нажимает кнопку свертывания. Этого можно добиться, обработав событие minimizeокна BrowserWindow. Вот пример:

const { app, BrowserWindow } = require('electron');
let mainWindow = null;
app.on('ready', () => {
  mainWindow = new BrowserWindow();

  mainWindow.on('minimize', (event) => {
    event.preventDefault(); // Prevent default minimize behavior
    mainWindow.hide(); // Hide the application window
  });
});

Метод 3: глобальный ярлык
Вы можете реализовать глобальный ярлык, чтобы скрывать или показывать окно приложения при нажатии определенной комбинации клавиш. Это позволяет пользователям быстро переключать видимость вашего приложения. Вот пример использования модуля globalShortcut:

const { app, BrowserWindow, globalShortcut } = require('electron');
let mainWindow = null;
app.on('ready', () => {
  mainWindow = new BrowserWindow();

  globalShortcut.register('CommandOrControl+H', () => {
    if (mainWindow.isVisible()) {
      mainWindow.hide();
    } else {
      mainWindow.show();
    }
  });
});

Метод 4: Контекстное меню
Вы можете добавить контекстное меню к значку на панели задач, предоставляя возможность скрыть или показать приложение. Такой подход позволяет пользователям щелкнуть правой кнопкой мыши значок в трее и выбрать нужное действие. Вот пример:

const { app, Tray, Menu } = require('electron');
let tray = null;
app.on('ready', () => {
  tray = new Tray('path/to/icon.png');

  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show',
      click: () => {
        // Show or restore the application window
        // Example: mainWindow.show();
      }
    },
    {
      label: 'Hide',
      click: () => {
        // Hide the application window
        // Example: mainWindow.hide();
      }
    }
  ]);

  tray.setContextMenu(contextMenu);
});

В этой статье мы рассмотрели несколько способов скрыть приложение Electron.js на панели задач. Используя модуль Tray, минимизацию окон, глобальные ярлыки или контекстные меню, вы можете улучшить взаимодействие с пользователем вашего приложения Electron.js. Выберите метод, который лучше всего соответствует требованиям вашего приложения, и предоставьте пользователям удобный способ доступа к вашему приложению и его свертывания.