Системные уведомления в десктоп-приложении: 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 рабочих дня.