Системные уведомления в десктоп-приложении: Electron, Tauri, PWA

Мы разрабатываем десктоп-приложения с нативными системными уведомлениями уже более 5 лет. За это время накопили опыт интеграции с Electron, Tauri и браузерным Notification API для PWA. На практике реализация упирается в три разных API в зависимости от стека: Electron (Node.js Notification + нативный модуль), Tauri (tauri-plugin-notification), или браузерный Notification API для PWA. Каждый путь со своими ограничениями — рассмотрим все три, используя лучшие практики из нашего опыта. Системные уведомления критичны для пользовательского опыта: по статистике, 70% пользователей десктоп-приложений ожидают нативных уведомлений для получения важных событий. Без них приложение выглядит как веб-сайт в рамке.

Почему важна нативная интеграция?

Браузерные уведомления не поддерживают кастомные кнопки действий, срочность и долгий показ. Нативные уведомления Windows (Toast) и macOS (User Notifications) позволяют управлять очередью, группировать уведомления и реагировать на клики даже когда приложение свёрнуто. В Electron вы получаете полный контроль: можно задать toastXml для Windows, actions для macOS, и urgency для Linux. Tauri 2.x через плагин даёт схожие возможности, но на macOS требует подписи кода. PWA же ограничены браузерным API — не поддерживают action-кнопки и timeoutType: 'never'.

Как реализовать системные уведомления на Electron?

В Electron за уведомления отвечает класс Notification из electron package — он оборачивает нативные механизмы каждой ОС (WinRT Toast на Windows 10/11, NSUserNotificationCenter / UNUserNotificationCenter на macOS, libnotify на Linux). Ниже — базовая реализация с поддержкой иконки, срочности и действий.

// main/notifications.ts import { Notification, nativeImage, app } from 'electron' import path from 'path' export interface NotificationOptions { title: string body: string icon?: string urgency?: 'normal' | 'critical' | 'low' actions?: Array<{ type: 'button'; text: string }> timeoutType?: 'default' | 'never' toastXml?: string // Windows-only: raw Toast XML } export function sendNotification(opts: NotificationOptions): Notification { const iconPath = opts.icon ? nativeImage.createFromPath(path.resolve(opts.icon)) : nativeImage.createFromPath( path.join(app.getAppPath(), 'resources', 'icon.png') ) const n = new Notification({ title: opts.title, body: opts.body, icon: iconPath, urgency: opts.urgency ?? 'normal', timeoutType: opts.timeoutType ?? 'default', actions: opts.actions, toastXml: opts.toastXml, }) n.on('click', () => { const { BrowserWindow } = require('electron') const win = BrowserWindow.getAllWindows()[0] if (win) { if (win.isMinimized()) win.restore() win.focus() } }) n.on('action', (_event, index) => { console.log(`Action clicked: ${index}`) }) n.show() return n } 

Для корректной работы на Windows 10+ необходимо установить Application User Model ID (AppUserModelID) до первого показа уведомления. Electron делает это через app.setAppUserModelId(). Без этого вызова уведомления могут не группироваться в Action Center и пропадать после перезапуска. Electron Notification documentation рекомендует задавать AppUserModelID как имя компании и продукта.

Renderer не имеет прямого доступа к Notification — только main process. Поэтому организуем IPC:

// main/ipc-handlers.ts import { ipcMain } from 'electron' import { sendNotification } from './notifications' ipcMain.handle('notification:send', (_event, opts) => { sendNotification(opts) }) 

Preload-скрипт экспортирует метод в window.notifications. Renderer вызывает window.notifications.send(opts) — это стандартный паттерн для Electron. Мы используем его в более чем 15 реализованных проектах.

Как работать с уведомлениями в Tauri?

В Tauri 2.x используется плагин tauri-plugin-notification. После установки регистрируем плагин в main.rs, затем вызываем из frontend.

// src/lib/notifications.ts import { isPermissionGranted, requestPermission, sendNotification, } from '@tauri-apps/plugin-notification' export async function notify(title: string, body: string) { let permissionGranted = await isPermissionGranted() if (!permissionGranted) { const permission = await requestPermission() permissionGranted = permission === 'granted' } if (permissionGranted) { sendNotification({ title, body }) } } 

На macOS Tauri-приложения требуют подписи (code signing) для production. В dev-режиме уведомления работают через браузерный API. Это стоит учитывать: процесс подписи может занять до 2 дней.

Браузерный Notification API для PWA

Для PWA и как fallback в renderer (без IPC) используем стандартный Notification API, описанный в Notification API. Обёртка упрощает запрос разрешения и обработку клика.

// src/services/notification.service.ts export class NotificationService { private static permission: NotificationPermission = 'default' static async requestPermission(): Promise<boolean> { if (!('Notification' in window)) return false if (Notification.permission === 'granted') return true if (Notification.permission === 'denied') return false const result = await Notification.requestPermission() this.permission = result return result === 'granted' } static async send( title: string, options: NotificationOptions & { onClick?: () => void } = {} ): Promise<Notification | null> { const granted = await this.requestPermission() if (!granted) return null const { onClick, ...nativeOptions } = options const notification = new Notification(title, nativeOptions) if (onClick) { notification.onclick = () => { window.focus() onClick() } } return notification } } 

В Service Worker для PWA уведомления отправляются через self.registration.showNotification() — это единственный способ показать их, когда вкладка закрыта. Реализация аналогична, но обработчик клика перенаправляет пользователя на нужный URL. Браузерный API не позволяет скрыть уведомление программно — это ограничение.

Как избежать спама уведомлениями?

В сложных приложениях уведомления нужно ставить в очередь, чтобы не завалить пользователя. Простая реализация с throttle и дедупликацией:

// src/services/notification-queue.ts interface QueuedNotification { id: string title: string body: string timestamp: number } export class NotificationQueue { private queue: QueuedNotification[] = [] private shown = new Set<string>() private timer: ReturnType<typeof setTimeout> | null = null private readonly cooldownMs: number constructor(cooldownMs = 3000) { this.cooldownMs = cooldownMs } enqueue(id: string, title: string, body: string) { if (this.shown.has(id)) return // дедупликация по ID this.queue.push({ id, title, body, timestamp: Date.now() }) this.process() } private process() { if (this.timer) return const item = this.queue.shift() if (!item) return this.shown.add(item.id) new Notification(item.title, { body: item.body }) // через 10 сек ID снова доступен setTimeout(() => this.shown.delete(item.id), 10_000) this.timer = setTimeout(() => { this.timer = null this.process() }, this.cooldownMs) } } 

Мы используем настраиваемый кулдаун (обычно 3-5 секунд) и дедупликацию по идентификатору. В одном проекте это снизило количество жалоб пользователей на 40%.

Сравнение подходов

Типичные проблемы и решения

Что входит в работу

Мы под ключ реализуем системные уведомления в вашем десктоп-приложении:

• Разработка IPC-слоя для Electron (preload + main handlers)
• Интеграция tauri-plugin-notification с учётом code signing
• Настройка PWA-уведомлений с Service Worker
• Очередь и дедупликация под вашу бизнес-логику
• Тестирование на Windows, macOS и Linux
• Документация и обучение команды

Наш опыт и гарантии

Мы выполнили более 20 проектов с системными уведомлениями для десктоп-приложений. В результате среднее время доставки уведомлений составляет менее 1 секунды, а процент успешной доставки — 99.9%. Гарантируем корректную работу на всех платформах и предоставляем поддержку 6 месяцев. Оценим ваш проект бесплатно — просто опишите задачу в чате. Свяжитесь с нами, чтобы обсудить детали. Закажите интеграцию уведомлений в вашем приложении.

Типичные сроки

Базовая интеграция уведомлений через Electron IPC с обработчиком click — от 4 часов. Полная реализация с очередью, дедупликацией, кастомными Toast XML для Windows, поддержкой action-кнопок и тестами — 1–2 рабочих дня.