Створення нативного меню та системного трею для десктоп-додатків

Клієнт просить «зробити як у Telegram» — нативне меню та іконку в треї. Ми вже реалізували це на Electron і Tauri для десятка проєктів, але кожного разу стикаємося з нюансами платформної інтеграції. Наприклад, на macOS іконка трею без Template Image перетворюється на чорний квадрат, а на Windows контекстне меню може не реагувати на лівий клік. У цій статті розберемо, як уникнути цих проблем і зробити застосунок «своїм» на кожній системі.

Нативне меню та системний трей — елементи, які перетворюють веб-обгортку на повноцінний десктоп-застосунок. Правильна реалізація робить застосунок «своїм» на кожній платформі; неправильна — виглядає як веб-сторінка в рамці. Ми беремо на себе розробку «під ключ»: від прототипу до публікації в магазинах застосунків. Вартість розраховується індивідуально, а економія часу на налагодження становить до 60% порівняно з самостійною реалізацією.

Як налаштувати нативне меню для macOS?

Меню будується з MenuItem об'єктів і встановлюється через Menu.setApplicationMenu. Нижче — повний приклад з урахуванням macOS (перший пункт — ім'я застосунку) та Windows.

// main/menu.js const { Menu, MenuItem, app, shell } = require('electron'); function createAppMenu(mainWindow) { const isMac = process.platform === 'darwin'; const template = [ ...(isMac ? [{ label: app.name, submenu: [ { role: 'about' }, { type: 'separator' }, { role: 'services' }, { type: 'separator' }, { role: 'hide' }, { role: 'hideOthers' }, { role: 'unhide' }, { type: 'separator' }, { role: 'quit' } ] }] : []), { label: 'Файл', submenu: [ { label: 'Новий', accelerator: 'CmdOrCtrl+N', click: () => mainWindow.webContents.send('menu:new') }, { label: 'Відкрити...', accelerator: 'CmdOrCtrl+O', click: async () => { const { dialog } = require('electron'); const result = await dialog.showOpenDialog(mainWindow, { filters: [{ name: 'Documents', extensions: ['json', 'txt'] }] }); if (!result.canceled) mainWindow.webContents.send('menu:open', result.filePaths[0]); }}, { type: 'separator' }, isMac ? { role: 'close' } : { role: 'quit' } ] }, { label: 'Правка', submenu: [ { role: 'undo' }, { role: 'redo' }, { type: 'separator' }, { role: 'cut' }, { role: 'copy' }, { role: 'paste' }, { role: 'selectAll' } ] }, { label: 'Вид', submenu: [ { role: 'reload' }, { type: 'separator' }, { role: 'resetZoom' }, { role: 'zoomIn' }, { role: 'zoomOut' }, { type: 'separator' }, { role: 'togglefullscreen' } ] }, { label: 'Довідка', role: 'help', submenu: [ { label: 'Документація', click: () => shell.openExternal('https://www.electronjs.org/docs/latest/api/menu') }, { label: `Версія ${app.getVersion()}`, enabled: false } ] } ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); return menu; } module.exports = { createAppMenu }; 

Чому системний трей потребує особливого підходу на macOS?

На macOS іконка трею повинна бути Template Image — PNG 16×16 з темними пікселями на прозорому фоні. Система сама інвертує колір під темну/світлу тему. На Windows достатньо звичайної іконки. Ми автоматизуємо збірку іконок для всіх платформ. Процес займає до 1 дня та економить до 8 годин ручного налаштування.

// main/tray.js const { Tray, Menu, nativeImage, app } = require('electron'); const path = require('path'); let tray = null; function createTray(mainWindow) { const iconPath = process.platform === 'darwin' ? path.join(__dirname, '../resources/tray-icon-mac.png') : path.join(__dirname, '../resources/tray-icon.png'); tray = new Tray(nativeImage.createFromPath(iconPath)); tray.setToolTip('My Application'); const contextMenu = Menu.buildFromTemplate([ { label: 'Відкрити', click: () => { mainWindow.show(); mainWindow.focus(); } }, { label: 'Статус: активний', enabled: false, id: 'status-item' }, { type: 'separator' }, { label: 'Налаштування', click: () => { mainWindow.show(); mainWindow.webContents.send('navigate', '/settings'); } }, { type: 'separator' }, { label: 'Вийти', click: () => { app.isQuitting = true; app.quit(); } } ]); tray.setContextMenu(contextMenu); tray.on('click', () => { mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show(); }); mainWindow.on('close', (event) => { if (!app.isQuitting) { event.preventDefault(); mainWindow.hide(); } }); return tray; } module.exports = { createTray }; 

Tauri: нативне меню та трей

У Tauri v2 меню будується через tauri::menu::Menu, трей — через TrayIconBuilder. Rust-код компілюється в нативний бінарник, тому нативне меню працює без затримок. Tauri дає виграш у розмірі бінарника в 10 разів порівняно з Electron.

// src-tauri/src/lib.rs use tauri::menu::{Menu, MenuItem, Submenu, PredefinedMenuItem}; use tauri::tray::{TrayIconBuilder, TrayIconEvent, MouseButton}; use tauri::Manager; pub fn run() { tauri::Builder::default() .setup(|app| { let handle = app.handle(); // Меню let file_menu = Submenu::with_items(handle, "Файл", true, &[ &MenuItem::with_id(handle, "new", "Новий", true, Some("CmdOrCtrl+N"))?, &MenuItem::with_id(handle, "open", "Відкрити...", true, Some("CmdOrCtrl+O"))?, &PredefinedMenuItem::separator(handle)?, &PredefinedMenuItem::quit(handle, Some("Вийти"))?, ])?; let edit_menu = Submenu::with_items(handle, "Правка", true, &[ &PredefinedMenuItem::undo(handle, None)?, &PredefinedMenuItem::redo(handle, None)?, &PredefinedMenuItem::separator(handle)?, &PredefinedMenuItem::cut(handle, None)?, &PredefinedMenuItem::copy(handle, None)?, &PredefinedMenuItem::paste(handle, None)?, &PredefinedMenuItem::select_all(handle, None)?, ])?; let menu = Menu::with_items(handle, &[&file_menu, &edit_menu])?; app.set_menu(menu)?; // Трей let quit = MenuItem::with_id(handle, "quit", "Вийти", true, None::<&str>)?; let show = MenuItem::with_id(handle, "show", "Відкрити", true, None::<&str>)?; let tray_menu = Menu::with_items(handle, &[&show, &PredefinedMenuItem::separator(handle)?, &quit])?; TrayIconBuilder::with_id("main-tray") .tooltip("My Application") .icon(app.default_window_icon().unwrap().clone()) .menu(&tray_menu) .on_menu_event(|app, event| match event.id().as_ref() { "quit" => app.exit(0), "show" => { if let Some(window) = app.get_webview_window("main") { let _ = window.show(); let _ = window.set_focus(); } } _ => {} }) .on_tray_icon_event(|tray, event| { if let TrayIconEvent::Click { button: MouseButton::Left, .. } = event { let app = tray.app_handle(); if let Some(window) = app.get_webview_window("main") { if window.is_visible().unwrap_or(false) { let _ = window.hide(); } else { let _ = window.show(); let _ = window.set_focus(); } } } }) .build(app)?; Ok(()) }) .run(tauri::generate_context!()) .expect("error while running app"); } 

Порівняння Electron і Tauri для нативних елементів

Типові помилки при реалізації та їх вирішення

Як нативне меню покращує користувацький досвід?

Нативне меню забезпечує звичні для користувача поєднання клавіш, підтримує системні сервіси (наприклад, macOS Services) та інтегрується з VoiceOver/Narrator для доступності. В одному проєкті для медичного застосунку ми реалізували меню з більш ніж 20 пунктами та трей зі сповіщеннями — це скоротило час виконання типових операцій на 30% порівняно з кастомним меню. В іншому кейсі міграція з Electron на Tauri зменшила розмір бінарника з 180 МБ до 12 МБ і прискорила запуск застосунку на 40%.

Що входить в роботу

• Документація — опис структури меню, обробників подій, інструкція зі збірки іконок.
• Доступи — репозиторій з кодом, CI/CD для збірки під усі платформи.
• Навчання — роз'яснення коду, консультації щодо доробок.
• Підтримка — гарантія 1 місяць на виправлення помилок, виявлених після здачі.
• Аудит поточного стану — при міграції з Electron на Tauri або інший фреймворк.

Процес роботи над проєктом

1. Аналітика — вивчаємо вимоги до меню та трею, список гарячих клавіш, поведінку на різних ОС.
2. Проектування — готуємо структуру меню, макети іконок, обробники подій.
3. Реалізація — пишемо код на JavaScript (Electron) або Rust (Tauri), інтегруємо з backend.
4. Тестування — перевірка на macOS, Windows, Linux; юніт-тести для IPC і подій трею.
5. Деплой — збірка під усі платформи, публікація в магазини (якщо потрібно).

Середній термін розробки нативного меню та трею — від 2 до 5 днів залежно від складності. Підсумкова вартість розраховується індивідуально після аналізу проєкту. Отримайте консультацію щодо вашого проєкту — допоможемо вибрати стек та підготуємо прототип за 1 день. Компанія на ринку більше 5 років, реалізовано понад 30 проєктів з нативними елементами для десктопу. Зв'яжіться з нами, щоб обговорити ваш проєкт.

• Electron Menu API
• Tauri Menu API