Учебник по Electron.js

Добавление значка приложения в область уведомлений

Класс Tray позволяет добавить иконку приложения в область уведомления, расположенную в правой части Панели задач в Windows.

Класс Tray

Конструктор класса Tray имеет такой формат:

const { Tray } = require('electron');
<Объект> = new Tray(<Значок>[, <guid>]);

Класс Tray содержит следующие основные методы (полный список см. в документации):

tray.setImage('test.ico');
tray.setContextMenu(Menu.buildFromTemplate(templateMenu));
tray.setToolTip('Текст подсказки');

Добавим значок приложения в область уведомлений. При щелчке правой кнопкой мыши отобразим контекстное меню с двумя пунктами. При выборе первого пункта откроем окно. Выбор второго пункта приведет к завершению работы приложения. При наведении указателя мыши на значок отобразим всплывающую подсказку. Содержимое файла main.js приведено в листинге 6.1, а файла index.htm — в листинге 6.2.

Листинг 6.1. Содержимое файла C:\book\e1\main.js

const { app, BrowserWindow, Tray, Menu } = require('electron');
let win = null, tray = null;
// Приложение в единственном экземпляре
const lockApp = app.requestSingleInstanceLock();
if (!lockApp) {
   app.quit();
}
else {
   function createWindow() {
      win = new BrowserWindow({
         width: 500,
         height: 300,
         show: false,
         webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
         }
      });
      win.webContents.loadFile('index.html');
      win.on('close', (e) => {
         e.preventDefault();
         win.hide();
      });
      win.on('closed', () => {
         win = null;
      });
   
      let templateMenu = [
         {
            label: 'Показать окно',
            click: () => {
               win.show();
            }
         },
         {
            label: 'Выход',
            click: () => {
               app.exit(0);
            }
         }
      ];
      
      tray = new Tray('test.ico');
      tray.setContextMenu(Menu.buildFromTemplate(templateMenu));
      tray.setToolTip('Текст подсказки');
   }
   
   app.whenReady().then( () => {
      createWindow();
      app.on('activate', () => {
         if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
         }
      });
   } );
   
   app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
         app.quit();
      }
   });
}

Листинг 6.2. Содержимое файла C:\book\e1\index.html

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self'">
   <title>Класс Tray</title>
</head>
<body>
   <h1>Класс Tray</h1>
</body>
</html>

Обработка событий

Класс Tray поддерживает следующие основные события (полный список см. в документации):

tray.on('click', (p1, p2, p3) => {
   console.log('click');
   console.log(p1, p2, p3);
});