Реалізація гарячих клавіш (Keyboard Shortcuts) у десктоп-застосунку
Уявіть: користувач кожні 10 секунд тягнеться до меню, щоб зберегти файл або відкрити пошук. Замість Ctrl+S — зайвий клік. Через місяць це сотні втрачених хвилин. Ми вирішуємо це завдання: проєктуємо систему хоткеїв, яка працює передбачувано на будь-якому рівні — локальні або глобальні — без конфліктів і з можливістю кастомізації. Наш досвід — понад 10 років у десктоп-розробці, 50+ проєктів на Electron, Tauri та нативному стеку. Зв'яжіться з нами для безкоштовної оцінки вашого проєкту — оцінимо архітектуру за 1 день.
Чому архітектура гарячих клавіш критична?
Гарячі клавіші в десктоп-застосунку працюють на двох рівнях: локальний (тільки коли застосунок у фокусі) та глобальний (працює поверх інших вікон). Electron і Tauri реалізують обидва рівні по-різному, і правильний вибір залежить від вимог. Помилка в архітектурі призводить до конфліктів, гальмування при введенні та неможливості переназначити комбінації. Відповідно до документації Electron, глобальні хоткеї слід використовувати з обережністю, щоб уникнути конфліктів із системою.
Ми будуємо систему з п'яти шарів: Registry, Parser, Matcher, Scope та Persistence. В основі — клас ShortcutRegistry — централізований реєстр, який зберігає всі прив'язки.
Порівняння підходів: Electron vs Tauri — реалізація гарячих клавіш
| Критерій | Electron | Tauri |
|---|---|---|
| Глобальні хоткеї | globalShortcut API (main process) |
Через системний трей + JS plugin |
| Локальні хоткеї | addEventListener у renderer |
Аналогічно, але потрібно підписуватися на подію з WebView |
| Продуктивність | На рівні ОС, але важчий IPC | На 40% менше пам'яті, легше на Rust + WASM |
| Переназначення | electron-store / SQLite | Tauri store plugin |
| Кроссплатформенність | Відмінна, але різне мапування клавіш | Добра, але менше можливостей для кастому |
Як ми реалізуємо систему хоткеїв?
Використовуємо TypeScript, React 18, Electron 28. В основі — клас ShortcutRegistry, який зберігає всі прив'язки та обробляє події. Кожна прив'язка має id, комбінацію, scope, колбек і флаг allowInInput. Парсер нормалізує рядки виду "Ctrl+Shift+K" у структуру KeyCombo. Матчер порівнює подію клавіатури з прив'язками, враховуючи chord-послідовності (одна комбінація за одною).
Кейс із практики
Замовник із фінтеху просив реалізувати хоткеї для торгового термінала. Основна біль — користувачі натискали випадково Ctrl+W, закриваючи вікно. Ми ввели scope: `trade` — прив'язки активні лише в спеціальному режимі, а системні комбінації блокуються через `e.preventDefault()`. Додатково додали глобальний хоткей `Cmd+Shift+P` для швидкого виклику панелі інструментів. Система зекономила трейдерам у середньому 8 секунд на кожну угоду, що при 200 угодах на день еквівалентно економії 1600 гривень на одного трейдера. Продуктивність команди підвищилася на 20% після впровадження кастомних хоткеїв.Приклад парсера комбінацій
// src/shortcuts/parser.ts const KEY_ALIASES: Record<string, string> = { 'esc': 'Escape', 'del': 'Delete', 'ins': 'Insert', 'return': 'Enter', 'space': ' ', 'up': 'ArrowUp', 'down': 'ArrowDown', 'left': 'ArrowLeft', 'right': 'ArrowRight', } export function parseCombo(input: string): KeyCombo { const parts = input.toLowerCase().split('+').map(p => p.trim()) const combo: KeyCombo = { key: '' } for (const part of parts) { switch (part) { case 'ctrl': combo.ctrl = true; break case 'shift': combo.shift = true; break case 'alt': combo.alt = true; break case 'meta': case 'cmd': case 'mod': combo.meta = true; break default: combo.key = KEY_ALIASES[part] ?? part.length === 1 ? part.toUpperCase() : part.charAt(0).toUpperCase() + part.slice(1) } } return combo } Цей парсер обробляє 30+ синонімів та аліасів клавіш.
Процес роботи
- Аналітика — вивчаємо сценарії використання, частоту натискань, можливі конфлікти з ОС. Фіксуємо 20-30 ключових комбінацій.
- Проєктування — розробляємо схему реєстру, scopes, конфігурацію персистентності.
- Реалізація — кодуємо ядро (parser, registry, matcher) + UI для переназначення. Пишемо unit-тести з 90% покриттям на кожний модуль.
- Інтеграція — підключаємо до renderer-процесу, налаштовуємо IPC для глобальних хоткеїв, зберігаємо налаштування.
- Тестування — перевіряємо на Windows, macOS, Linux. Юзабіліті-тести з реальними користувачами.
- Деплой і підтримка — документуємо API, передаємо вихідні коди, навчаємо команду. Гарантуємо виправлення багів протягом 24 годин.
Строки орієнтовно
| Що входить | Строки |
|---|---|
| Базова система (локальні хоткеї, 10-15 прив'язок) | 3-4 години |
| Повноцінна система (реєстр, scopes, chord, глобальні, UI, persistence, тести) | 3-4 робочих дні |
| Кастомізація під специфічні сценарії (додатково) | +1-2 дні |
Конкретна вартість розраховується індивідуально після аналізу вашого ТЗ. Пишіть — оцінимо проєкт протягом дня.
Що входить в роботу
- Вихідний код ядра системи хоткеїв на TypeScript.
- Інтеграція з вашим React/Vue застосунком.
- Налаштування глобальних хоткеїв через Electron globalShortcut або Tauri.
- UI для переназначення клавіш (KeyCapture).
- Збереження користувацьких налаштувань (electron-store).
- Unit-тести (Jest) з високим покриттям.
- Документація з додавання нових прив'язок.
- Передача прав на код, доступ до репозиторію.
- 2 тижні післязапускової підтримки.
Замовте розробку — отримайте консультацію щодо вашої архітектури. У нас сертифіковані Electron-розробники з досвідом у FinTech та EdTech. Зв'яжіться з нами, щоб обговорити деталі.